如何使用 browserify 捆绑多个 javascript 库?
How to bundle multiple javascript libraries with browserify?
我正在尝试在浏览器中使用 Browerifiy,如果我使用独立选项,它会公开一个模块。我不想这样做。
在实际编译代码后,网站和文档似乎在我查看的所有地方都被切断了。
没有人说过如何在浏览器中实际使用代码 属性。
我有这样一个繁重的任务:
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 :-/
}
}
*/
},
这似乎有效,它生成了一个这样的文件:
(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]);
我使用与以下类似的注入器自动包含它:
<script src="app/js/browserifed-shared-code.js"></script>
现在我希望我能打电话给
require('Utility');
但是我明白了
Uncaught ReferenceError: require is not defined(…)
我无法 idea/no 在浏览器中加载这些模块。 :'-/
这里有两个选择。要么你
解决方案 1
为您要在浏览器中访问的每个库创建一个独立的 browserify 模块。这已在您的其他 post 中得到解答。基本上你做了多个 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.js" type="text/javascript"/>
<script src="library2-bundle.js" type="text/javascript"/>
<script src="library3-bundle.js" type="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 Library -o bundle.js
然后在您的浏览器中
<script src="bundle.js" type="text/javascript"/>
在你的 grunt 任务中:
browserify: {
standalone: {
src: [ '<%= yeoman.server %>/shared-components/main.js' ],
dest: '<%= yeoman.client %>/app/js/main-bundled.js',
bundleOptions : { standalone : 'Library' }
}}
关于模块加载器和 Browserify 的注意事项
然后,为了扩展我在您之前的 post 上所做的回答,browserify 根据您环境中存在的模块管理器以不同方式公开它的捆绑模块。
- 如果你在 node 中,它是 commonJS(同步)所以你可以使用 require('');
- 如果您使用的是 AMD(异步),则可以使用该 AMD 语法。
- 如果您在浏览器中,您可以使用 window。或全球。
Grunt 动态任务定义
要稍微自动化一点,您还可以传入一个配置:
bundledLibraries : [
Library1 : {
src : './../src/lib1.js',
dest : './../src/lib1-bundled.js'
},
Library2 ...
]
然后迭代将它们添加到 grunt 配置中 (
查看这篇动态创建它们的文章http://www.integralist.co.uk/posts/dynamic-grunt-tasks.html
我以自己的方式完成了这项工作,没有过多地混淆项目的依赖性。
在 grunt 我有
browserify: {
standalone: {
src: [ '<%= yeoman.server %>/shared-components/exposed-modules.js' ],
dest: '<%= yeoman.client %>/app/js/browserifed-shared-code.js',
options: {
browserifyOptions: {
standalone: 'Shared'
}
}
},
}
//In-completed example.
watch: {
scripts: {
files: ['<%= yeoman.server %>/shared-components/**/*.js'],
tasks: ['browserify'],
options: {
spawn: false
}
},
然后我暴露了我要使用的模块:
'use strict';
//This is the main entry point for all shared libraries.
var Utility = require('./utility');
var UrlController = require('./url-controller');
var Shared = function(){};
//Added new client modules to be exposed here.
Shared.Utility = Utility;
Shared.UrlController = UrlController;
module.exports = Shared;
我现在可以在浏览器中调用
shared.Utility.isAscii('test'); //Working.
在任何我想重用的地方,我只是在范围内分配,所以
//Some scope.
var Utility = shared.Utility;
我正在尝试在浏览器中使用 Browerifiy,如果我使用独立选项,它会公开一个模块。我不想这样做。 在实际编译代码后,网站和文档似乎在我查看的所有地方都被切断了。 没有人说过如何在浏览器中实际使用代码 属性。
我有这样一个繁重的任务:
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 :-/
}
}
*/
},
这似乎有效,它生成了一个这样的文件:
(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]);
我使用与以下类似的注入器自动包含它:
<script src="app/js/browserifed-shared-code.js"></script>
现在我希望我能打电话给
require('Utility');
但是我明白了
Uncaught ReferenceError: require is not defined(…)
我无法 idea/no 在浏览器中加载这些模块。 :'-/
这里有两个选择。要么你
解决方案 1
为您要在浏览器中访问的每个库创建一个独立的 browserify 模块。这已在您的其他 post 中得到解答。基本上你做了多个 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.js" type="text/javascript"/>
<script src="library2-bundle.js" type="text/javascript"/>
<script src="library3-bundle.js" type="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 Library -o bundle.js
然后在您的浏览器中
<script src="bundle.js" type="text/javascript"/>
在你的 grunt 任务中:
browserify: {
standalone: {
src: [ '<%= yeoman.server %>/shared-components/main.js' ],
dest: '<%= yeoman.client %>/app/js/main-bundled.js',
bundleOptions : { standalone : 'Library' }
}}
关于模块加载器和 Browserify 的注意事项
然后,为了扩展我在您之前的 post 上所做的回答,browserify 根据您环境中存在的模块管理器以不同方式公开它的捆绑模块。
- 如果你在 node 中,它是 commonJS(同步)所以你可以使用 require('');
- 如果您使用的是 AMD(异步),则可以使用该 AMD 语法。
- 如果您在浏览器中,您可以使用 window。或全球。
Grunt 动态任务定义
要稍微自动化一点,您还可以传入一个配置:
bundledLibraries : [
Library1 : {
src : './../src/lib1.js',
dest : './../src/lib1-bundled.js'
},
Library2 ...
]
然后迭代将它们添加到 grunt 配置中 (
查看这篇动态创建它们的文章http://www.integralist.co.uk/posts/dynamic-grunt-tasks.html
我以自己的方式完成了这项工作,没有过多地混淆项目的依赖性。
在 grunt 我有
browserify: {
standalone: {
src: [ '<%= yeoman.server %>/shared-components/exposed-modules.js' ],
dest: '<%= yeoman.client %>/app/js/browserifed-shared-code.js',
options: {
browserifyOptions: {
standalone: 'Shared'
}
}
},
}
//In-completed example.
watch: {
scripts: {
files: ['<%= yeoman.server %>/shared-components/**/*.js'],
tasks: ['browserify'],
options: {
spawn: false
}
},
然后我暴露了我要使用的模块:
'use strict';
//This is the main entry point for all shared libraries.
var Utility = require('./utility');
var UrlController = require('./url-controller');
var Shared = function(){};
//Added new client modules to be exposed here.
Shared.Utility = Utility;
Shared.UrlController = UrlController;
module.exports = Shared;
我现在可以在浏览器中调用
shared.Utility.isAscii('test'); //Working.
在任何我想重用的地方,我只是在范围内分配,所以
//Some scope.
var Utility = shared.Utility;