Babel-preset-react 与 Babel-preset-env 的使用详解-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要使用到 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 文件中添加以下配置：

// javascriptcn.com 代码示例
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      }
    }],
    "@babel/preset-react"
  ]
}

其中，第一个 preset 是 Babel-preset-env，用于转换 ES6+ 代码，第二个 preset 就是 Babel-preset-react。上面的配置表示，将 ES6+ 代码转换为浏览器的最新版本和 IE11 可以执行的代码，同时也会将 React JSX 语法转换成普通的 JavaScript 代码。

使用 Babel-preset-react 的示例代码：

// javascriptcn.com 代码示例
import React from 'react';

const App = () => (
  <div className="App">
    <h1>Hello World!</h1>
  </div>
);

export default App;

转换后的代码：

// javascriptcn.com 代码示例
"use strict";

var _react = _interopRequireDefault(require("react"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var App = function App() {
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "App"
  }, /*#__PURE__*/_react["default"].createElement("h1", null, "Hello World!"));
};

module.exports = App;

可以看到，使用了 Babel-preset-react 后，React JSX 语法被转换为了普通的 JavaScript 代码。

Babel-preset-env

Babel-preset-env 则是一个更加通用的 Babel 插件集，用于转换 ES6+ 代码。它可以根据所配置的参数，自动检测当前环境的浏览器支持情况，从而只转换必要的代码。比如，如果当前环境的浏览器已支持了箭头函数语法，那么箭头函数就不需要再被转换了。

使用 Babel-preset-env 也只需要在 .babelrc 文件中添加以下配置：

// javascriptcn.com 代码示例
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      }
    }],
    "@babel/preset-react"
  ]
}

上面的配置中，我们只需要关注其中的 Babel-preset-env 配置。在 targets 中，我们配置了需要支持的浏览器版本为最新版本和 IE11 及以上版本，Babel-preset-env 会自动根据这些参数来决定需要转换哪些代码。

还可以在 options 中配置更多的参数，比如 useBuiltIns 参数可以配置是否使用 polyfill 来填充浏览器缺失的 API，loose 参数可以配置是否使用非标准的转换方式来提高代码的性能等。

使用 Babel-preset-env 的示例代码：

const arr = [1, 2, 3];

arr.map(n => n + 1);

转换后的代码：

"use strict";

var arr = [1, 2, 3];
arr.map(function (n) {
  return n + 1;
});

根据当前环境的浏览器支持情况，箭头函数语法需要被转换，而数组的 map 方法则不需要转换。

总结

Babel-preset-react 和 Babel-preset-env 是常用的两个 Babel 插件集，一个用于转换 React JSX 语法，一个用于转换 ES6+ 语法。两者可以相互配合使用，达到最佳的转换效果。在使用时，可以根据实际情况来选择需要支持的浏览器版本，以及是否需要填充浏览器缺失的 API。同时，也可以根据需要自定义一些插件来实现更加灵活的转换。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6501156495b1f8cacdee5522