Question

我正在将Gulp与Browserify配合使用。

我想按一定顺序调用我的脚本：jQuery，jQuery-easing，Bootstrap，[other libs]，然后是我自己的脚本。

这显然不起作用：

main.js

const $ = require("jquery");
require("bootstrap");
// require other libs
require("./scripts.js");

scripts.js

$(function () {
    // code that won't work
    // because $ is not defined
});

但如果我这样做：

main.js

require("jquery");
require("bootstrap");
// require other libs
require("./scripts.js");

scripts.js

const $ = require("jquery");
$(function () {
    // code that will work
    // because $ is now defined
});

它可以工作，但是我想知道它是否能很好地捆绑我的脚本，是否需要2次jQuery是件好事……

还有更好的方法吗？

Answer 1

这实际上是Browserify（以及其他模块打包器，例如Webpack，Rollup和Parcel）设计工作的方式！每个模块都应导入 all 它需要运行的其他模块。

了解原因的最好方法是对JavaScript模块捆绑器的工作原理有所了解。

当Browserify解析您的main.js文件时，它将require("...")函数调用识别为该模块的依赖项。例如，main.js取决于jquery，bootstrap和./scripts.js。它开始在内存中建立图形，以便知道哪些文件链接到哪个文件。

./main.js --> jquery
     |
     + -----> bootstrap
     |
     + -----> ./scripts.js

然后关闭，解析每个依赖项并将它们添加到图中。

./main.js --> jquery <----- +
     |                      |
     + -----> bootstrap     |
     |                      |
     + -----> ./scripts.js -+

每次找到新的依赖项时，都会将其添加到图形中并进行解析，以查看依赖项依赖的模块。

如果您的模块之一需要一个已经添加到图中的模块（例如./scripts.js取决于jquery），则捆绑程序无需再次将其添加到图中，只是创建另一个连接。

最终它将收集您需要的所有模块，并且可以将每个模块添加到捆绑软件中，然后再将其写入磁盘。

在整个代码库中需要多少次jQuery无关紧要，它只会被添加到依赖关系图一次，这意味着最好两次要求，因为它不会改变捆绑软件的大小。 / p>

随着程序的变大，依赖关系图也会变大，最终您将遇到复杂的模块关系，如下图所示。

Answer 2

在全球范围内，效果更好：

global.jQuery = global.$ = require("jquery");