在前端开发过程中,经常需要使用第三方 JavaScript 模块。这些模块使用 CommonJS 规范编写,但是浏览器不支持,需要使用打包工具将模块打包成浏览器可用的 JavaScript 文件。这个时候,Browserify 就是一个很好的选择。
但是有些时候,我们需要使用一些不符合 CommonJS 规范的模块,Browserify 就无法识别这些模块。这个时候,我们需要使用 @leichtgewicht/browserify-shim 这个 npm 包。它可以帮助我们将这些不符合 CommonJS 规范的模块打包进我们的 JavaScript 文件。
安装
使用 npm 命令进行全局安装:
npm install -g browserify @leichtgewicht/browserify-shim
使用
基本用法
首先,先创建一个 JavaScript 文件 index.js
,用于打包我们的代码。在代码中输入以下内容:
var foo = require('foo'); console.log(foo());
其中,foo
就是我们要 shim 的模块,它不符合 CommonJS 规范。
接着,在命令行中输入以下命令:
browserify -p [ @leichtgewicht/browserify-shim --global ] index.js -o bundle.js
以上命令中,-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')
,这样就可以使用我们定义的导出对象了。
在命令行中输入以下命令:
browserify -t [@leichtgewicht/browserify-shim] index.js -o bundle.js
以上命令中,-t
参数表示使用 transform,-p
参数的替代方案。index.js
是我们要打包的文件,bundle.js
则是打包后存放的文件。
示范代码
首先,安装依赖:
npm install -g browserify @leichtgewicht/browserify-shim
创建 index.js
文件:
var Foo = require('Foo'); var Bar = require('./Bar'); console.log(Foo() + Bar());
在 package.json
文件中添加:
-- -------------------- ---- ------- - ------------------ - --------- ----- ------- - ------ - ---------- ----- - - -- ------------- - ------------ - -------------------------------- - - -
创建 Bar.js
文件:
module.exports = function() { return 'bar'; };
在命令行中输入以下命令:
browserify -t [@leichtgewicht/browserify-shim] index.js -o bundle.js
在页面中引入 bundle.js
文件,打开开发者工具,查看控制台,输出结果为 Hello, world!bar
。
总结
在前端开发中,使用第三方 JavaScript 模块是非常普遍的。Browserify 可以帮助我们将这些模块打包成浏览器可用的 JavaScript 文件。但是有些不符合 CommonJS 规范的模块就无法识别,这个时候,@leichtgewicht/browserify-shim 就成为了必备的插件。
本文详细介绍了 npm 包 @leichtgewicht
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005525f81e8991b448cfe2d