LoginSignup
6

More than 5 years have passed since last update.

VuePress で babel を使う

Last updated at Posted at 2018-04-26

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"],
            })
    },
}

  1. 執筆時点の話。何故か Stage 3 Dynamic Imports はサポートしているようだ。 

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6