浏览器化外部与排除有什么区别



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

我应该使用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

来浏览代码并查找任何require语句,然后告诉 module-deps 在哪里可以找到所需的模块。

如果文件在捆绑包中

,则只需在捆绑包的模块映射中为其提供密钥。

如果您说该文件是external的,浏览器会假设您的意思是它包含在另一个捆绑包中,因此提供了文件的路径,假设该 id 将从另一个捆绑包解析。为了能够做到这一点,还涉及一些额外的簿记。

如果您exclude该文件,则 browserify 将为模块 deps 提供undefined,当您尝试使用需要该文件的捆绑包时,肯定会发生火灾。但是,这种方法缺乏跟踪文件路径的开销(这实际上可以忽略不计(,并且在爆炸之前不会"浪费时间"查找其他捆绑包。

一些例子:我摆弄了node-browserify/example/api来生成一些捆绑包,下面的示例是来自各种测试的模块映射,为了可读性,有些格式。

香草 - 在浏览器存储库中按原样运行:

{
    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(主.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(主要.js(取决于./foo 哪个在1

1 (foo.js( 取决于哪些应该在其他捆绑包中标记/browser/bar.js ./bar

标记为要排除的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(主要.js(取决于./foo 哪个1

1(foo.js(取决于ZOMFG的./bar!我不知道它在哪里。YRU 要求??!1!

删除了排除/外部调用,并从foo.js中删除了./bar的要求:

{
    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(主.js(取决于./foo 哪个1

1(foo.js(没有依赖关系,世界是桃色的。我想知道他们是否通过其他方式加载了bar

@Will回答的第一部分也很重要:

对于您的用例,您可能不需要jQuery,因此使用哪个并不重要。

我认为OP的例子令人困惑,询问排除和外部之间的区别。如果代码中从未要求((-edjQuery,那么就不会提出任何问题:它永远不会被browserify解析,无论如何都必须通过其他方式加载。

只是想指出这一点,因为我也发现这令人困惑。

最新更新