只调用一次 'require("jquery")'

Question

我正在使用 Gulp 和 Browserify。

我想按特定顺序调用我的脚本：jQuery、jQuery-easing、Bootstrap、[其他库]，然后是我自己的脚本。

这显然行不通：

ma​​in.js

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

scripts.js

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

---

但如果我这样做：

ma​​in.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）设计的工作方式！每个模块都应该导入所有它需要运行的其他模块。

了解原因的最佳方法是了解 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，它只会被添加到依赖关系图中一次，这意味着两次都可以，因为它不会改变包的大小。

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

Answer 2

它甚至更适合全局范围：

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