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

我试图慢慢地将Browserify引入到我的网站，但我不想重写所有的js，我不想重复实例的jQuery和其他库与我的Browserify构build捆绑。

如果我build立我的模块列表jquery作为外部依赖，然后如何将它指向我的全局jQuery实例？ 另外的目标是消除全球的mylib（下面的例子），所以我不想在我的模块中使用它。

这就是我想要做的（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')被replace为(window.jQuery) 。

Answer 2

Browserify-shim不是跨节点模块传递的：它可以用来正确地在顶层（在你自己的package.json中）模块中填充，但是它不能在其他npm包（用它们自己的package.json文件）中填充模块。

在处理依赖于jQuery模块的节点模块时（例如，具有对等依赖的插件），这很尴尬，但jQuery库仍然应该是外部的。

我的解决scheme – 在概念上类似于伪代码 – 是在browserify本身的帮助下创build一个自定义的“预载荷垫片”。

1. 从bundle.js的生成中排除jquery模块，但通常情况下会生成该包。

   安装适当的node / npm模块以满足构build要求。 待排除的“外部”模块将不会被包含在软件包中，但是需要执行编译依赖性parsing。

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

2. 创build一个名为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文件中定义的模块（之前）并运行自定义代码。 在这种情况下，这是通过以前定义的全球pipe道。

   或者：什么browserify-shim“全球：”试图做，只有实际..全球。

---

直接使用browserify模块 – 而不是咕噜咕噜地重新生长 – 可能导致了一个“更精炼”的解决scheme。