在前端开发中，使用模板引擎是必不可少的。而 broccoli-msx 可以帮助我们更方便地使用 React 的 JSX 语法来编写模板。下面是 broccoli-msx 的使用教程。
安装
要使用 broccoli-msx，需要先安装 Node.js 和 npm。安装好后，在终端中输入以下命令：
npm install --global broccoli-cli broccoli-msx
编写模板
在您的项目中创建 .jsx 文件以编写 React 组件。broccoli-msx 能够将 .jsx 文件转换为 React 组件。
构建
在项目中，您可以使用以下代码配置 Broccoli 并且将其运行起来：
var msx = require('broccoli-msx');
var src = 'src';
var dest = 'dist';
module.exports = msx(src, {
outputFile: dest + '/app.js'
});然后在命令行中输入以下命令来构建项目：
broccoli build dist
在 dist 目录下可以看到编译成功的 app.js 文件。
示例代码
我们来看一个简单的例子。下面是一个简单的组件来显示一个 Hello World：
-- -------------------- ---- -------
--- ----- - -----------------
----- ---------- ------- --------------- -
---------
------ ---------- ------------
-
-
--------------------------- ---------------将上述代码保存为 helloworld.jsx 文件，然后运行以下命令：
broccoli build dist && open dist/index.html
在浏览器中打开 index.html 文件，您将看到页面中显示的是 "Hello World"。
结论
使用 broccoli-msx，我们可以更方便地使用 React 的 JSX 语法编写模板。同时，Broccoli 工具链可以为前端项目提供更好的模块打包和资源处理能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c88ccdc64669dde505a