仅调用一次'require（“ jquery”）'一次

Question

我正在将Gulp与Browserify（newbie）一起使用。

我想按一定顺序调用我的脚本：jQuery，jQuery-easing，Boostrap，[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
});

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

还有更好的方法吗？

Answer 1

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

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

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

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

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

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

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

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

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

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

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