browserify外部与排除有什么区别?
我正在使用browserify
并试图让它跳过浪费时间,包括或parsingjQuery和其他require
通过CDN加载的文件。
我应该使用bundle.exclude('jquery')
还是bundle.external('jquery')
? 有什么不同? 他们的输出似乎是相同的,而且我不清楚文档:
-
b.external
: https : //github.com/substack/node-browserify#bexternalfile
防止文件被加载到当前包中,而是从另一个包中引用。
如果文件是一个数组,文件中的每个项目都将被外化。
如果文件是另一个捆绑包,则捆绑文件中的捆绑包将读取该捆绑包的内容并从当前捆绑包中排除该内容。
-
b.exclude
: https : //github.com/substack/node-browserify#bexcludefile
防止文件中的模块名称或文件出现在输出包中。
如果你的代码试图要求()该文件,它会抛出,除非你提供了另一种机制来加载它。
回答:
你应该使用exclude
。
说明:
这两个函数都会阻止文件被包含在软件包中。 对于你的用例,你可能require
jQuery,所以你使用的并不重要。 但是,这是怎么回事:
browserify使用module-deps来探索你的代码并find任何require
语句,然后告诉module-deps在哪里find所需的模块。
如果文件在包中,只需要在包的模块映射中提供它的密钥。
如果你说这个文件是external
,那么browserify会假设你的意思是它包含在另一个bundle中,因此假定这个文件的id是从另一个bundle中parsing出来的。 还有一点额外的簿记能够做到这一点。
如果你exclude
了这个文件,那么browserify将会向模块提供一个undefined
,当你尝试使用需要这个文件的bundle的时候肯定会引发一场火灾。 但是,这种方法没有跟踪文件path的开销(这实际上可以忽略不计),并且在爆炸之前不会“浪费时间”查看其他包。
一些例子:我摆弄node-browserify / example / api来产生一些bundle,下面的例子是来自各种testing的模块映射,为了可读性而有些格式化。
香草 – 跑在浏览器回购:
{ 1: [function(require, module, exports) { module.exports = function(n) { return n * 3 }; }, {}], 2: [function(require, module, exports) { var bar = require('./bar'); module.exports = function(n) { return n * bar(n); }; }, { "./bar": 1 }], 3: [function(require, module, exports) { var foo = require('./foo'); console.log(foo(5)); }, { "./foo": 2 }] }
3
(main.js)依赖于./foo
,它是2
2
(foo.js)依赖于./bar
,它位于1
1
(bar.js)没有依赖关系
将api/bar.js
标记为外部:
{ 1: [function(require, module, exports) { var bar = require('./bar'); module.exports = function(n) { return n * bar(n); }; }, { "./bar": "/browser/bar.js" }], 2: [function(require, module, exports) { var foo = require('./foo'); console.log(foo(5)); }, { "./foo": 1 }] }
2
(main.js)依赖于./foo
,它是1
1
(foo.js)依赖于./bar
,在其他一些bundle中应该标记为/browser/bar.js
标记为api/bar.js
以排除:
{ 1: [function(require, module, exports) { var bar = require('./bar'); module.exports = function(n) { return n * bar(n); }; }, { "./bar": undefined }], 2: [function(require, module, exports) { var foo = require('./foo'); console.log(foo(5)); }, { "./foo": 1 }] }
2
(main.js)依赖于./foo
,它是1
1
(foo.js)取决于在./bar
上的./bar! 我不知道它在哪里。 yru要求?? 1!
删除了exclude / external调用,并从foo.js
删除了./bar
的foo.js
:
{ 1: [function(require, module, exports) { module.exports = function(n) { return n * bar(n); }; }, {}], 2: [function(require, module, exports) { var foo = require('./foo'); console.log(foo(5)); }, { "./foo": 1 }] }
2
(main.js)依赖于./foo
,它是1
1
(foo.js)没有依赖关系,世界是桃色的。 我想知道他们是否通过其他方式加载了bar
@ Will的答案的第一部分也很重要:
对于你的用例,你可能不会需要jQuery,所以你使用的并不重要
我认为OP的例子是混淆的,要问排除与外部的区别。 如果jQuery在代码中永远不需要(),那么就没有问题了:它永远不会被browserifyparsing,而必须用其他方法加载。
只是想指出,因为我发现这也令人困惑。
- 从gulp中使用browserify时如何暴露“要求”浏览器?
- 对JavaScript文件的更改不会立即生效。 gulp browserify任务可能存在问题
- browserify无法调用我捆绑的function,它没有定义
- Browserify:重写包并使用不同的主文件
- 使用Browserify / Babel / node.js你可以要求一个基于variablesstring的文件
- javascript:重构全局对象以require()模块
- 如何使用Browserify和iOS JavaScriptCore
- 用纯npm脚本创buildvendor.js包
- 使用Browserify构build脚本会创build一个空文件