Wann werden babel.config.js und .babelrc verwendet?

Ich lernte Babel und wollte lernen, wie man Babel konfiguriert. Ich habe zwei Möglichkeiten gefunden, Babel zu konfigurieren: durch das Erstellen der Datei babel.config.js und .babelrc. Unter welchen Umständen sollten wir eine Konfigurationsdatei der anderen vorziehen?

Aus den Dokumenten
https://babeljs.io/docs/en/config-files#project-wide-configuration

Babel verfügt über zwei parallele Konfigurationsdateiformate, die zusammen oder unabhängig voneinander verwendet werden können.

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 lädt .babelrc.json-Dateien oder eine gleichwertige Datei mit den unterstützten Erweiterungen, indem es die Verzeichnisstruktur ab dem zu kompilierenden „Dateinamen“ durchsucht

Angesichts dieser Informationen

.babelrc wäre nützlich, wenn Sie bestimmte Transformationen/Plugins für eine Teilmenge von Dateien/Verzeichnissen ausführen möchten. Möglicherweise verfügen Sie über Bibliotheken von Drittanbietern, die nicht durch Babel transformiert/geändert werden sollen.

babel.config.json ist nützlich, wenn Sie mehrere Paketverzeichnisse (z. B. mehrere package.json) in Ihrem Projekt haben, die eine einzige Babel-Konfiguration verwenden. Dies kommt seltener vor.

Wenn es bei Ihrer Frage um Dateierweiterungen geht (z. B .js vs .json) in Bezug auf Babel-Konfigurationen

Benutzen .js stellt eine Babel-Konfigurations-API bereit.

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

Bedenken Sie, dass dies die Komplexität im Hinblick auf das Caching erhöht. In den meisten Fällen ist es am besten, es zu verwenden .json statische Konfigurationen

Es scheint einen Unterschied zwischen den beiden Konfigurationen zu geben,

Betrachtet man diese Frage:

Scherz transformIgnorePatterns funktioniert nicht

Manchmal funktionieren bestimmte Funktionen nur mit einer bestimmten Datei. Dies ist äußerst vage und sicherlich nicht dokumentiert. (Ich kann bestätigen, dass das oben genannte Problem besteht und durch Umbenennen der Konfigurationsdatei behoben wird.)

Außerdem werden Babel-Konfigurationsdateien manchmal völlig ignoriert, wie im Fall von Webpack und Babel-Loader. Man würde erwarten, dass babel die im Stammverzeichnis des Projekts gefundene .babelrc-Datei lädt, aber es stellt sich heraus, dass es sie ignoriert und die in Webpack bereitgestellten Optionen ausführt.

Daher ist die Antwort leider etwas vage und der Mangel an Dokumentation zur Funktionsweise dieser Funktionen verbessert die Situation nicht.

ich benutze .babelrc wenn ich eine beliebige Konfiguration habe, die keine Umgebungsvariablen erfordert

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

Aber wenn ich hinzufügen muss process.env Variablen werde ich babel.config.js verwenden

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

Aus https://babeljs.io/docs/en/configuration

• Sie verwenden ein Monorepo? Sie möchten node_modules kompilieren?

babel.config.json ist für Sie!

Wir empfehlen die Verwendung von babel.config.json Format. Babel selbst nutzt es.

• Sie haben eine Konfiguration, die nur für einen einzelnen Teil Ihres Projekts gilt?

.babelrc.json ist für Sie!