在前一章，使用的 yarn compiler:plugins 以及 yarn compiler:presets，都是直接在命令行中配置了 plugins 及 presets。

这种方式不够优雅，而且不够友好。所以在理解 plugins 与 presets 之前，先来了解下 babel 提供的专门的配置文件来替代这种方式。

该配置文件有两种类型：

1. 项目范围的配置

• babel.config.json 文件。可使用扩展名有 .json、.js、.cjs、.mjs。

2. 相对文件配置

• .babelrc.json 文件。可使用扩展名有 .json、.js、.cjs、.mjs。或者直接命名为 .babelrc。
• package.json 文件。 其中有 key 为 babel 的设置。

在项目根目录下设置这两种类型的文件。babel 在执行的时候会自动寻找。

1.项目范围的配置

babel@7.0 开始，具有了根目录的概念。默认为当前工作目录。(babel 命令执行的目录)。

项目范围的配置，默认的搜索行为是，在当前执行转译命令的目录中直接寻找babel.config.json，找到的话，正常编译，否则不会编译。

babel-config-demo/
.
├── package.json
├── node_modules
├── src
│   ├── main.js
│   └── package.json
├── babel.config.js
└── yarn.lock

假设在项目 babel-config-demo中的目录结构如上。

那么当在 babel-config-demo/ 目录下执行 babel 命令时，是可以正常转码的。而在 babel-config-demo/src 下无法转码。

另外也可以使用 configFile 选项来指明具体的 babel.config.json 路径。需要注意的是，该选项仅允许利用编程方式使用。即创建 js 文件，手动引入 @babel/core, 调用 api。

此外，babel.config.json 也能对 node_modules 和 symlinked packages 内的文件进行转码。而 .babelrc.json 则不能。

从上面的论述中，我们简单总结下 babel.config.json 类文件的特点：

• 必须存在于执行目录。执行命令的目录下，必须能找到 babel.config.json。
• 如果项目特殊，可以利用 configFile 选项，显式的指定 babel.config.json 的位置。
• babel.config.json 也能对 node_modules 和 symlinked packages 内的文件进行转码。

2.相对文件的配置

相对文件的配置，默认搜索行为是，根据执行命令先定位到转译的目标文件，基于目标文件的位置，逐次向上排查.babelrc.json。此搜索过程中，有两点注意：

• 在此搜索过程中，一旦遇到 package.json 时，此搜索就会停止。
• 如果找到了 .babelrc.json ，则此 .babelrc.json 必须与执行命令在同一级目录。否则 .babelrc.json 会被忽略，文件不会转译。

示例一

babelrc-demo/
.
├── package.json
├── node_modules
├── src
│   ├── main.js
│   └── package.json
├── .babelrc
└── yarn.lock

在 babelrc-demo/ 下执行 yarn compiler 命令时，会先定位到 src/main.js 。然后顺此文件向上查找 .babelrc。但由于 src 文件夹内有 package.json，所以查找会立刻停止，直接在 src 下寻找 .babelrc。可想而知，并不会正常执行。

示例二

babelrc-demo/
.
├── package.json
├── node_modules
├── src
|   └── .babelrc
│   ├── main.js
│   └── package.json
├── .babelrc
└── yarn.lock

该例相比上例，在 src 下多了 .babelrc。

同样，在 babelrc-demo/ 下执行 yarn compiler 命令时，会先定位到 src/main.js 。虽然此时在 src 下可以找到 .babelrc。但由于命令是在 babelrc-demo/ 下，而 .babelrc 是在 babelrc-demo/src/ 下，两者并不在同一目录，结果也是执行失败。

总结

在大部分情况下，使用项目范围的配置与相对文件的配置，差异并不大。

babel 之所以要将配置文件分为这两类，主要是为了方便开发者管理类似 @babel 这种 mono packages 项目。既能统一集中的管理通用的 babel 配置（项目范围的配置），又能根据各个 package 的实际情况做单独的配置（相对文件的配置）。当两种配置同时找到了的时候，相对文件的配置，将会与项目范围的配置进行合并，然后才应用到子package。