配置文件的格式

在 Babel 中，配置文件又可以分为两种：

• 项目范围的配置文件
• 文件相关的配置文件

项目范围配置文件

顾名思义，就是该配置文件针对整个项目生效，这种类型的配置文件一般放在项目根目录下，配置文件的文件名一般是 babel.config.*，后面的 * 支持各种类型的扩展名：json、js、cjs、mjs、cts、...

文件相关配置文件

这种类型的配置文件就是对特定的文件或者特定的目录以及子目录生效。在 Babel 中，如下格式的配置文件是文件级别：

• .babelrc.*（json、js、cjs、mjs、cts、...）
• .babelrc
• package.json 文件里的 babel 键

例如如下结构：

/my-project
|-- frontend
|   |-- .babelrc.json
|   |-- src
|-- backend
|   |-- .babelrc.json
|   |-- src
|-- babel.config.json

假设 babel.config.json 配置如下：

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

上面配置文件中所指定的预设，会在整个项目中都被用到。

假设 frontend/.babelrc.json 配置如下：

{
  "plugins": [
    "@babel/plugin-transform-react-jsx"
  ]
}

该配置只会在 frontend 目录范围内生效。Babel 在对 frontend 目录下的文件进行编译时，会自动的去合并多个 Babel 配置文件，最终 frontend 目录下的文件在进行编译时，就会使用 @babel/preset-env 预设以及 @babel/plugin-transform-react-jsx 这个插件。

配置文件选项

有关 Babel 配置文件所支持的配置项，可以在 官网 看到。

所支持的配置项比较多，官方进行了一个简单的分类：

• 主要选项
• 配置加载选项
• 插件和预设配置
• 输出目标选项
• 配置合并选项
• 源码映射选项
• 其他选项
• 代码生成器选项
• AMD / UMD / SystemJS 选项
• 选项概念

下面介绍一些常见的配置项。

插件和预设配置

plugins

对应的值为一个数组（可以配置多个），配置要使用的插件，需要提前进行安装

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

presets

配置一个预设（预设是一组插件的集合），对应的值也是一个数组，表示可以配置多个

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

输出目标选项

targets

用于指定要兼容的浏览器版本范围

{
  "targets": "> 0.25%, not dead"
}

关于指定浏览器范围，有多种多样的形式，例如可以在项目根目录下创建一个 .browserslistrc 配置文件来指定范围，也可以在 package.json 中通过 browserslist 这个键来指定范围。

优先级顺序如下：

1. targets
2. .browserslistrc
3. package.json

browserlistConfigFile

默认值是 true，表示允许 Babel 去搜寻项目中和 browserlist 相关的配置。这个配置对应的值还可以是一个字符串形式的路径，该路径就指定了具体的 browserlist 文件的位置。

{
  "presets": [
    ["@babel/preset-env", {
      "browserslistConfigFile": "./.browserslistrc"
    }]
  ]
}

配置合并选项

extends

允许扩展其他的 Babel 配置文件，可以提供一个路径，该路径对应的 Babel 配置文件就会作为基础的配置，表示该配置文件继承自指定配置文件。

{
  "extends": "./base.babelrc.json"
}

env

为不同的环境提供不同的配置，例如在开发环境或者生成环境需要使用不同的插件或者预设，那么就可以通过 env 来指定环境。

{
  "env": {
    "development": {
      "plugins": ["pluginA"]
    },
    "production": {
      "plugins": ["pluginB"]
    }
  }
}

overrides

用于对匹配上的特定文件或者目录应用不同的配置

• test：做匹配
• include：包含哪些目录
• exclude：排除哪些目录

{
  "overrides": [
    {
      "test": ["*.ts", "*.tsx"],
      "exclude": "node_modules",
      "presets": ["@babel/preset-typescript"]
    }
  ]
}

ignore 和 only

• ignore：指定忽略文件
• only：指定特有文件

{
  "ignore": ["node_modules"],
  "only": ["src"]
}

源码映射选项

sourceMaps

是否要生成 source map

sourceFileName

指定 source map 文件的文件名

sourceRoot

指定生成 source map 文件对应的 URL 前缀（目录）

其他选项

sourceType

指定 Babel 应该如何去解析 JS 代码

• module：代码使用 ESM 模块化
• script：普通的 JS 脚本，没有使用模块化
• unambiguous：让 Babel 自己判断。Babel 检查到代码使用了 export、import，就会视为模块文件，否则就会视为普通的 script 脚本

assumptions

从 Babel 7.13.0 开始引入的一项配置项，让开发者对自己的代码做一个假定（更像是对 Babel 的一个承诺）

{
  "assumptions": {
    "noClassCalls": true
  }
}

上面配置表示代码中不会直接调用类（不会像调用函数一样去调用类），Babel 就可以省略生成检查类是否被正确调用的代码。