在前端开发中，使用类库和插件是很常见的。而做为一个模块化的工具，Browserify 允许我们使用 npm 包并将其打包到浏览器端使用。但是，有时候一些插件并没有按照 CommonJS 模块规范来编写，导致在使用时会出现问题。这个时候，我们可以通过使用 Browserify 的 Shim 配置来解决这个问题。本文将介绍如何在 Browserify 中使用常见的 jQuery 插件。
什么是 Shim？
Shim 是指一个兼容层，用于解决不同平台之间可能存在的差异性问题。在 JavaScript 中，Shim 主要用于填补一些平台或者库缺失的功能或者特性，从而使得代码能够在其他环境中运行。在 Browserify 中，Shim 用于让未被设计为 CommonJS 模块的库也能够在 Browserify 中使用，并且正确地处理依赖关系。
如何使用 Shim？
在 Browserify 中，我们可以通过 browserify-shim 插件来配置 Shim。
安装 browserify-shim 插件：
npm install --save-dev browserify-shim
然后，在项目的 package.json 文件中加入下面的配置：
-- -------------------- ---- -------
-
------------- -
------------ -
-----------------
-
--
------------------ -
--------- ---
-
-上面的配置中，我们指定了 jquery 库的名字和暴露的全局变量 $。
在代码中使用 jQuery 插件之前，需要先安装插件：
npm install --save jquery-plugin
然后，在代码中引入插件，并且使用 Shim 配置来处理依赖关系：
var $ = require('jquery');
require('jquery-plugin'); // 这里没有指定变量名，因为插件可能不是一个 CommonJS 模块
$('.selector').pluginName();上面的代码中，jquery-plugin 并没有按照 CommonJS 规范编写，所以在引入时需要使用 Shim 配置来处理依赖关系。通过上述配置，Browserify 将会把 jquery-plugin 打包成一个 CommonJS 模块，并且导出到全局变量 $ 中。
总结
Shim 是解决平台或者库差异性问题的一种方案，在 Browserify 中，我们可以通过 browserify-shim 插件来实现对于未被设计为 CommonJS 模块的库的使用。对于常见的 jQuery 插件来说，只需要在项目的 package.json 文件中加入相应的配置即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24772