<script src="https://www.jb51.net/jquery.js"></script> <script src="https://www.jb51.net/jquery.plugin.js"></script> <script> // Now the jQuery plugin is available. </script>
很多jQuery插件是这样做的：默认window.jQuery存在，然后取这个全局变量，把自己添加到jQuery中。显然，这在Browserify的组织方式里是没法用的。
为了让这样的“不兼容Browserify”（其实是不兼容CommonJS）的JavaScript模块（如插件）也能为Browserify所用，于是有了browserify-shim。
下面，以jQuery插件jquery.pep.js为例，请看browserify-shim的使用方法。
使用示例
安装browserify-shim：
npm install browserify-shim --save-dev
然后在package.json中做如下配置：
"browserify": { "transform": [ "browserify-shim" ] }, "browser": { "jquery.pep" : "./vendor/jquery.pep.js" }, "browserify-shim": { "jquery.pep" : { "depends": ["jquery:jQuery"] } }
最后是.js中的代码：
var $ = require("jquery"); require("jquery.pep"); $(".move-box").pep();
完成！到此，经过Browserify编译后，将可以正常运行这个jQuery插件。
这是一个怎样的过程呢？
在本例中，jQuery使用的是npm里的，而jquery.pep.js使用的是一个自己下载的文件（它与很多jQuery插件一样，还没有发布到npm）。查看jquery.pep.js源码，注意到它用了这样的包装：
;(function ( $, window, undefined ) { // ... }(jQuery, window));
可以看出，它默认当前环境中已存在一个变量jQuery（如果不存在，则报错）。package.json中的"depends": ["jquery:jQuery"]是为它添加依赖声明，前一个jquery表示require("jquery")，后一个jQuery则表示将其命名为jQuery（赋值语句）。这样，插件代码运行的时候就可以正常找到jQuery变量，然后将它自己添加到jQuery中。
实际上，browserify-shim的配置并不容易。针对代码包装（尽管都不兼容CommonJS，但也存在多种情况）及使用场景的不同，browserify-shim有不同的解决方案，本文在此只介绍到这。
关于配置的更多说明，请参照browserify-shim官方文档。更多参考可以查看browserify shim recipes。此外，如果你觉得browserify-shim有些难以理解或者对它的原理也有兴趣，。
当然，对于已经处理了CommonJS兼容的库或插件（比如已经发布到npm），browserify-shim是不需要的。
其实还有的更多transform
在前面browserify-shim的例子中，"browserify": {"transform": [ "browserify-shim" ]}其实是Browserify的配置。可以看出，browserify-shim只是Browserify的其中一种transform。在它之外，还有很多的transform可用，分别应对不同的需求，使Browserify的体系更为完善。
比如，还记得本文引言里的Bower吗？debowerify可以让通过Bower安装的包也可以用require()引用。npm和bower同为包管理工具，Browserify表示你们都是我的翅膀。
一点提示
Browserify是静态分析编译工具，因此不支持动态require()。例如，下面这样是不可以的：
var lang = "zh_cn"; var i18n = require("./" + lang);
文档资料
有关Browserify更详细的说明文档，请看browserify-handbook。
结语
我觉得Browserify很有趣，它用了这样一个名字，让你觉得它好像只是一个Node的浏览器端转化工具。为此，它还完成了Node中大部分核心库的浏览器端实现。但实际上，它走到了更远的地方，并在JavaScript模块化开发这个重要的领域中，创立了一个全新的体系。
喜欢CommonJS的简洁风格？请尝试Browserify！
您可能感兴趣的文章: