速習 Webpack シリーズにある babel の項目が古くなっていたで、正誤表というか最新版(2019/03/22版)を解説してみる。
第三者の僕が書くのも申し訳ないと思うけど……。
Babel
誤)npm install --save-dev webpack webpack-cli babel-core babel-loader babel-preset-env
↓
正)npm install --save-dev webpack webpack-cli @babel/core babel-loader @babel/preset-env
誤)
(略)
use: [
{
// ローダー名を設定
loader: 'babel-loader',
options: {
// 1. プリセットの設定
presets: [
[
// ES2015以降のコードを変換
'env',
// モジュール構文の変換を無効
{'modules': false}
]
]
}
}
],
(略)
↓
正)
(略)
use: [
{
// ローダー名を設定
loader: 'babel-loader',
options: {
// 1. プリセットの設定
presets: [
[
// ES2015以降のコードを変換
'@babel/preset-env',
// モジュール構文の変換を無効
{'modules': false}
]
]
}
}
],
Babel + ESLint のページを実行するためのパッケージ
残念ながら Babel + ESLint のページの解説が雑だったので動かすために以下のパッケージを入れる。
$ npm install -D webpack webpack-cli @babel/core @babel/preset-env babel-loader eslint eslint-loader babel-eslint
babel-eslint の適用
.eslintrc.json ファイルを以下のように修正
{
"parser": "babel-eslint",
"env": {
"browser": true
},
"rules": {
}
}
とりあえず parser に babel-eslint を適用させる。 コレで動作する。