在Babeljs配置中使用本地ECMAScript模块

Question

我非常困惑如何在使用原生ECMAScript模块和在package.json中设置"type": "module"时使用Babel配置。据我理解，根据Babel文档(这里，“支持的文件扩展名”章节)，应该是可以实现的。但是如果我尝试使用如下的配置：

const config = () => {
  const presets = [
    "@babel/preset-react",
    [
      "@babel/preset-env",
      {
        bugfixes: true,
        useBuiltIns: "usage",
        corejs: { version: "3.6", proposals: true },
      },
    ],
  ];
  const plugins = ["@babel/plugin-transform-runtime"];
  return { presets, plugins };
};
export default config;

我遇到了一个错误，提示为“加载配置文件时出错 - 您似乎正在使用本机 ECMAScript 模块配置文件，此时仅在异步运行 Babel 时受支持”。

这是预期的，因为文档指出“本机 ECMAScript 模块是异步的”。可惜，即使在上述配置中加入 async / await，问题也无法解决。我是通过 parcel 运行 babel 的 - 这是否与 parcel 有关？我是否误解了文档？如果有人能为我澄清这个问题，我将不胜感激。

- boojum

Answer 1

我曾经遇到过类似的问题，在阅读 Babel 网站后，我得出结论：无论使用何种方法调用你的 babel 配置，都没有异步进行。在我的案例中，是 jest 26 导致的这个问题。
我通过将配置更改为 JSON 文件 babel.config.json，解决了这个问题。 其他人将他们的配置文件更改为 CommonJS 文件 - babel.config.cjs，那么您需要更改配置文件为 CommonJS 格式，即使用 module.exports = {你的其它配置}

- MarkSh

Answer 2

我认为问题在于你的 package.json 文件中指定了使用ES6模块，但是你的Babel配置文件却使用了module.exports，这是CommonJS（而不是ES6模块）。

请将 babel.config.js 重命名为 babel.config.cjs。

- Muhammad Faraz Ali