Babel 配置文件 .babelrc 中的 presets 字段详解

Babel 是一个 JavaScript 编译器，它可以将 ECMAScript 2015+ 的代码转换成向后兼容的 JavaScript 代码，以便在当前和旧版本的浏览器或其他环境中运行。Babel 的配置文件是 .babelrc，其中 presets 字段是最重要的配置项之一。本文将详细介绍 presets 字段的用法和示例代码，并提供学习和指导意义。

presets 字段的作用

presets 字段是 Babel 预设的集合，它包含了一组插件的集合，用于将特定版本的 ECMAScript 转换成向后兼容的 JavaScript 代码。Babel 已经为我们提供了许多预设，如 @babel/preset-env，@babel/preset-react，@babel/preset-typescript 等等。我们可以使用这些预设，也可以自定义自己的预设。

使用预设

我们可以使用以下命令安装预设：

npm install --save-dev @babel/preset-env

然后在 .babelrc 中配置 presets 字段：

{
  "presets": ["@babel/preset-env"]
}

这样就可以将 ECMAScript 2015+ 的代码转换成向后兼容的 JavaScript 代码了。如果我们还需要使用 React 或 TypeScript，可以继续添加预设：

{
  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
}

自定义预设

如果我们需要自定义预设，可以在项目中创建一个新的 npm 包，并在其中定义我们需要的插件集合。例如，我们可以创建一个名为 @my/preset 的 npm 包，然后在其中定义一个名为 my-preset 的插件集合：

// @my/preset/index.js
module.exports = function(api, options) {
  return {
    plugins: [
      // ...
    ]
  };
};

接下来，我们可以在项目中安装 @my/preset，并在 .babelrc 中使用它：

{
  "presets": ["@my/preset"]
}

预设的选项

预设可以接受选项，用于自定义转换规则。例如，@babel/preset-env 可以接受 targets 和 useBuiltIns 选项，用于指定需要支持的浏览器和是否需要自动引入 polyfill。示例代码如下：

// javascriptcn.com 代码示例
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "58",
          "ie": "11"
        },
        "useBuiltIns": "usage",
        "corejs": "3.0.0"
      }
    ]
  ]
}

这样配置之后，Babel 将会自动将代码转换成向后兼容的 JavaScript 代码，并根据需要自动引入 polyfill。

总结

presets 字段是 Babel 预设的集合，用于将特定版本的 ECMAScript 转换成向后兼容的 JavaScript 代码。我们可以使用 Babel 提供的预设，也可以自定义自己的预设。预设可以接受选项，用于自定义转换规则。通过学习 presets 字段的使用，我们可以更好地理解 Babel 的工作原理，并在项目中更加灵活地使用 Babel。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65814b39d2f5e1655dc7d059