I have installed a package using 'npm install package-name' and now I am wondering how I can use this package in my global.js file which is in the public/javascripts folder?
I have tried using 'var name = require('package-name');' in the global.js file however this does not seem to be working. Am I meant to reference the package some place else?
Any help would be appreciated. Thank you.
So the short answer is use the browserify. Really understanding all the implications of sharing code between node and the browser is somewhat of a lengthy topic, so please take the time to read the tutorials and the handbook. But the basic idea is
in your global.js file, load the module from node with var name = require("package-name"); as you are doing.
Transform your file with browserify a la browserify public/javascripts/global.js > public/javascripts/main.js
change your HTML <script> tag to load the new main.js file.
Related
I am trying to learn Node and React and I ran into an interesting problem where - in the import statement like below, I need to explicitly type the file format (.jsx) otherwise, the compiler borks up and complains that it cannot find App.js file.
import App from './App.jsx';
Note - App is a jsx file and saved as App.jsx. I used create-react-app for boilerplate code.
Also, I found some more information on GitHub on the lines of "The distinction between .js and .jsx files was useful before Babel, but it’s not that useful anymore."
https://github.com/facebook/create-react-app/issues/87
So, it looks like a non-issue as long as save it as .js and I have babel to compile ES6.. Thanks everyone!
Here your assumption is incorrect.
If I am right then you are assuming that if your file is .jsx, then you don't need to specify the file extension in the import statement to import .jsx file.
But its the other way round.
If you don't specify the extension of the file then compiler assumes that it is a .js file. So, there is nothing wrong with the behavior that you are seeing.
OR
If you don't want to include extensions in the import statement then just create .js files. Compiler will automatically detect the jsx written inside it. This is the easiest way to fool import statement.
Any javascript react snippets will not show up in a plain .js file only a .jsx file
I suggest that closing the running project on Browser
(ctrl + c / command + c on terminal to finish running project) and do
'yarn start' or 'npm start' again. then it would work!
React sometimes shows errors when you add new files like jsx, js, etc..
and I also had the same problem with you.
(I changed App.js to App.jsx and webppack error was occured).
In these case re-starting project would be the solution!
finally you don't need to specify file extension (like the other answers suggestion).
This might be a stupid question, or the answer is so obvious that I just couldn't find it.
Basically I want to use Redux in my very simple web app. I wanna be able to include redux like this :
<script type="text/javascript" src="js/redux.js"></script>
And just use it directly in my code like this :
var store = redux.createStore(...);
I tried webpack and browserify but I couldn't make it work. Any ideas ?
To import Redux via a <script> tag you have to use the UMD builds.
According to the docs, they are present on the dist/ folder.
I got Redux working with their pre-built UMD files.
But to use other NPM modules directly in the browser here's what to to (I don't know if this is the correct method but it worked for me) :
1- Create a simple file main.js with :
window.Redux = require('redux');
2- Install browserify globally :
npm install -g browserify
3- Browserify the file from the command line (no config files) :
browserify main.js -o redux.js
Now just include redux.js as a <script> tag
If you want to include the package directly on the browser for a smaller use case you could use unpkg.com which is a fast prepackage list of everything available on NPM (per the claim on their website)
Now that CoffeeScript supports the new Source Map hotness, I was wondering if I can also use the source maps not just in my browser, but on the command line while developing my nodeJS apps.
I want the JS compiler to give me more useful error traces where the lines actually match with my coffeescript files instead of compiled JS files.
The source-map-support module does this, just install the module and put this at the top of your code:
require('source-map-support').install()
Now with CoffeeScript 1.6.2 it just "works" if you run your app with the coffee command :)
Until coffee-script gets some better support for require(), try this:
https://npmjs.org/package/coffee-script-mapped
So I am experimenting with nodejs, and have chosen frappe as a skeleton for learning (as I already use coffeescript on the frontend blah blah blah). Anyway I am just getting started and have encountered a problem, so noobish, I can't find an answer on google. The picture above should say it all.
What is wrong with my path to /config/globals ? I have tried:
./config/globals
/config/globals
globals
To no avail. What am I missing here?
path should be ./globals since you require a file from the same directory.
../config/globals would also work.
A require value with no path information looks for a module loaded by npm either locally inside node_modules, or in the global npm location.
I did require('jsdom') in node js but i constantly get jsdom module not found.
More over i want to generate a svg document using highcharts on the server so that i can later on use that image in my pdf( I will convert that svg to image using batik).
Is there a link that may help me with this.
I have read through the http://blog.davidpadbury.com/2010/10/03/using-nodejs-to-render-js-charts-on-server/
but the prototype didnt make much sense. Is there a module which has been implemented rather than just a prototype.
You need to install all the required modules first. First download the tar file from his github https://github.com/davidpadbury/node-highcharts. Go to the directory where you saved the file and hit
npm install davidpadbury-node-highcharts-576f763.tar.gz
if you need to install additional modules like jsdom, try
npm install jsdom
His prototype seem to work fine with older version of highchart. but i am having some problem using it with latest highchart.
I hope this helped