Babel 从入门到精通（二）：Plugin插件和Preset预设配置详解

前言

在现代 JavaScript 开发中，Babel 是一个不可或缺的工具。它帮助我们将现代的、高级的 JavaScript 代码转换成在各种浏览器都能运行的旧版 JavaScript 代码。Babel 的强大源于其灵活的插件系统和方便的 preset 配置。

那么，插件和 preset 究竟有什么区别，它们的存在目的是什么，又该如何使用呢？今天我们就来通俗易懂地讲解一下。

什么是 Babel 插件？

Babel 插件是一些独立的模块，它们负责具体的代码转换工作。每个插件都有自己明确的职责，比如转换箭头函数、类、模板字符串等等。通过引入和配置相应的插件，我们可以逐步增强 JavaScript 的兼容性。

类型

插件主要分为两类：

1. 语法插件（Syntax Plugin）：负责解析特定的语法，使 Babel 能够识别并处理这些语法。
2. 转换插件（Transform Plugin）：负责将特定的语法转换成旧版 JavaScript。

示例

例如，一个常用的插件 @babel/plugin-transform-arrow-functions，它负责将箭头函数转换成普通的函数表达式：

// 原始代码
const add = (a, b) => a + b;

// 转换后的代码
var add = function(a, b) {
  return a + b;
};

什么是 Preset？

Preset 是一组预定义好的插件集合。它们帮助我们快速配置 Babel，以支持各种新的 JavaScript 特性。Preset 就像是一个插件的“打包套餐”，让我们不必一个个去手动添加插件，极大简化了配置过程。

常用的 Preset

1. @babel/preset-env：根据目标环境自动添加必要的插件，支持最新的 JavaScript 特性。
2. @babel/preset-react：支持 React 的 JSX 语法。
3. @babel/preset-typescript：支持 TypeScript 语法。

示例

例如 @babel/preset-env 会根据你设定的目标环境自动选择合适的插件来让代码兼容：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "esmodules": true
      }
    }]
  ]
}

这样配置后，Babel 就能自动根据浏览器的支持情况来选择合适的插件进行转换。

如何使用插件和 Preset？

使用插件

在项目中使用 Babel 插件非常简单。首先，我们需要安装相应的插件。例如：

npm install --save-dev @babel/plugin-transform-arrow-functions

然后在 Babel 配置文件 .babelrc 或 babel.config.json 中添加该插件：

{
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

使用 Preset

使用 Preset 更加方便。首先安装所需的 preset，例如：

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

然后在配置文件中添加 preset：

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

拓展应用：结合插件与 Preset

在实际项目中，我们通常会同时使用多个插件和 preset 来满足各种需求。那么，如何合理地组合它们呢？

示例项目结构

假设我们有一个项目需要同时支持现代 JavaScript 特性、React 以及一些特定的转换需求。我们可以创建一个 babel.config.json 文件，并配置如下：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime"
  ]
}

解释

• @babel/preset-env: 自动配置所需的插件以支持最新的 JavaScript 特性。
• @babel/preset-react: 支持 React 的 JSX 语法。
• @babel/plugin-proposal-class-properties: 支持类属性语法。
• @babel/plugin-transform-runtime: 优化代码的运行时环境，减少冗余代码。

通过这种组合，我们可以确保项目代码既现代、又兼容，并且具备良好的开发体验和性能。

高级配置：定制 Preset

有时默认的 preset 不能完全满足我们的需求，我们需要定制一些 preset。Babel 允许我们通过参数进行配置，以实现更精细的控制。

示例：配置 @babel/preset-env

假设我们希望支持的浏览器版本非常具体：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "chrome": "58",
        "ie": "11"
      },
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

解释

• targets: 指定目标环境。这里我们指定了 Chrome 58 和 IE 11。
• useBuiltIns: 依据代码使用情况自动引入 Polyfill，减少代码体积。
• corejs: 指定 core-js 版本，用于 Polyfill。

通过这种配置，我们可以精确地控制代码转换的目标环境和所需的 Polyfill，确保项目在不同浏览器中的兼容性和性能。

总结

通过对 Babel 插件和预设的深入理解和灵活使用，我们能够显著提升 JavaScript 项目的开发效率和兼容性。插件让我们可以细粒度地控制代码转换过程，而预设则简化了配置，让我们可以快速启动项目。