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

Question

我正在尝试慢慢地将Browserify引入我的网站,但我不想重写所有的js,我不希望重复的jquery实例和我的Browserify构建捆绑的其他库.

如果我构建我的模块列出jquery作为外部依赖项,我如何将它指向我的全局jquery实例？另外目标是消除mylibs全局(例如下面的例子),所以我不想在我的模块中使用它.

这就是我想要做的事情(psudo-code).这将是我网站的回购 - 而不是模块的回购.该模块将与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).

Answer 2

Browserify-shim不能跨节点模块传递:它可用于正确填充顶级(在您自己的package.json中)模块,但它不能在其他npm包中使用自己的package.json文件来填充模块.

当处理依赖于jQuery模块的节点模块(例如,具有对等依赖性的插件)时,这很尴尬,但jQuery库应该仍然是外部的.

我的解决方案 - 在概念上与伪代码类似 - 是在browserify本身的帮助下创建自定义的"预加载垫片".

1. jquery从生成中排除模块bundle.js,但以其他方式正常构建软件包.

   安装适当的node/npm模块以满足构建要求.要排除的"外部"模块将不包含在捆绑包中,但需要满足编译依赖性解析.

   browserify -x jquery .. > dist/bundle.js
   

2. 创建一个名为jquery.js的文件并包含以下内容:

   module.exports = window.jQuery; // or whatever
   

3. 生成shim.js包括刚刚上一个文件.

   browserify -r jquery.js > dist/shim.js
   

   然后编辑该文件以使用jQuery作为模块名称.

4. 在浏览器中,加载jquery(外部依赖项),shim.js然后bundle.js.

   当bundle文件试图加载jquery模块时 - 它没有定义 - 它将回退到shim文件中定义的模块(先前)并运行自定义代码.在这种情况下,通过先前定义的全局管道.

   或者:browserify-shim"global:"尝试做什么,实际上只是..全局.

直接使用browserify模块 - 而不是我正在重新成长为厌恶的grunt - 可能导致了"更精致"的解决方案.