防止将 jQuery 捆绑为 Browserify 的依赖项答案

【问题标题】：Prevent bundling jQuery as a dependency with Browserify防止将 jQuery 捆绑为 Browserify 的依赖项
【发布时间】：2017-05-14 05:49:04
【问题描述】：

所以我一直在互联网上搜索，试图找到解决这个问题的方法，但我找不到有效的解决方案。我目前正在使用最新版本的 Gulp 和 Browserify 为我正在开发的网站捆绑 JS。之前我们会将所有 JS 文件连接在一起，但我现在正在转向模块设置。

我遇到的问题是复制某些依赖项，在这个例子中，我将专注于 jQuery (v2.1.4)。这是我的设置：

main.js（在每个页面上加载）

window.jQuery = window.$ = require('jquery');
window.Vue = require('vue');    
require('jquery-validation');

// More JS that loads on all pages

page.js（每个页面都有自己的 js 文件，用于与该页面相关的脚本）

require('remodal'); // This requires jQuery

// Rest of the JS for this page...

我遇到的问题是现在 jQuery 在两个 javascript 包中。使用 Browserify，我将 jQuery 标记为 page-speicific.js 的“外部”，它从脚本中删除了 jQuery，但我收到错误 Uncaught Error: Cannot find module 'jquery'，我似乎找不到解决方案。

如果我用 Browserify “排除” jQuery，或者如果我在 require('remodal') 周围放置一个 try 块，我最终会得到 Uncaught TypeError: $(...).remodal is not a function。我猜是因为模块 remodal 需要 jQuery 并且它没有在那里加载，它没有看到它被设置为窗口，这就是执行失败的原因？

【问题讨论】：

stackoverflow.com/questions/32746512/…
排除或外部出现相同的错误：未捕获的错误：找不到模块“jquery”。如果我使用忽略，我会收到 $.map 不是函数的错误，因此它不会将 $ 解释为 jQuery。

标签： javascript jquery node.js gulp browserify

【解决方案1】：

嗯，找到了我的问题的答案。想一想我只需要休息一晚，就能更清晰地思考以寻找答案。

我在某个时候检查了browserify-shim（和browserify-global-shim），但发现它只会填充顶级依赖项。如果 jQuery 是依赖项的依赖项，这将不起作用。好吧，一旦我找到下面链接的答案，我发现有一个未记录的（至少，我从未找到它）{ global: true }，您可以设置让 shim 传播到所有依赖项。

var b = browserify();
var globalShim = require('browserify-global-shim').configure({
    'jquery': '$'
});
b.transform({ global: true }, globalShim);

运行 gulp 后，我所有的页面特定脚本现在都将 jQuery 引用为窗口变量。

!(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['jquery'], function($) {
      return factory(root, $);
    });
  } else if (typeof exports === 'object') {
    factory(root, (window.$)); // <----------------- :D
  } else {
    factory(root, root.jQuery || root.Zepto);
  }
})(this, function(global, $) {

来源：Shimming dependencies of dependencies with browserify-shim

【讨论】：