browserify external与exclude有什么区别？

Question

我正在使用browserify并试图让它跳过浪费时间,包括或解析require我通过CDN加载的jquery和其他无文件.

我应该使用bundle.exclude('jquery')或bundle.external('jquery')？有什么不同？他们的输出似乎相同,我不清楚这些文档:

• b.external:https://github.com/substack/node-browserify#bexternalfile

防止将文件加载到当前包中,而是从另一个包中引用.

如果file是一个数组,则文件中的每个项目都将被外部化.

如果file是另一个bundle,那么当文件包捆绑在一起时,将从当前bundle读取并排除该bundle的内容.

• b.exclude:https://github.com/substack/node-browserify#bexcludefile

防止文件中的模块名称或文件显示在输出包中.

如果您的代码尝试require()该文件,它将抛出,除非您提供了另一种加载它的机制.

Answer 1

回答:

你应该用exclude.

说明:

这两个函数都阻止文件包含在包中.对于你的用例,你可能不会使用requirejQuery,所以你使用它并不重要.然而,这是正在发生的事情:

browserify使用module-deps来探索代码并查找任何require语句,然后告诉module-deps在哪里找到所需的模块.

如果文件在bundle中,它只需要在bundle的模块映射中为它提供密钥.

如果你说文件是external,浏览器假定你的意思是它包含在另一个包中,因此提供了一个文件的路径,假设它作为一个id将从另一个包中解析.为了能够做到这一点,还需要一些额外的簿记.

如果您是exclude该文件,则browserify将提供undefined给module-deps,当您尝试使用需要该文件的包时,肯定会有火.但是,这种方法缺乏跟踪文件路径的开销(实际上可以忽略不计),并且在爆炸之前不会"浪费时间"查看其他包.

一些例子: 我摆弄了node-browserify/example/api以产生一些包,下面的例子是来自各种测试的模块映射,为了便于阅读而进行了一些格式化.

Vanilla - 在browserify repo中运行:

{
    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哪些应该/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哪个是ZOMFG!我不知道它在哪里.你需要??!1!

删除了排除/外部调用,并取消了需要./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通过其他方式加载