Question

所以我一直在网上搜索试图找到解决这个问题的方法，但我找不到一个有效的解决方案。我目前正在使用最新版本的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，或者我在try周围放置require('remodal')块，我最终会使用Uncaught TypeError: $(...).remodal is not a function。我猜测，因为模块remodal需要jQuery并且它没有加载到那里，它没有看到它被设置到窗口，这就是执行失败的原因？

Answer 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

使用Browserify

1 个答案: