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

Question

我正在学习 Babel 并想了解如何配置 Babel。我找到了两种配置 Babel 的方法：创建 babel.config.js 和 .babelrc 文件。在什么情况下，我们应该优先选择其中一个配置文件而不是另一个？

- MII

Answer 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 转换/更改。

如果你的项目中有多个包(即多个 package.json)，那么 babel.config.json 就很有用了，它使用单个 babel 配置。这种情况较少见。

如果您的问题涉及到文件扩展名（例如.js和.json）与babel配置有关，则使用.js会暴露出babel配置API。{{}}

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

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

- Bodman

---

根据这里的说明：https://babeljs.io/docs/en/config-files#supported-file-extensions，为了兼容性，`.babelrc` 是 .babelrc.json 的别名。 - user36339

Answer 2

这两个配置似乎有所不同，

看看这个问题:

Jest transformIgnorePatterns 不起作用

有时候，某些功能只能与特定文件搭配使用，这非常模糊，而且肯定没有文档记录。（我可以确认上述问题存在，并且将配置文件重命名可以解决它）

此外，有时 babel 配置文件会被直接忽略，比如在 webpack 和 babel-loader 的情况下。你期望 babel 会加载项目根目录中找到的 .babelrc 文件，但事实证明它会忽略它并运行 Webpack 中提供的选项。

因此，不幸的是，答案有点模糊，而缺乏关于这些特性如何工作的文档并没有改善情况。

- Patrick

Answer 3

我在需要任意配置而不需要任何环境变量时使用.babelrc。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "14"
        }
      }
    ]
  ],
  "plugins": [
    "add-module-exports",
    [
      "inline-dotenv",
      {
        "path": "./.env.production",
        "unsafe": true
      }
    ]
  ]
}

但是当我需要添加process.env变量时，我将使用babel.config.js。

module.exports = function (api) {
  api.cache(true);

  const presets = [
    [
      '@babel/preset-env',
      {
        targets: {
          node: '14',
        },
      },
    ],
  ];

  const plugins = [
    'add-module-exports',
    [
      'inline-dotenv',
      {
        path: `./.env.${process.env.NODE_ENV}`,
        unsafe: true,
      },
    ],
  ];

  return {
    presets,
    plugins,
  };
};

- Jeff Voss

Answer 4

来自https://babeljs.io/docs/en/configuration

• 您正在使用单一存储库吗？ 您想编译node_modules吗？

babel.config.json适合您！

我们建议使用babel.config.json格式。 Babel本身正在使用它。

• 您有仅适用于项目的某个部分的配置吗？

babelrc.json适合您！

- Michael Freidgeim