前言
JavaScript 大发展下，越来越多的软件基于 JavaScript 构建。为了方便将 JS 代码打包至浏览器上，在前端开发中，我们经常会用到浏览器端的模块打包工具。其中，使用非常广泛的就是 browserify。
browserify 是一个强大的 JavaScript 模块打包工具，可以让浏览器端使用 Nodejs 风格的 require() 语句，将所有依赖的模块打包成一个 bundle.js 文件。本文着重介绍 browserify 的 npm 包 – browserify-ftw 的使用方法及注意事项。
安装
使用 npm 安装 browserify-ftw:
npm install browserify-ftw --save-dev
其中，--save-dev 用来将 browserify-ftw 安装在 devDependencies 中。
使用方法
在项目根目录下，新建一个源代码目录 src，并在其中编写打包后输出的主入口文件 main.js 和其它相关代码。
在命令行中，进入项目根目录并执行以下命令：
browserify-ftw -s myModule -e src/main.js -b debug -p bundle-collapser/plugin
其中，一些常用参数解释如下：
-s <name>(或者--standalone <name>): 生成独立的 JavaScript 包。-e <file>(或者--entry <file>): 指定一个/多个入口文件。-b <flag>(或者--debug <flag>): 将生成的包标记为调试模式，默认为 false。-p <plugin>(或者--plugin <plugin>): 加载 gulp 插件。
这些参数的用法可根据实际情况进行调整。在此以设置 -s 和 -e 参数为例：
browserify-ftw -s myModule -e src/main.js
运行以上命令后，浏览器ify-ftw 会将所有在 main.js 中声明过的 Node.js 模块打包成一个 bundle.js 文件，bundle.js 文件会在当前目录下生成。
- 在 HTML 文件中引入 bundle.js 文件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- -----------
-------
------
------- ---------------------------
-------
-------- 在网页中使用打包后的 JavaScript 代码：
var myModule = require('myModule');
// 使用 myModule 模块中的某个函数
myModule.doSomething('I am using myModule!');示例代码
我们可以将以下代码作为示例代码运行：
main.js:
var myModule = require('./myModule');
myModule.doSomething('Hello Browserify ftw!');myModule.js:
function doSomething(message) {
console.log(message);
}
exports.doSomething = doSomething;指导意义
本文介绍了使用 browserify-ftw 的基本方法，这也是打包浏览器端 JavaScript 的常用手段之一。当然，使用 browserify-ftw 还有很多其他细节方面需要注意，本文未对其进行全面深入介绍。
在实际的开发中，我们常常使用 npm 直接安装开源前端库/框架，并使用 browserify 将它们打包至浏览器端使用。随着前后端分离的不断普及，这种方式的应用依然非常广泛。对于学习前端开发的同学来说，深入学习 browserify-ftw 绝对有很大的实际指导意义和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde536d