如何捆绑多个JavaScript库与browserify? [英] How to bundle multiple javascript libraries with browserify?
问题描述
我试图在浏览器中使用Browerifiy,如果我使用独立选项,它会公开一个模块。我不想这样做。
实际编译代码后,网站和文档似乎在我看来无处不在的地方切断了。
没有人说过如何实际使用浏览器属性中的代码。
我有这样一个咕task任务:
browserify:{
standalone:{
src:['<%= yeoman.server%> / shared-components / ** / *。js'],
dest:'<%= yeoman.client%> /app/js/browserifed-shared-code.js',
/ *注释掉,零个文档。似乎只能暴露一个模块。
options:{
browserifyOptions:{
standalone:'Utility'//无法说'** / *'错误: - /
}
}
* /
},
这似乎起作用,它会生成这样的文件:
(函数e(t,n,r){函数s(o,u){if(!n [o如果(!u&& a)返回一个(o,!0); if(i)返回i(o,!0); var f = new Error(Can not find module'+ o +'); throw f.code =MODULE_NOT_FOUND,f} var l = n [o] = {exports: {}}; t [o] [0] .call(l.exports,function(e){var n = t [o] [1] [e]; return s(n?n:e)}, (var o = 0; o< r.length;);} return n [o] .exports} var i = typeof require ==function&& require;函数(require,module,exports){
'use strict';
var UrlController = function( ){};
UrlController.test = function(){
return'test';
};
module.exports = UrlController;
},{}],2:[function(require,module,exports){
'use strict';
var Utility = function(){};
Utility.isASCII = function(str){
return /^[\x00-\xFF]*$/.test(str);
};
Utility.isAlphaNumeric = function(str){
var code,i,len;
for(i = 0,len = str.length; i code = str.charCodeAt(i); (代码> 47&& code< 58)&& amp; // numeric(0-9)
!(code> 64&& code& (AZ)
!(代码> 96&& code< 123)){//较低的alpha(az)
返回false;
}
}
返回true;
};
module.exports = Utility;
},{}]},{},[1,2]);
我自动使用一个注入器将其自动包含在内:
< script src =app / js / browserifed-shared-code.js>< / script>
现在我预计可以打电话给
require('Utility');
但是我得到
Uncaught ReferenceError:require没有定义(...)
我不知道/没有办法在浏览器中加载这些模块。 :' - /
这里有两个选择。您可以为您的浏览器访问每个库创建一个独立的browserify模块。 这已在您的其他帖子中得到解答。基本上你做了多个browserify包。
。
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.js
< script src =library1-bundle.jstype =text / javascript/>
< script src =library2-bundle.jstype =text / javascript/>
< script src =library3-bundle.jstype =text / javascript/>
因此,在您的建筑工具中,您将拥有
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'}
}
}
解决方案2
或,为所有模块创建一个主入口点。
// ---- main.js -----
module.exports.Library1 = require('./ lib1');
module.exports.Library2 = require('./ lib2');
module.exports.Library3 = require('./ lib3');
然后,您使用browserify
browserify main.js --standalone库-o bundle.js
然后在您的浏览器中
< script src =bundle.jstype =text / javascript/>
在您的咕噜任务中:
browserify:{
standalone:{
src:['<%= yeoman.server%> /shared-components/main.js'],
dest:'<%= yeoman.client%> /app/js/main-bundled.js',
bundleOptions:{standalone:'Library'}
}}
关于模块加载器和Browserify的注意事项
然后,为了扩展您在上一篇文章中所做的答案,browserify根据您环境中存在的模块管理器以不同方式公开了捆绑模块。
- 如果你在节点中,它是commonJS(同步),所以你可以使用require('');
- 如果您使用AMD(异步),则可以使用该AMD语法。
- 如果您在浏览器中,则可以使用任一窗口。或$全球。
$ hr
$ bGrunt动态任务定义
为了实现这一点,您可以传递一个配置:
bundledLibraries:[
Library1:{
src:'./../src/lib1.js',
dest:'./../src/lib1-bundled.js'
},
Library2 ...
]
然后迭代将它们添加到grunt config(
)
查看本文以便动态创建它们 http://www.integralist.co.uk/posts/dynamic-grunt-tasks.html
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 off everywhere I look after actually compiling the code. No one has said how to actually use the code in the browser property.
I have a grunt task as such:
browserify: { standalone: { src: [ '<%= yeoman.server %>/shared-components/**/*.js' ], dest: '<%= yeoman.client %>/app/js/browserifed-shared-code.js', /* Commented out, zero documentation on this. Can only expose one module it seems. options: { browserifyOptions: { standalone: 'Utility' //Unable to say '**/*' error :-/ } } */ },
This seems to work, it makes a file like this:
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ 'use strict'; var UrlController = function(){}; UrlController.test = function () { return 'test'; }; module.exports = UrlController; },{}],2:[function(require,module,exports){ 'use strict'; var Utility = function(){}; Utility.isASCII = function (str) { return /^[\x00-\xFF]*$/.test(str); }; Utility.isAlphaNumeric = function(str) { var code, i, len; for (i = 0, len = str.length; i < len; i++) { code = str.charCodeAt(i); if (!(code > 47 && code < 58) && // numeric (0-9) !(code > 64 && code < 91) && // upper alpha (A-Z) !(code > 96 && code < 123)) { // lower alpha (a-z) return false; } } return true; }; module.exports = Utility; },{}]},{},[1,2]);
I include it automatically using an injector which works simular to:
<script src="app/js/browserifed-shared-code.js"></script>
Now i expect that I'd be able to call
require('Utility');
But I get
Uncaught ReferenceError: require is not defined(…)
I have no idea/no way of loading these modules in the browser. :'-/
解决方案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.js <script src="library1-bundle.js" type="text/javascript"/> <script src="library2-bundle.js" type="text/javascript"/> <script src="library3-bundle.js" type="text/javascript"/>
So, 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.js
Then in your browser
<script src="bundle.js" type="text/javascript"/>
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
这篇关于如何捆绑多个JavaScript库与browserify?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!