什么是 Broccoli-jstransform?
Broccoli-jstransform 是一个 JavaScript 文件转换工具，它提供了一种将源码转换成目标代码的框架，可以帮助我们处理 JavaScript、TypeScript、JSX 等代码的转换工作。它是一个基于 Broccoli 的 npm 包，Broccoli 是一个构建前端工程的工具，可以将源代码转化成一个稳定、可用的产品。
Broccoli-jstransform 支持多种转换策略。其中包括了将 ES6 代码转换为 ES5 代码，将 TypeScript 转换为 JavaScript 代码等等。同时也扩充了 JSTransform，支持 JSX 代码转换等语言。
如何使用 Broccoli-jstransform?
首先，确保已经安装了 Node.js 和 npm 包管理器。在命令行界面输入以下命令进行安装：
npm install -g broccoli-cli npm install broccoli-jstransform --save-dev
在当前工程的根目录下面，创建一个名为 Brocfile.js 的文件。这个文件为 Broccoli 的配置文件，可以定义 Broccoli 的构建方式。代码如下：
-- -------------------- ---- ------- --- --------- - ------------------------------------ --- ---------- - -------------------------------- --- ----------- - -------------------------------- -- ------ --- -------- - ------ -- ---- --- -------- - ------------------------------- - ------- ---- ------ ------------- -------- --- --- - ---------- ----------- --- -- ------------- -------------- - --------------------- -----------
上面的代码片段中，我们首先引用了 Broccoli 的几个 npm 包，包括 static-compiler、merge-trees 和 jstransform。
然后，我们定义了 Brocfile.js 的根节点 src_tree，即源文件夹路径。接下来，我们使用 jstransform 插件对 src_tree 的所有 jsx 文件进行处理。
最后，我们将转换后的 jsx 文件 merge 到普通的源代码当中。
在完成 Brocfile.js 的定义之后，我们可以在命令行界面输入：
broccoli build dist
此时，Broccoli-jstransform 就会去查找 Brocfile.js，根据其配置构建出 dist 目录。这个目录就是转换后的代码的目标文件夹。
示例代码
下面是一个简单的 React.js 组件的代码，使用了 JSX 语法：
-- -------------------- ---- -------
--- ----- - -----------------
--- ---------- - -------------------
------- ---------- -
------ --------- -----------
-
---
-------------- - -----------在使用 Broccoli-jstransform 对其进行转换之前，这个代码无法被浏览器正常解析。我们可以根据上述的配置文件，使用 Broccoli-jstransform 对其进行转换。转换后的代码如下：
-- -------------------- ---- -------
--- ----- - -----------------
--- ---------- - -------------------
------- ---------- -
------ ------------------------- ----- ------ --------
-
---
-------------- - -----------可以看到，原本的 JSX 语法被转换成了基于 React.createElement的 JavaScript 代码。这样，我们就可以将原本的代码成功地构建成可以在浏览器上正常运行的 JavaScript 代码了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c87ccdc64669dde5013