VuePress で babel を使う
VuePress では高速な buble が使われているが、文法に async, await や Generator などが使えなくて困るので、一般的な babel に変更する。
インストールと設定
yarn add --dev @babel/core @babel/preset-env @babel/plugin-syntax-dynamic-import
yarn add --dev babel-loader@^8
1
2
2
WARNING
babel-loaderのバージョンは 8 以降が必要。
.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": ["last 2 versions"]
},
"modules": false
}
]
],
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
TIP
import文を使うには Dynamic Import が必要。
"modules": false を指定すると webpack の Tree Shakeing で参照されていないコードがバンドルされなくなる。
docs/.vuepress/config.js
module.exports = {
chainWebpack: config => {
const js = config.module.rule('js')
js.uses.delete('buble-loader')
js.use('babel-loader').loader('babel-loader')
const pug = config.module.rule('pug')
pug.use('pug-plain-loader').loader('pug-plain-loader')
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10