I have two front-end application on Angular. And I made some common library for them. Before I used git submodules, but I want to move to npm. I rewritten that library as node package, and installing it with npm from github repo.
Then I want to pipe it through browserify and integrate with the rest of my Angular code. I am able to require('MyUtils'), but then I don't know how to get file of that module to pass to browserify. Is there some property like __file__ in python? Or is browserify able to take module instead of filename?
If your apps call require('MyUtils'), Browserify will automatically include the contents of the MyUtils package (and all of its dependencies) in the bundle it outputs.
And another solution to get filename of module, in case someone will look is to use the require.resolve() function. Node documentation on modules
Related
I am working on a markdown converter application, and using an NPM package showdown. In my app.js file I have a
var showdown = require('showdown');
which is properly being added.
In my front end I require a script.js which needs to use this. However, it doesn't recognize the showdown variable. The code works perfectly if I use the showdown cdn above where I include my script.js. How do I make it so that my NPM modules can be used across a project?
Here's your answer. I have forked your git repo and made changes.
When I build a node add-on by creating a standard binding.gyp and running node-gyp build, the addon.node library is created in the subdirectory build/{Release|Debug}/. When I write tests or other javascript code to use this module, I have to give explicit path to the library location
For example,
var addon = require('./build/Release/addon')
However, I would like to do this by only specifying the module name and let node's module search for the library
var addon = require('addon')
How can that be achieved?
I believe the only way to do this is setting require() and having the module in the node_modules folder or having the module in a node_modules folder in one of the parent directories.
Node uses the require() method with no path defined as an indicator to look for the module in the node_modules directory. Unless its an native module.
Its detailed in the docs here.
There's a module for that if you're okay with another dependency.
https://www.npmjs.com/package/bindings
That will search all of the possible build output locations automatically, including debug and release directories.
is there a way I can use an npm package on the client side? For example, I want to use the dateformat(https://www.npmjs.com/package/dateformat) package in my client side javascript file
If you want to use npm on the client you may consider using browserify which is designed for that purpose. The node module system is not compatible with browsers so browserify transpiles the javascript into something that will work. Hence the name : browserify.
I found it wasn't enough to use Browserify. There were still issues with the client-side not finding the variables/functions from the library.
Here are the steps that worked for me:
Install Browserify:
npm install -g browserify
Install a library from npm (I'll use leader-line as an example):
npm i leader-line
You will now have all the npm files needed inside the node_modules directory:
Now we can run the usual Browserify command to bundle the JS file from the npm package:
browserify node_modules/leader-line/leader-line.min.js -o bundle.js
This will produce a bundle.js file outside of node_modules:
This is the file we can bring into the front-end, as we would with a usual JS library.
So, assuming I added my bundle.js file to a libs folder, and renamed bundle.js to leaderline.js, I can simply add the usual line in the header of my index.html file:
<script src="libs/leaderline.js" type="module"></script>
Notice the addition of type="module" to the script tag.
However, this is STILL not enough. The final step is to open the JS file for the library (in my case leaderline.js) and find the main function that needs to be exported (usually somewhere near the top):
var LeaderLine=function(){"use strict";var te,g,y,S,_,o,t,h,f,p,a,i,l,v="leader-line"
I need LeaderLine to be available inside my scripts. To make this possible, we simply remove var and add window. in front of the function name, like this:
window.LeaderLine=function(){"use strict";var te,g,y,S,_,o,t,h,f,p,a,i,l,v="leader-line"
Now I can use the library client-side without any problems:
HTML:
<div id="start">start</div>
<div id="end">end</div>
JS
new LeaderLine(
document.getElementById('start'),
document.getElementById('end')
);
Some will argue that exposing the function to the window is too "global" for best practices. But the other option is to use module bundlers, which handle the exposing of packages, and this is overkill for many applications, especially if you're trying to whip together a quick front-end to try something out.
I find it odd that so many now publish packages in npm, that are obviously intended for the front-end (e.g. obviously nobody would use leaderline.js in back-end node, yet this is where the package was published, with no available CDN).
Given how tortuous it is to expose front-end functionality from an npm package, one can argue that today's JS ecosystem is a mess.
Most of the packages on NPM are designed for server side and won't work on the client side because of security reasons. You could use NW.js, but the user would have to install your software on there computer.
"NW.js (previously known as node-webkit) lets you call all Node.js modules directly from DOM and enables a new way of writing applications with all Web technologies."
http://nwjs.io/
I need to put this node.js module into Alloy project. It's a Facebook SDK node module.
I put the install command, and a node_module folder appear into my project folder, but I can't use it.
Where have I to put this node_module folder? Why the requires into facebook.js are not founded by the compiler?
Please, can anyone help me?
Titanium is not a pure NodeJS environment. When you use require('test') in a Titanium Alloy project, it will look for a file named test.js in the directory <Your project>/app/lib/.
Titanium can't handle a require on a directory with a package.json.
So if you want a pure NodeJS module, you'll have to put every files needed in the <Your project>/app/lib/ directory.
But keep in mind that you can't use a NodeJS module which depends on NodeJS API like requests, because there's no such things in Titanium (you have to Ti.HttpClient instead).
I've installed backbone via npm, it is placed in node_modules folder (not in web root) how can i include it in my index.html file?
It's possible to write front-end code entirely based on CommonJS (i.e. Node-style) modules.
If you install front-end dependencies through npm you can use a package bundling tool like Browserify to bundle all dependencies into one file. This way you can use the browser-dependent packages in the same way you use server-side packages: with Node's require function. You just require a module (either in node_modules dir or a regular file) and work with it.
Base use of browserify is really simple: Just do browserify clientcode.js > webroot/clientbundle.js, where webroot is your web root. Then include clientbundle.js in your html file.
clientcode.js should be the client's "main" script, comparable to the "app.js" (or similar) of an Express app or so. It can be as big as you want, but you could just as well use it only as bootstrap code to run functions defined in other CommonJS modules.
Note that you can easily mix browserified dependencies with regular dependencies. Any scripts that you include beforehand (say a non-browserified jquery) will just become a global, and browserify does not prevent you from accessing globals.
Beware though: Some packages distributed via npm based on client-side libraries do not conform (entirely) to CommonJS spec. Some may not export anything, some may (unexpectedly) create globals, etc.
See also Backbone app with CommonJS and Browserify .
Some alternatives to browserify:
https://github.com/michaelficarra/commonjs-everywhere
https://github.com/medikoo/modules-webmake
https://github.com/webpack/webpack
I haven't tried them though.
While the idea of using npm for both backend and frontend may sound tempting–it certainly did to me–try Bower or Ender.js instead for frontend dependencies. I personally prefer bower, because I can more easily include it into my requireJS module structure. It will keep you from foaming at the mouth with frustration.
Front-end dependency I would recommend using Bower. There are many components available for you to use and they are really easy to setup.