在前端开发中，我们经常需要使用到 Babel 来将 ES6 或者更新的代码转换为对应的低版本浏览器可以执行的代码。而 Babel-preset-react 和 Babel-preset-env 就是两个常用的 Babel 插件集，用于转换 React 和 ES6+ 代码。本文将详细介绍这两个插件集的使用方法，以及它们的区别和联系。
Babel-preset-react
Babel-preset-react 是一个用于转换 React 代码的 Babel 插件集。它包含了以下的插件：
- transform-react-jsx：用于将 React JSX 语法转换为 JavaScript 代码。
- transform-react-display-name：用于给 React 组件添加 displayName 属性，方便调试时追踪组件名。
- transform-react-jsx-source：用于添加 sourcemap 信息到 React JSX 语法中。
使用 Babel-preset-react 只需要在 .babelrc 文件中添加以下配置：
-
---------- -
--------------------- -
---------- -
----------- ------ - ---------- --- -- ----
-
---
---------------------
-
-其中，第一个 preset 是 Babel-preset-env，用于转换 ES6+ 代码，第二个 preset 就是 Babel-preset-react。上面的配置表示，将 ES6+ 代码转换为浏览器的最新版本和 IE11 可以执行的代码，同时也会将 React JSX 语法转换成普通的 JavaScript 代码。
使用 Babel-preset-react 的示例代码：
------ ----- ---- --------
----- --- - -- -- -
---- ----------------
--------- -----------
------
--
------ ------- ----转换后的代码：
---- --------
--- ------ - -----------------------------------------
-------- --------------------------- - ------ --- -- -------------- - --- - - ---------- --- -- -
--- --- - -------- ----- -
------ --------------------------------------------------- -
---------- -----
-- -------------------------------------------------- ----- ------ ----------
--
-------------- - ----可以看到，使用了 Babel-preset-react 后，React JSX 语法被转换为了普通的 JavaScript 代码。
Babel-preset-env
Babel-preset-env 则是一个更加通用的 Babel 插件集，用于转换 ES6+ 代码。它可以根据所配置的参数，自动检测当前环境的浏览器支持情况，从而只转换必要的代码。比如，如果当前环境的浏览器已支持了箭头函数语法，那么箭头函数就不需要再被转换了。
使用 Babel-preset-env 也只需要在 .babelrc 文件中添加以下配置：
-
---------- -
--------------------- -
---------- -
----------- ------ - ---------- --- -- ----
-
---
---------------------
-
-上面的配置中，我们只需要关注其中的 Babel-preset-env 配置。在 targets 中，我们配置了需要支持的浏览器版本为最新版本和 IE11 及以上版本，Babel-preset-env 会自动根据这些参数来决定需要转换哪些代码。
还可以在 options 中配置更多的参数，比如 useBuiltIns 参数可以配置是否使用 polyfill 来填充浏览器缺失的 API，loose 参数可以配置是否使用非标准的转换方式来提高代码的性能等。
使用 Babel-preset-env 的示例代码：
----- --- - --- -- --- --------- -- - - ---
转换后的代码：
---- -------- --- --- - --- -- --- ---------------- --- - ------ - - -- ---
根据当前环境的浏览器支持情况，箭头函数语法需要被转换，而数组的 map 方法则不需要转换。
总结
Babel-preset-react 和 Babel-preset-env 是常用的两个 Babel 插件集，一个用于转换 React JSX 语法，一个用于转换 ES6+ 语法。两者可以相互配合使用，达到最佳的转换效果。在使用时，可以根据实际情况来选择需要支持的浏览器版本，以及是否需要填充浏览器缺失的 API。同时，也可以根据需要自定义一些插件来实现更加灵活的转换。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6501156495b1f8cacdee5522