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 $);

安装browserify-shim：
```
npm install browserify-shim --save-dev
```
在package.json文件中，告诉browserify使用browserify-shim作为转换：
```
{
    "browserify": {
        "transform": [ "browserify-shim" ]
    }
}
```
在package.json文件中，告诉browserify-shim将jQuery映射到全局范围内的jQuery：
```
{
    "browserify-shim": {
        "jQuery": "global:jQuery"
    }
}
```
运行browserify
```
browserify mymodule.js > bundle.js
```

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

Answer 2

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

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

我的解决方案 - 在概念上与伪代码类似 - 是在browserify本身的帮助下创建自定义＆＃39; preload shim＆＃39;

从jquery生成中排除bundle.js模块，但否则会正常构建捆绑包。

安装适当的node / npm模块以满足构建要求。被排除在外的＆＃34;外部＆＃34;模块将不包含在捆绑包中，但需要满足编译依赖性解析。
```
browserify -x jquery .. > dist/bundle.js
```
创建一个名为jquery.js的文件并包含以下内容：
```
module.exports = window.jQuery; // or whatever
```
生成一个shim.js，其中包含上一个文件。
```
browserify -r jquery.js > dist/shim.js
```
然后编辑文件以使用jQuery作为模块名称。
在浏览器中，加载jquery（外部依赖项），shim.js，然后加载bundle.js。

当捆绑文件尝试加载jquery模块时 - 它没有定义 - 它将回退到shim文件中定义的模块（先前）并运行自定义代码。在这种情况下，管道通过先前定义的全局。

或者：什么是browserify-shim＆＃34; global：＆＃34;尝试做，实际上只是..全球。

直接使用browserify模块 - 而不是我正在重新厌恶的grunt - 可能会导致更加精致的模式。溶液

Answer 3

这可以使用1缸套完成：

echo "module.exports=window.jQuery" > node_modules/jquery.js

为每个外部依赖项在构建脚本中添加1行。无需将任何特殊选项传递给Browserify。

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

3 个答案: