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

编程问答 2022-08-15

问题描述

我正在创建包含动态导入以进行代码拆分的共享模块。

我有类似的代码：

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

但是babel将其编译为延迟的需求，从而阻止Webpack进行代码拆分。

转换后的结果如下：

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

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

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

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

解决方法

之所以会这样，是因为默认情况下@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问题中对此进行了详细描述：

babeljsdynamic-importjavascriptwebpackwebpackwebpack