How to bundle multiple javascript libraries with browserify?
I\'m trying to use Browerifiy in the browser, if I use the standalone option it exposes one module. I don\'t want to do this. The website and documentation just seems to cut
-
You have two choices here. Either you
SOLUTION 1
Create a standalone browserify module for each library you want to access in your browser. This has been answered in your other post. Basically you do multiple browserify bundles.
.
browserify library1.js --standalone Library1 -o library1-bundle.js browserify library2.js --standalone Library2 -o library2-bundle.js browserify library3.js --standalone Library3 -o library3-bundle.jsSo, in your building tool you would have
browserify: { library1 : { src: [ '<%= yeoman.server %>/shared-components/library1.js' ], dest: '<%= yeoman.client %>/app/js/library1-bundled.js', bundleOptions : { standalone : 'Library1' } }, library2 : { src: [ '<%= yeoman.server %>/shared-components/library2.js' ], dest: '<%= yeoman.client %>/app/js/library2-bundled.js', bundleOptions : { standalone : 'Library2' } }, library3 : { src: [ '<%= yeoman.server %>/shared-components/library3.js' ], dest: '<%= yeoman.client %>/app/js/library3-bundled.js', bundleOptions : { standalone : 'Library3' } } }
SOLUTION 2
Or, create a main entry point for all your modules.
// ---- main.js ----- module.exports.Library1 = require('./lib1'); module.exports.Library2 = require('./lib2'); module.exports.Library3 = require('./lib3');Then, you use browserify
browserify main.js --standalone Library -o bundle.jsThen in your browser
In your grunt task :
browserify: { standalone: { src: [ '<%= yeoman.server %>/shared-components/main.js' ], dest: '<%= yeoman.client %>/app/js/main-bundled.js', bundleOptions : { standalone : 'Library' } }}
Note on Module Loaders and Browserify
Then, to expand on the answer I made on your previous post, browserify exposes it's bundled modules differently depending on the module manager present in your environment.
- If you are in node, it's commonJS (sync) so you can use require('');
- If you are using AMD (async), you can use that AMD syntax.
- If you are in the browser, you muse use either window. or global.
Grunt dynamic task definition
To automate this a little, you can also pass in a configuration :
bundledLibraries : [ Library1 : { src : './../src/lib1.js', dest : './../src/lib1-bundled.js' }, Library2 ... ]Then you iterate to add them to the grunt config (
Check this article for creating them dynamically http://www.integralist.co.uk/posts/dynamic-grunt-tasks.html
加载中...
- 热议问题