EDIT(2018/05/26): 現在の VuePress ではデフォルトで Babel を使っているようです。そのため、以下の設定は不要になりました。
VuePress では Vue.js のコンポーネントをビルドする際、デフォルトで Buble を使って変換しています。しかしながら、Buble は Async 関数など ES2017 以降の構文をサポートしていない 1 ため、コンポーネントで最近の構文を使うとビルドエラーになってしまいます。
Buble の代わりに Babel を使うことで、この問題を解決できます。
-
@babel/plugin-syntax-dynamic-import
は必須でした。 - webpack-chain を使っているようです。
必要なパッケージを追加:
$ npm install --save-dev babel-loader@^8.0.0-beta.2 @babel/core @babel/preset-env @babel/plugin-syntax-dynamic-import
設定ファイル:
.vuepress/config.js
"use strict"
module.exports = {
/* 省略 */
// Webpack の設定を上書きする
chainWebpack(config) {
const jsRule = config.module.rule("js")
jsRule.uses.delete("buble-loader")
jsRule
.use("babel-loader")
.loader("babel-loader")
.options({
presets: [
[
"@babel/preset-env",
{
modules: false,
targets: { browsers: ["last 2 versions"] },
useBuiltIns: "usage",
},
],
],
plugins: ["@babel/plugin-syntax-dynamic-import"],
})
},
}
-
執筆時点の話。何故か Stage 3 Dynamic Imports はサポートしているようだ。 ↩