简介
Broccoli-fast-browserify 是一个便捷的构建打包工具，使用它可以轻松进行前端 JavaScript 的编译和打包，它的编译速度也非常快。
本文将介绍如何使用 Broccoli-fast-browserify 进行前端项目的构建和打包。
安装
在使用 Broccoli-fast-browserify 之前，首先需要在本地安装 Node.js 和 npm。
安装完成 Node.js 和 npm 之后，就可以通过命令行工具安装 Broccoli-fast-browserify 了。在命令行中输入以下命令：
npm install broccoli-fast-browserify --save-dev
安装完成之后，在项目的 package.json 文件中可以看到 broccoli-fast-browserify 的安装信息。
配置
在使用 Broccoli-fast-browserify 之前，还需要配置构建过程的一些参数，例如源代码目录的位置、输出目录、是否需要调试模式等。
在项目根目录下新建文件 Brocfile.js，并添加以下内容：
-- -------------------- ---- -------
--- -------------- - ------------------------------------
-- ----------
--- --------- - ------
-- ------
--- ---------- - -------
-------------- - ------------------------- -
-- --------
----------- -
------ ----
--
-- -----
----------- -----------
---这里的例子中，输入的源代码目录采用了相对路径 src，输出目录采用了相对路径 dist。注意，这里的输入目录和 Brocfile.js 文件在同一级目录下。
使用
在完成配置之后，就可以使用 Broccoli-fast-browserify 进行构建和打包了。
在命令行中输入以下命令：
broccoli build outputDirectory
其中，outputDirectory 是指定的输出目录，即上一步配置中的 dist。执行该命令之后，Broccoli-fast-browserify 就会开始编译和打包源代码了。
示例代码
假设在 src 目录下有一个 main.js 文件和一个 utils.js 文件，文件内容如下：
src/main.js
var utils = require('./utils');
console.log(utils.add(1, 2));src/utils.js
module.exports = {
add: function(num1, num2) {
return num1 + num2;
}
};然后在 Brocfile.js 中的配置中，将 outputFile 配置为 bundle.js。
在命令行中输入以下命令：
broccoli build dist
执行完成之后，会在 dist 目录下生成一个 bundle.js 文件。文件内容如下：
dist/bundle.js
-- -------------------- ---- -------
-------- ------------------ - -- ----------------
-------- -- ------- ---- ---- --
-------- --
--------------------------------------------------------------------------
-------- --
-- - --
----- ----------------- -------- -------------------- -
--- ----- - -----------------------
------------------------ ----
---
----- ---
----- ----------------- -------- -
-------------- - -
---- -------------- ----- -
------ ---- - -----
-
--
---
----- -
-------- ---可以看到，Broccoli-fast-browserify 将 main.js 和 utils.js 文件编译打包成了一个 bundle.js 文件。在 bundle.js 文件中可以看到，utils.js 中的代码已经被正确地引入了 main.js 文件中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c86ccdc64669dde4f98