如何使用 babel 预设环境保留动态导入语句？

Question

我正在创建包含用于代码分割的动态导入的共享模块。

我有这样的代码：

import('./moduleA').then(/* do stuff */)

然而 babel 将此编译为延迟的 require，从而阻止 Webpack 进行代码分割。

转换后的结果如下所示：

Promise.resolve().then(() => require('./moduleA')).then(/* do stuff */)

我的.babelrc.json很简单，只包含：

{
  "presets": ["@babel/preset-env"]
}

如何在 babel 转换后的代码中保留动态导入？

Answer 1

发生这种情况是因为@babel/preset-env默认情况下包含一个插件，@babel/plugin-proposal-dynamic-import可以转换动态导入。

有两种方法可以阻止这种情况。

方案一（推荐）

您可以排除该插件@babel/plugin-proposal-dynamic-import，以便import()语句保持不变。使用以下内容更新您的预设选项：

{
  "presets": [["@babel/preset-env", { "exclude": ["proposal-dynamic-import"] }]]
}

在预设选项中添加"modules": false，但这也将保留 ES 模块导入/导出语句。

{
  "presets": [["@babel/preset-env", { "modules": false }]]
}

这些 GitHub 问题对此进行了深入描述：