本文将介绍在 React 项目中使用 Babel 进行代码转换的方法。Babel 是一个 JavaScript 的转换器，可以将 ES6 及以上的 ECMAScript 语法转换成浏览器能够运行的 ES5 代码，也支持将 JSX 转换成 JS 代码。
安装 Babel
在 React 项目中使用 Babel，需要先安装相应的 npm 包。在项目根目录下执行以下命令：
npm install @babel/core @babel/preset-env @babel/preset-react --save-dev
@babel/core：Babel 核心库。@babel/preset-env：用于将 ES6 转换为 ES5 代码的预设。@babel/preset-react：用于将 JSX 转换为 JS 代码的预设。
以上包中的预设都可以在 .babelrc 文件中配置使用。
配置 Babel
在项目根目录下创建 .babelrc 文件，并添加以下内容：
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
这样，Babel 在转换代码时就会按照以上的预设进行转换。
使用 Babel
引入 Babel 并使用它进行代码转换的方式有两种：一种是使用 @babel/cli 命令行工具，另一种是使用 Webpack 进行打包时自动转换。
使用 @babel/cli
在命令行中使用 @babel/cli 命令行工具，可以将指定的 JS 文件转换成 ES5 的代码。在项目根目录下执行以下命令：
./node_modules/.bin/babel src/ -d lib/
以上命令将 src 目录下的 JS 文件转换成 ES5 的代码并保存到 lib 目录中。如果要转换的 JS 文件有变化时，还可以加上 -w 参数来监听文件变化并自动转换：
./node_modules/.bin/babel src/ -d lib/ -w
使用 Webpack
Webpack 是一个很好的打包工具，它可以自动对项目中的 JSX 代码进行转换，使用起来更加方便。
在 webpack.config.js 配置文件中添加以下配置项：
-- -------------------- ---- ------- -------------- - - ------- - ------ - - ----- ---------- -------- ----------------- ---- - ------- --------------- -------- - -------- --------------------- ---------------------- - - - - - -展开代码
以上配置项中，module.rules 表示所有需要 Webpack 处理的文件类型和对应的处理方式。其中，test 用于指定需要处理的文件类型，exclude 用于指定不需要处理的文件类型。
使用 babel-loader 对 JS 文件进行处理，并在 loader 的配置项中添加 @babel/preset-env 和 @babel/preset-react。
完成以上配置后，Webpack 打包项目时，就能够自动将 JSX 代码转换为 JS 代码了。
示例代码
以下代码演示了 JSX 转换成 JS 代码的过程：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ----- ----- ------- --------------- - -------- - ------ ---------- ----------------------- - - ---------------------- ------------ --- ---------------------------------展开代码
将以上代码保存到 index.js 文件中，使用 @babel/cli 命令行工具进行转换，可以得到以下 ES5 代码：
-- -------------------- ---- ------- ---- -------- --- ------ - ----------------------------------------- --- --------- - --------------------------------------------- -------- --------------------------- - ------ --- -- -------------- - --- - - ---------- --- -- - --- ----- - ------------- -------- ------------------ - ---------------- ------------------ -------- ------- - --------------------- ------- ------ -------------------------------- ---------------------------------- ------------ - ------------------- -- ---- --------- ------ -------- -------- - ------ ------------------------------------- ----- ------- -- ----------------- - ---- ------ ------ ------------------------------- ------------------------------------------------------------------ - ----- ------- --- ---------------------------------展开代码
可以看到，JSX 代码已经被转换成了 JS 代码，并添加了必要的引用库、类定义和继承等代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ba99c9306f20b3a6980921
