简介
abrowserify 是一个非常方便的工具，它可以将你的 JavaScript 代码打包成一个浏览器可以直接使用的 JavaScript 文件。它支持 CommonJS 和 AMD 规范，可以帮助您管理代码之间的依赖关系，并且支持浏览器缓存。
在这篇文章里，我们将会看到如何使用 abrowserify，它的基本使用方法，以及一些高级用法。
基本使用方法
安装 abrowserify：
npm install -g abrowserify
在终端中运行以下命令将您的 JavaScript 代码打包成浏览器可用的文件：
abrowserify main.js -o bundle.js
其中，main.js 是您的项目入口文件，bundle.js是您要打包的 JavaScript 文件。
然后，在您的 HTML 文件中引用 bundle.js 文件即可：
<script src="bundle.js"></script>
从这里开始，您就可以开始使用打包后的 JavaScript 文件了！
深度使用方法
CommonJS 模块
abrowserify 支持 CommonJS 模块规范，可以很好地管理代码之间的依赖关系。例如，在您的 JavaScript 代码中，您可以这样引用其他模块：
var myModule = require('./myModule.js');这将会将 myModule.js 文件的 exports 对象赋值给 myModule 变量。
AMD 模块
除了 CommonJS 模块规范之外，abrowserify 还支持 AMD 模块规范。您可以这样来使用 AMD 模块规范：
define(['myModule'], function(myModule) {
// 在这里使用 myModule
});使用 babel 转码
如果您的项目使用了 ES6/7 语法，您可以使用 babel 转码器来将您的代码转换成浏览器可用的 JavaScript 代码。在这里我们使用 babelify，它可以让 abrowserify 使用 babel 进行转码：
npm install babelify --save-dev
运行以下命令：
abrowserify main.js -o bundle.js -t [ babelify --presets [ es2015 ] ]
这将会使用 babel 将您的 ES6 代码编译成 ES5 代码，并将代码打包成一个使用 Browserify 的 JavaScript 代码。
使用 UglifyJS 压缩代码
如果您想要将您的代码压缩成体积更小的代码，您可以使用 uglify-js 进行压缩：
npm install uglify-js --save-dev
然后，在终端中输入以下命令：
abrowserify main.js -o bundle.js -t [ babelify --presets [ es2015 ] ] | uglifyjs > bundle.min.js
这将会使用 babel 进行转码，并且使用 UglifyJS 压缩代码。最后，您会得到一个名为 bundle.min.js 的文件。
使用 Sourcemaps
如果您想要调试您的代码，您可以使用 Sourcemaps。
首先，您需要在 abrowserify 中启用 sourcemaps：
abrowserify main.js -o bundle.js -d
这将会在您的打包后的代码中添加 sourcemap。
然后，您可以在 Chrome 的开发者工具中找到 sourcemap 文件：
这样，您就可以使用 Chrome 的开发者工具进行调试了。
总结
abrowserify 是一个非常方便的 JavaScript 代码打包工具，它可以帮助您管理代码之间的依赖关系，并且支持 CommonJS 和 AMD 模块规范。如果您的项目使用了 ES6/7 语法，您可以使用 babel 来将您的代码转换成浏览器可用的 JavaScript 代码。如果您想要将您的代码压缩成可视化更小的代码，您可以使用 UglifyJS。如果您想要调试您的代码，您可以使用 Sourcemaps。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67979