在前端开发过程中，经常需要使用第三方 JavaScript 模块。这些模块使用 CommonJS 规范编写，但是浏览器不支持，需要使用打包工具将模块打包成浏览器可用的 JavaScript 文件。这个时候，Browserify 就是一个很好的选择。
但是有些时候，我们需要使用一些不符合 CommonJS 规范的模块，Browserify 就无法识别这些模块。这个时候，我们需要使用 @leichtgewicht/browserify-shim 这个 npm 包。它可以帮助我们将这些不符合 CommonJS 规范的模块打包进我们的 JavaScript 文件。
安装
使用 npm 命令进行全局安装：
--- ------- -- ---------- ------------------------------
使用
基本用法
首先，先创建一个 JavaScript 文件 index.js，用于打包我们的代码。在代码中输入以下内容：
--- --- - --------------- -------------------
其中，foo 就是我们要 shim 的模块，它不符合 CommonJS 规范。
接着，在命令行中输入以下命令：
---------- -- - ------------------------------ -------- - -------- -- ---------
以上命令中，-p 参数表示使用插件，@leichtgewicht/browserify-shim 就是这个插件的名称，--global 参数表示使用全局变量，这样 shim 后的模块就可以在全局环境中使用了。index.js 是我们要打包的文件，bundle.js 则是打包后存放的文件。
现在，我们就可以在一个 HTML 文件中引入这个 bundle.js 文件，最终的效果就是控制台输出了 Hello, world!。
配置
在上面的例子中，我们使用了一些默认配置。但是在实际项目中，我们可能需要自定义配置来满足项目的需求。下面我们来看一下如何配置。
在 package.json 文件中，我们可以添加以下内容：
-
------------------ -
--------- -----
------- -
------ -
---------- -----
-
-
-
-其中，"global": true 参数表示使用全局变量，"shim" 则是用来定义需要 shim 的模块以及它们的别名和导出对象。
在 JavaScript 文件中，我们可以将 require('foo') 更正为 require('Foo')，这样就可以使用我们定义的导出对象了。
在命令行中输入以下命令：
---------- -- -------------------------------- -------- -- ---------
以上命令中，-t 参数表示使用 transform，-p 参数的替代方案。index.js 是我们要打包的文件，bundle.js 则是打包后存放的文件。
示范代码
首先，安装依赖：
--- ------- -- ---------- ------------------------------
创建 index.js 文件：
--- --- - --------------- --- --- - ----------------- ----------------- - -------
在 package.json 文件中添加：
-
------------------ -
--------- -----
------- -
------ -
---------- -----
-
-
--
------------- -
------------ -
--------------------------------
-
-
-创建 Bar.js 文件：
-------------- - ---------- - ------ ------ --
在命令行中输入以下命令：
---------- -- -------------------------------- -------- -- ---------
在页面中引入 bundle.js 文件，打开开发者工具，查看控制台，输出结果为 Hello, world!bar。
总结
在前端开发中，使用第三方 JavaScript 模块是非常普遍的。Browserify 可以帮助我们将这些模块打包成浏览器可用的 JavaScript 文件。但是有些不符合 CommonJS 规范的模块就无法识别，这个时候，@leichtgewicht/browserify-shim 就成为了必备的插件。
本文详细介绍了 npm 包 @leichtgewicht
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005525f81e8991b448cfe2d