ワイ、そして IT ときどき何か。

日々のとりとめのない記録

速習 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 を適用させる。 コレで動作する。