随着单页面应用的兴起，React 已经成为了前端领域不可或缺的极为流行的技术栈之一。而且在 React 的中，JSX 是 React 开发中最为流行的语法。然而默认情况下 JSX 是无法被浏览器直接识别的，因此需要将其转化成 JavaScript 代码，同时还需要对代码进行编译。 这时候，我们就需要使用拥有优秀处理引擎的 npm 包 —— jstransformer-jsx。
安装
在使用 jstransformer-jsx 之前，首先需要在本地安装该 npm 包。可以使用 npm 安装该包。
npm install jstransformer-jsx --save-dev
使用
使用 jstransformer-jsx 是非常的简单的，只需要引入该包并传入相应的参数即可。例如：
const jsx = require('jstransformer-jsx');
const result = jsx.render('var hello = <strong>world</strong>;').body;
console.log(result);在上述代码中，我们使用了 jsx.render 把输入的 JSX 编译成 JavaScript 代码。 运行结果如下：
"var hello = React.createElement(\"strong\", null, \"world\");"
可见运行结果为编译后的 JavaScript 代码。
同时，我们也可以把代码保存到文件中:
const fs = require('fs');
const jsx = require('jstransformer-jsx');
const result = jsx.renderFile('input.jsx').body;
fs.writeFileSync('output.js', result);这里我们可以看到，使用该包还可以处理 .jsx 文件。
参数
在使用 jstransformer-jsx 时，我们还可以为其设置一些参数：
doctype： 是否添加<!DOCTYPE html>（默认为 false）harmony：是否打开 ECMA harmony 模式 （默认为 false）
例如：
const jsx = require('jstransformer-jsx');
const options = { doctype: true };
const result = jsx.render('var hello = <strong>world</strong>;', options).body;
console.log(result);在这里，我们为其设置了 doctype 为 true，运行结果将是：
"<!DOCTYPE html><span>hello , world</span>"
总结
在前端的开发过程中，使用 React 进行开发是非常流行的选择。而 jstransformer-jsx 可以帮助我们将 JSX 编译成 JavaScript 代码，使得浏览器可以直接识别。使用 jstransformer-jsx 是非常方便的，我们可以使用其提供的默认设置来编译，也可以自定义一些参数。但是在使用过程中需要注意，需要保证本地已经安装了 npm 包，否则会出现无法编译问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63371