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

Question

我正在學習 Babel，想學習如何配置 Babel。 我找到了兩種配置 Babel 的方法：創建 babel.config.js 和 .babelrc 文件。 在什么情況下我們應該更喜歡一個配置文件而不是另一個？

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 轉換/更改的第 3 方庫。

如果您的項目中有多個包（即多個 package.json）目錄使用單個 babel 配置，那么babel.config.json很有用。 這種情況比較少見。

如果您的問題是關於 babel 配置的文件擴展名（即.js與.json ）

使用.js暴露一個 babel 配置 api。

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

請記住，這會增加緩存的復雜性，大多數情況下最好使用.json靜態配置

Answer 2

這兩種配置似乎有些區別，

看着這個問題：

Jest transformIgnorePatterns 不起作用

有時，某些功能僅適用於某個文件，這是非常模糊的，當然沒有記錄。 （我可以確認上述問題存在，重命名配置文件即可解決）

此外，有時 babel 配置文件會被完全忽略，例如 webpack 和 babel-loader。 您希望 babel 加載在項目根目錄中找到的 .babelrc 文件，但事實證明它會忽略它並運行 Webpack 中提供的選項。

所以不幸的是，答案有點模糊，而且缺乏關於這些功能如何工作的文檔並沒有改善這種情況。

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,
  };
};

Answer 4

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

• 您正在使用單一倉庫嗎？ 你想編譯 node_modules 嗎？

babel.config.json適合你！

我們推薦使用babel.config.json格式。 Babel 本身正在使用它。

• 您的配置僅適用於項目的單個部分？

. babelrc.json適合你！