使用内联动态导入和webpack进行代码拆分的意外令牌

Question

我遵循了如何使用Webpack进行代码分割的教程。

但是，在构建时，它无法识别内联import。

正常import例如然而，import join from 'lodash.join工作。

这个问题：Unexpected token import with Webpack and Babel要求同样的事情，但仍然没有答案。因此，我创建了一个可以复制的存储库，以更直接的方式观察行为。

Git存储库：

git clone https://github.com/jpls93/code-demo && cd code-demo && git checkout unexpected-token-import &&npm install &&npm install && npm run build

Gif演示：

错误讯息：

Answer 1

您需要将插件babel-plugin-syntax-dynamic-import添加到您的babel配置中。

我已经分配了您的回购并提交了修复程序。请参阅commit。

但是当你使用async和await时，你会遇到另一个错误。

当你webpack.config.js中的babel配置正在使用babel-preset-env时，默认是编译最后两个版本的浏览器（包括IE 10）。

因此，您需要为要支持的浏览器配置babel配置并添加babel-polyfill。我committed使用babel-polyfill和babel-preset-env中的默认浏览器预设快速修复了debug。我已打开，以便您可以看到正在使用的babel插件。

babel-plugin-transform-async-to-generator

您也可以使用babel-preset-env来支持异步。但我发现使用配置更好，因此您可以尽可能使用本机浏览器代码。

Answer 2

答案：

// package.json
 "devDependencies": {
+ "babel-plugin-syntax-dynamic-import": "^6.18.0",

// webpack.config.js
 options: {
   presets: ["env"],
+  plugins: ["syntax-dynamic-import"]
 }

谢谢@andykenward。看到你的fork。