node.js - browserify external 与 exclude 有什么区别？

Question

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

我应该使用 bundle.exclude('jquery') 还是 bundle.external('jquery')？有什么区别？他们的输出似乎相同，我不清楚文档:

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

Prevent file from being loaded into the current bundle, instead referencing from another bundle.

If file is an array, each item in file will be externalized.

If file is another bundle, that bundle's contents will be read and excluded from the current bundle as the bundle in file gets bundled.

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

Prevent the module name or file at file from showing up in the output bundle.

If your code tries to require() that file it will throw unless you've provided another mechanism for loading it.

Answer 1

答案:

你应该使用exclude。

解释:

这两个函数都阻止文件包含在包中。对于您的用例，您可能不会使用 require jQuery，因此使用哪个并不重要。然而，事情是这样的:

浏览器使用 module-deps探索您的代码并找到任何 require 语句，然后告诉 module-deps 在哪里可以找到所需的模块。

如果文件在包中，它只需要在包的模块映射中为其提供 key 。

如果您说文件是 external，则 browserify 会假定您的意思是它包含在另一个包中，因此会提供文件的路径，假设该文件作为 id 将从另一个包中解析。为了能够做到这一点，需要进行一些额外的簿记。

如果你 exclude 文件，那么 browserify 会向 module-deps 提供 undefined 并且当你尝试使用需要该文件的包时肯定会发生火灾.但是，这种方法缺少跟踪文件路径的开销(这实际上可以忽略不计)，并且不会在爆炸之前“浪费时间”查看其他包。

一些例子: 我摆弄了 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) 依赖于 ZOMFG 的 ./bar!我不知道它在哪里。你需要？？!1!

去掉了exclude/external调用，去掉了foo.js中./bar的require:

{
    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