何时使用 babel.config.js 和 .babelrc答案

【问题标题】：When to use babel.config.js and .babelrc何时使用 babel.config.js 和 .babelrc
【发布时间】：2020-06-02 21:58:40
【问题描述】：

我正在学习 Babel，想学习如何配置 Babel。我找到了两种配置 Babel 的方法：通过创建 babel.config.js 和 .babelrc 文件。在什么情况下我们应该更喜欢一个配置文件而不是另一个？

【问题讨论】：

标签： javascript compiler-construction babeljs

【解决方案1】：

来自文档 https://babeljs.io/docs/en/config-files#project-wide-configuration

Babel 有两种并行的配置文件格式，可以一起使用，也可以单独使用。

Project-wide configuration
    babel.config.json files, with the different extensions

File-relative configuration
    .babelrc.json files, with the different extensions
    package.json files with a "babel" key

Babel 加载 .babelrc.json 文件，或使用支持的扩展名的等效文件，方法是从正在编译的“文件名”开始搜索目录结构

鉴于这些信息

如果您想在文件/目录的子集上运行某些转换/插件，

.babelrc 会很有用。也许您有不想被 babel 转换/更改的 3rd 方库。

babel.config.json 如果您的项目中有多个使用单个 babel 配置的包（即多个 package.json）目录，则很有用。这种情况不太常见。

如果您的问题是关于 babel 配置的文件扩展名（即 .js 与 .json）

使用.js 会公开一个 babel config api。

https://babeljs.io/docs/en/config-files#config-function-api

请记住，这会增加缓存的复杂性，大多数情况下最好使用 .json 静态配置

【讨论】：

这里说：babeljs.io/docs/en/config-files#supported-file-extensions “出于兼容性原因，.babelrc 是 .babelrc.json 的别名。”

【解决方案2】：

这两种配置似乎有些区别，

看这个问题：

Jest transformIgnorePatterns not working

有时，某些功能仅适用于某个文件，这是非常模糊的，当然也没有记录。（我可以确认存在上述问题，重命名配置文件即可解决）

另外，有时 babel 配置文件会被完全忽略，例如 webpack 和 babel-loader。您希望 babel 加载在项目根目录中找到的 .babelrc 文件，但事实证明它会忽略它并运行 Webpack 中提供的选项。

不幸的是，答案有点模糊，缺乏关于这些功能如何工作的文档并不能改善这种情况。

【讨论】：