如何将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') }; 

类似的东西就是我想要实现的。 这可能吗?

你可以通过使用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)

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。