在前端开发中，我们经常需要在浏览器端使用 CommonJS 模块化的方式来组织和管理代码。而 browserify 就是一个能够将 Node.js 的模块化方式运用于浏览器端的工具。而 browserify-sa 就是一个更为方便的使用 browserify 的解决方案。这篇文章将会教你如何使用 browserify-sa 这个 npm 包，并向你展示它的深度和学习以及指导意义。
安装
你可以在你的项目里使用 npm 安装 browserify-sa：
npm install browserify-sa --save-dev
使用方法
首先需要在项目中创建一个 src 目录，用来放置你的源代码文件。然后在命令行中运行 browserify-sa 命令，将 src 目录下的代码编译成一个浏览器可用的 JavaScript 文件，存储在 dist/bundle.js 文件中。
# 向浏览器发布代码 browserify-sa src/index.js -o dist/bundle.js
以上命令中，src/index.js 就是你的源代码文件。如果你有更多代码需要编译到同一个 JavaScript 文件中，可以使用多个参数来打包到一个文件中。
# 向浏览器发布多个代码文件 browserify-sa src/index1.js src/index2.js src/index3.js -o dist/bundle.js
上述命令中，src/index1.js、src/index2.js 和 src/index3.js 都会被编译成一个文件 dist/bundle.js。
你也可以使用 --watch 参数，实时监控代码变化并自动重新打包。
# 监控代码变化并自动重新打包 browserify-sa src/index.js -o dist/bundle.js --watch
实例
我们看一个具体的实例，使用 jquery 和 underscore 这两个 npm 包。
首先需要安装这两个 npm 包：
npm install jquery underscore --save-dev
然后创建 src/index.js 文件，这个文件为我们的源代码。
-- -------------------- ---- ------- --- - - ------------------ --- - - ---------------------- --- --- - --- -- -- -- --- --- --- - --- -- -- -- -- --- ---------------------- --------------- - ------ ----- - -- ---- ----------------------- ------ ------------ - -------------------------- -------------- ---
接着可以使用 browserify-sa 命令来打包我们的代码。
browserify-sa src/index.js -o dist/bundle.js
以上命令会将 src/index.js 文件中的代码打包成一个浏览器可用的 JavaScript 文件，并存储在 dist/bundle.js 文件中。我们可以在浏览器中引入这个文件，验证代码是否正常运行。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------------- ------------ ------- ------ ------- ------------------------------ ------- -------
打开这个 HTML 文件，你会看到浏览器中已经输出了 Hello, World!，同时控制台中也输出了 [2, 4, 6, 8, 10] 和 { b: 2 }。
结论
通过本文的学习，你已经掌握了使用 browserify-sa 将 Node.js 的模块化方式运用于浏览器端的方法，以及如何通过 npm 包管理工具来使用它。同时我们也实现了一个简单的实例来验证代码运行结果。笔者认为，这个 npm 包是解决前端项目中 CommonJS 模块化的最佳方式之一，值得我们在项目开发中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a581e8991b448dfe0b