Broccoli是构建前端项目时的一种工具，而broccoli-system-builder则是基于broccoli的简化版，它的出现不仅使得项目的构建更为高效便捷，同时也让编写构建脚本的复杂度降低。在本文中，我们将详细介绍npm包broccoli-system-builder的使用教程，并且提供一些深入的学习指导及示例代码。
什么是broccoli-system-builder？
Broccoli-system-builder是一个运行在Node.js平台上的构建工具，它可以协调处理器和过滤器，最终生成我们需要的构建产物。它鲜明的特点是：任何一个构建操作，都会在文件系统树上进行，也就是说，它极大地避免了像Grunt、Gulp等构建工具常常需要的gulp.src、gulp.dest等操作，因而构建速度提升了不少。
同时，大量的Broccoli插件为我们提供了足够的能力去集成编译器（如babel）或其他处理器，以及清除、压缩等流行的过滤器（如autoprefixer、clean-css等）。通过Broccoli的这些机制，开发者几乎可以用任何流程/工具来完成对应的构建过程。因此，Broccoli-system-builder是构建前端开发项目的优秀选择。
安装broccoli-system-builder
安装broccoli-system-builder需要在Node.js的基础上进行，因此需要首先安装node.js。在node.js安装完成后，我们可以通过以下命令安装broccoli-system-builder：
$ npm install broccoli-system-builder --save-dev
现在，让我们开始使用broccoli-system-builder。
使用broccoli-system-builder
CLI && API
根据我们的习惯，我们可以使用broccoli-system-builder作为CLI或API执行。Broccoli CLI工具是一个统一的接口，集成所有Broccoli 开发所需的构建操作，我们只需要在命令行中键入正确的指令，即可开始执行。在某些情况下，还可以在外部系统中使用broccoli-system-builder。
构建Hello World
首先，让我们从一个简单的“Hello World”示例开始。我们假设我们想要把src文件夹中的JavaScript文件编译成ES5规范，最后输出到位于dist文件夹中的app.min.js文件中。那么，下面的代码可以做到这一点：
-- -------------------- ---- ------- -- --------------- --- -------- - -------------------- --- ------ - --------------------------- --- ----- - ------------------------------------- -- --------- --- ------- - --- ------------- - -------- ------------ -------- --------------- --- -- ----------------------- --- ------------------- - --- -------------- - ---------------- ---- --- -- --------------- --- ---------- - ------------------------------------------- -- --------------------------- -------------- - -----------
启动项目，输入下面的命令行：
$ broccoli build dist
命令解释如下：
broccoli：Broccoli CLI 工具的命令前缀。build：指定命令类型。在此例中，build是唯一的一个命令。其他命令还包括:serve和watchdist：必填参数，表示对应的输出文件夹。这里我们想把输出文件放到dist文件夹中。
如果之前没有出现错误，那么此时应该可以在dist文件夹中看到生成的app.min.js文件。如有其他自定义需求，我们可以在brocfile.js文件中自定义编译、过滤操作，来满足特定的需求。
如何增加插件
不同的开发需求需要不同的插件，因此在编写brocfile.js时，除了broccoli的核心组件外，我们还需要引入一些自己需要的插件。
例如，我们在上面写的例子中，需要用到Babel插件将JavaScript代码进行转义。那么，下面的代码段很好地介绍了如何安装并使用Babel插件：
$ npm install --save-dev broccoli-babel-transpiler
然后，在brocfile.js中引入Babel：
var Babel = require('broccoli-babel-transpiler');Babel的官方文档提供了一些可供参考的配置，它们可以在Babelflow的官方页面上找到。
离线应用？
Broccoli-system-builder还支持一些离线话应用的使用场景，即没有互联网接入的应用场景。它能够让开发者在没有互联网的情况下编写专业级JavaScript应用。使用离线应用需要在已上线项目中使用。
首先，我们需要在Broccoli文件系统的输出文件夹中创建一个carton文件夹。结构如下：
dist/
carton/
package.json
base64
app.min.js然后，在运行broccoli build之前，我们需要使用下面的命令，生成离线应用所需的文件：
$ npm install -g broccoli-carton-index $ broccoli-carton-index dist
在执行这些命令后，项目的所有依赖关系将被捆绑在一起，以便可以运行一个单独的可执行文件。然后，将位于carton文件夹中的所有文件（就像在上面的文件夹结构中所描述的那样）安装到您的应用程序中即可。这种离线块称为打包，可在离线应用中使用。
结论
Broccoli-system-builder是一个非常优秀的前端构建工具，它完美地解决了现代web应用中、大量的、杂乱无章的构建工具的麻烦。我们可以通过在brocfile.js中使用不同的插件、操作等，来满足自己在编写web应用时的不同需求。希望本文介绍的这些内容能够加深您对Broccoli-system-builder的理解，以便您能够更好地在实践中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde5156