在前端开发中，构建工具是必不可少的，可是选择一款合适自己的构建工具确实是一件困难的事情。对于那些使用 SystemJS 模块加载器实现文件依赖管理的开发人员来说，很难寻找到一款支持使用 SystemJS 的构建工具。
broccoli-systemjs-builder 就是一款支持 SystemJS 模块加载器的构建工具，通过它你能够构建出一个使用 SystemJS 加载器的可执行文件。本文将为你详细介绍如何使用 broccoli-systemjs-builder 进行构建。
安装
在使用 broccoli-systemjs-builder 之前，你必须先安装好 Broccoli 和 Node.js。然后通过以下命令安装 broccoli-systemjs-builder：
npm install --save-dev broccoli-systemjs-builder
安装 broccoli-systemjs-builder 依赖的同时，你也应该安装一下 broccoli-funnel， broccoli-merge-trees 以及 broccoli-static-compiler：
npm install --save-dev broccoli-funnel broccoli-merge-trees broccoli-static-compiler
使用
broccoli-systemjs-builder 的使用非常简单，只需要三个步骤即可。我们使用一个示例来阐述如何使用 broccoli-systemjs-builder 进行构建。
首先，在你电脑上新建一个目录，名字为 example，并在该目录下新建两个文件：app.js 和 index.html。其中 app.js 代码如下：
import greeter from './greeter.js';
document.querySelector('#root').appendChild(greeter());greeter.js 的代码如下：
export default function() {
const div = document.createElement('div');
div.innerHTML = 'Hello World!';
return div;
}然后，我们需要配置 SystemJS 的配置文件 config.js，它需要放在 example 目录下作为静态资源。config.js 的配置如下：
-- -------------------- ---- -------
---------------
------ -
------- -------------------------------
--
---- -
---- ---------
------------ --------------------------------------------------------
------ -----------------------------------------------
--
----- -
-------------------------------------------------------- -
------- ---------
-------- -----------
-------- -
------ -------
-
--
------------------------------------------------ -
------- ---------
-------- -------
-
--
--------- -
---- -
------- ------
----------------- ----
-
-
---最后，我们需要编写 Brocfile.js 文件来进行构建。在 example 目录下新建一个 Brocfile.js 文件，其内容如下：
-- -------------------- ---- -------
----- ------ - ---------------------------
----- ---------- - --------------------------------
----- --------------- - -------------------------------------
----- -------------- - ------------------------------------
----- ------------- - ----------------- -
------ ---------------
---
----- ------- - ----------------- -
------ ---------- -------------
---
----- ------------- - --------------------- -
---------- -----
---
----- ---- - --- ------------------------------ -
------------- ------------
--------------- -----------
-------------------- ------
------------ -
----------- -----
--
---
----- ------------- - ----------------- ----------------
-------------- - --------------完成上述操作之后，在 example 文件夹下运行以下命令：
broccoli serve
控制台输出以下信息：
serving on http://localhost:4200/
此时在浏览器中访问 http://localhost:4200/ 即可看到输出结果。
指导意义
broccoli-systemjs-builder 是一款轻量级的构建工具，支持 SystemJS 加载器，可以直接在 Brocfile.js 文件中使用 SystemJS 配置构建。
它适合那些项目使用 SystemJS 模块加载器的开发者使用，可以满足复杂项目的构建需求。使用 broccoli-systemjs-builder 可以大大提高项目构建的效率。
结语
本文为你介绍了如何使用 broccoli-systemjs-builder 进行构建，希望对你有所帮助。broccoli-systemjs-builder 可以为你的构建工具选择提供一个新的思路，同时也可以帮助你更加专注于前端开发本身。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde5197