简介
Broccoli-fast-browserify 是一个便捷的构建打包工具，使用它可以轻松进行前端 JavaScript 的编译和打包，它的编译速度也非常快。
本文将介绍如何使用 Broccoli-fast-browserify 进行前端项目的构建和打包。
安装
在使用 Broccoli-fast-browserify 之前，首先需要在本地安装 Node.js 和 npm。
安装完成 Node.js 和 npm 之后，就可以通过命令行工具安装 Broccoli-fast-browserify 了。在命令行中输入以下命令：
--- ------- ------------------------ ----------
安装完成之后，在项目的 package.json 文件中可以看到 broccoli-fast-browserify 的安装信息。
配置
在使用 Broccoli-fast-browserify 之前，还需要配置构建过程的一些参数，例如源代码目录的位置、输出目录、是否需要调试模式等。
在项目根目录下新建文件 Brocfile.js，并添加以下内容：
--- -------------- - ------------------------------------
-- ----------
--- --------- - ------
-- ------
--- ---------- - -------
-------------- - ------------------------- -
-- --------
----------- -
------ ----
--
-- -----
----------- -----------
---这里的例子中，输入的源代码目录采用了相对路径 src，输出目录采用了相对路径 dist。注意，这里的输入目录和 Brocfile.js 文件在同一级目录下。
使用
在完成配置之后，就可以使用 Broccoli-fast-browserify 进行构建和打包了。
在命令行中输入以下命令：
-------- ----- ---------------
其中，outputDirectory 是指定的输出目录，即上一步配置中的 dist。执行该命令之后，Broccoli-fast-browserify 就会开始编译和打包源代码了。
示例代码
假设在 src 目录下有一个 main.js 文件和一个 utils.js 文件，文件内容如下：
src/main.js
--- ----- - ------------------- ------------------------ ----
src/utils.js
-------------- - -
---- -------------- ----- -
------ ---- - -----
-
--然后在 Brocfile.js 中的配置中，将 outputFile 配置为 bundle.js。
在命令行中输入以下命令：
-------- ----- ----
执行完成之后，会在 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