如何通过 Babel 将 jsx 语法转换为 ES5？
随着 React 的流行，js 中的 jsx 语法已经成为前端开发的标配，但是该语法在部分浏览器中并不支持，为了保证代码的兼容性，我们需要将 jsx 语法转换为 ES5 语法。这就是 Babel 出现的原因。
Babel 是一个能将 ECMAScript 6+ 代码转换为向后兼容版本的工具，它还可以将 jsx 语法转换为普通 js 代码。在此，我们就以 jsx 转 ES5 为例，来介绍怎么使用 Babel 进行转换。
首先，你需要通过命令行安装 Babel 相关库：
npm i -D @babel/core @babel/cli @babel/preset-react
其中，@babel/core 是 Babel 的核心库，@babel/cli 是命令行工具，@babel/preset-react 是用于转换 jsx 语法的插件。
安装完成后，我们需要在项目根目录下新建一个 .babelrc 文件，并在文件中进行一些配置，告诉 Babel 如何转换 jsx 语法：
{
"presets": [
"@babel/preset-react",
"@babel/preset-env"
]
}上面的代码指定使用 @babel/preset-react 插件转换 jsx 语法，使用 @babel/preset-env 插件转换 ES6 语法。注意，如果你不进行这个配置，Babel 将无法识别 jsx 语法，也无法转换 ES6 语法。
配置完成后，我们就可以通过命令行使用 Babel 进行代码转换了。假设我们有一个使用了 jsx 语法的 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- --- - -- -- -
------ -
---- ----------------
---------- -----------
------
--
-
------ ------- ----现在，我们可以使用 Babel 将该组件转换为 ES5 语法：
npx babel src --out-dir lib
其中，src 是源代码目录，lib 是编译后的代码存放目录。执行该命令后，我们就可以在 lib 目录下看到编译后的组件：
-- -------------------- ---- -------
---- --------
------------------------------ ------------- -
------ ----
---
--------------- - ---- --
--- ------ - -----------------------------------------
--- --- - -------- ----- -
------ ----------------------------------- -
---------- -----
-- ---------------------------------- ----- ------- ----------
--
--- -------- - ----
--------------- - ---------可以看到，jsx 语法已经被转换成了普通的 js 代码，可以在所有浏览器中正常运行。
最后提醒，Babel 虽然是一个十分方便的工具，但是在实际开发中使用时还需要注意一些问题，比如引用了不同版本的库可能会导致转换失败等。希望本文能对你理解和使用 Babel 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6782037f935627c900f374e4
