javascript - 如何将 Browserify 与外部依赖项一起使用？

Question

我正在尝试慢慢将 Browserify 引入我的网站，但我不想重写所有的 js，也不希望 jquery 和其他库的重复实例与我的 Browserify 构建捆绑在一起。

如果我构建我的模块，将 jquery 列为外部依赖项，那么我如何将它指向我的全局 jquery 实例？此外，目标是消除 mylibs 全局(下面的示例)，因此我不想在我的模块中使用它。

这就是我正在尝试做的(伪代码)。这将在我网站的仓库中——而不是模块的仓库中。该模块将与 Bower 一起安装:

var mylibs.jQuery = $.noConflict(); // global used by lots of existing code
module.exports = {
    jquery: mylibs.jQuery // can be imported by my module as require('jquery')
};

我正在努力实现类似的目标。这可能吗？

Answer 1

您可以通过使用 browserify-shim 来实现.假设您有一个名为 mymodule.js 的模块，它在全局范围内依赖于 jQuery，其内容如下:

var $ = require('jQuery');

console.log(typeof $);

1. 安装 browserify-shim:

   npm install browserify-shim --save-dev
   

2. 在 package.json 文件中，告诉 browserify 使用 browserify-shim 作为转换:

   {
       "browserify": {
           "transform": [ "browserify-shim" ]
       }
   }
   

3. 在 package.json 文件中，告诉 browserify-shim 将 jQuery 映射到全局范围内的 jQuery:

   {
       "browserify-shim": {
           "jQuery": "global:jQuery"
       }
   }
   

4. 运行 browserify

   browserify mymodule.js > bundle.js
   

如果您检查 bundle.js，您会注意到 require('jQuery') 被替换为 (window.jQuery)。