介绍
Broccoli-react-templates 是一款基于Broccoli的 React 模板编译器，可以将 React 组件中的 template 模板文件编译成 React 的 jsx 代码。它的使用可以方便我们在开发过程中直接使用 HTML 风格的模板，而不需要手动将其转化为 jsx 代码。
安装
在安装使用之前，我们需要先检查 Node.js 和 npm 是否已经安装。如果尚未安装，可以通过以下命令来进行安装：
$ brew install node
安装完成之后，我们可以使用如下命令来进行 Broccoli-react-templates 的安装：
$ npm install --save-dev broccoli-react-templates
或者全局安装：
$ npm install -g broccoli-react-templates
使用
Broccoli-react-templates的使用相对简单，我们可以直接在 Brocfile.js 中使用相关代码进行配置。
基本代码
-- -------------------- ---- -------
--- -------------- - ------------------------------------
--- -------- - ------------ -- ------
--- ------ - ----- -- ------
--- ------ - ------------------------ -
------- --------- -- -----
---
-------------- - -------以上代码展示了 Broccoli-react-templates 最基本的使用方式。
其中，我们需要将 reactTemplates 函数传入需要编译的文件夹路径和相关的参数，output 则是输出的 Broccoli 内存树，最后将其进行导出即可。
支持参数
Broccoli-react-templates 还支持许多参数进行配置，以下是一些常用配置：
format
- 类型：string
- 默认：
stylish
输出文件的格式，可以设置为以下之一：
pretty：输出可读性高的代码compact：输出较为紧凑的代码stylish：输出更舒适的格式
modules
- 类型：string
- 默认：
es6
输出的代码模块类型，可以设置为以下之一：
es6：ES6 的模块语法cjs：CommonJS 规范的模块语法
targetExtension
- 类型：string
- 默认：
.jsx
输出代码的扩展名
示例代码
以下是一个整合基本代码和参数配置的例子：
-- -------------------- ---- -------
--- -------------- - ------------------------------------
--- -------- - ------------ -- ------
--- ------ - ----- -- ------
--- ------ - ------------------------ -
------- ---------
-------- ------
---------------- -----
---
-------------- - -------总结
使用Broccoli-react-templates可以让我们在开发过程中使用HTML风格的模板文件，从而避免了手动将其转化为jsx代码的步骤。同时，借助其灵活的参数配置，我们可以快速的实现自己想要的输出格式和代码风格。
希望这篇文章能够为您的前端开发之路提供一些帮助，让您在代码复杂的时候也能有更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c88ccdc64669dde50bc