如何捆绑多个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> 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.jsThen 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屋！
