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

Question

我正在创建包含用于代码拆分的动态导入的共享模块。
我有如下代码:

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

然而，babel 将其编译为延迟要求，从而阻止 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 问题中对此进行了深入描述:

https://github.com/babel/babel/issues/11204

https://github.com/babel/babel/issues/10194