速習 Webpack シリーズ babel ページの正誤表
速習 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 を適用させる。 コレで動作する。