javascript - Babel preset-env 未加载 Node 目标的顶级等待语法

Question

我正在尝试使用新的顶级 await 语法来导入模块，但 Babel 无法识别语法，尽管使用了 preset-env，除非我明确设置插件 @babel/plugin-syntax-top -level-await.为什么我必须手动指定这个插件？我的印象是 preset-env 会自动处理这些事情？

对于上下文，我的设置如下:

    presets: [
      [
        '@babel/preset-env',
        {
          debug: true,
          modules: false,
          useBuiltIns: 'usage',
          corejs: 3,
        },
      ],
      '@babel/preset-typescript',
    ],
    // plugins: ['@babel/plugin-syntax-top-level-await'], // Commented b/c I was experimenting
  };

当运行 yarn run babel myFile.ts 时，输出和抛出的错误是:

@babel/preset-env: `DEBUG` option
Using targets:
{
  "node": "13.12"
}
Using modules transform: false
Using plugins:
  proposal-nullish-coalescing-operator { "node":"13.12" }
  proposal-optional-chaining { "node":"13.12" }
  syntax-json-strings { "node":"13.12" }
  syntax-optional-catch-binding { "node":"13.12" }
  syntax-async-generators { "node":"13.12" }
  syntax-object-rest-spread { "node":"13.12" }
  syntax-dynamic-import { "node":"13.12" }
Using polyfills with `usage` option:
SyntaxError: /path/to/project/src/storage/index.ts: Unexpected token, expected ";" (4:6)
  2 | import { AppError } from '../errors';
  3 | 
> 4 | await import('./db/dbDiskMethods');
    |       ^
  5 | 
  6 | const getDbDiskMethods = async () => {
  7 |   return await import('./db/dbDiskMethods');

作为附带问题，为什么 preset-env 会加载调试输出中显示的 5 个语法插件，但会跳过顶级 await 语法插件？

Answer 1

这是因为 preset-env 只加载 accepted proposals .目前，顶级 await 还没有被语言接受，它位于 stage 3。 .

一般来说，preset-env 可用的插件列表来自 compat-data package .运行 babel 时 preset-env 实际使用的插件列表取决于

• 提供的 options .根据所选选项，可能会包含 compat-data 中不存在的其他插件。例如，根据模块语法选项，additional plugins may be added .
• Where babel is called from .例如，Webpack supports top level await , 因此尽管没有被接受的提议，当 babel-loader 调用 babel 时，preset-env 无论如何都会添加它。

由于 Babel 是从命令行运行的，因此引发了 OP 错误。如果它是由 babel-loader 运行的，那么“丢失”的插件会自动添加，如上面第二点所述。