コード分割のために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をバベルの設定に追加する必要があります。

私はあなたのレポをフォークして修正しました。 commitを参照してください。

しかし、asyncとawaitを使用しているときに別のエラーが発生します。あなたのwebpack.config.jsであなたバベル設定として

デフォルトはブラウザの最後の2つのバージョン（IE 10を含んでいる）のためにコンパイルすることですbabel-preset-envを使用しています。

サポートするブラウザーのベベル設定を構成し、babel-polyfillを追加する必要があります。私はcommittedbabel-polyfillとデフォルトのブラウザプリセットbabel-preset-envを使用して簡単に修正しました。私はdebugを有効にして、どのbabelプラグインが使用されているかを確認できます。

また、単に非同期をサポートするためにbabel-plugin-transform-async-to-generatorを使用することができます。しかし、babel-preset-envの設定をもっと使いやすくなっているので、できるだけネイティブのブラウザコードを使用することができます。

Answer 2

回答：@andykenward

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

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

感謝。 forkを見ました。