Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

webpack4.xでjsをビルドする前にeslintで構文チェックをする

参考にさせて頂いたページ

eslint-loaderについて

.eslintrcについて

今日の環境

  • Windows10
  • node 8.11.1
  • npm 5.8.0
  • webpack 4.8.1

プロジェクトディレクトリを作成

mkdir webpack_4_eslint_introduction

npm init する

npm init

全てそのままenterを押してデフォルト値が設定されたpackage.jsonが生成されました。

グローバルにインストール

npm install -g webpack webpack-cli eslint

プロジェクトにインストール

npm install --save-dev eslint eslint-loader 

今回webpack_4_eslint_introductionディレクトリ内に作成するディレクトリ構造とファイル

  • .eslintrc.json
  • package.json
  • package-lock.json
  • webpack.config.js
  • node-modules/*
  • src/index.js
  • dist/bundle.js

webpack.config.jsの作成とその記述内容

module.exports = {
  mode: 'production',
  // entry point
  entry: './src/index.js',
  // 出力するパスは絶対パスで書きます
  output: {
    path: `${__dirname}/dist`,
    filename: 'bundle.js'
  },
  // webpack4はlordersではなくなりました
  module: {
    rules: [
      // 拡張子.jsのファイルに対する設定
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'eslint-loader',
          },
        ]
      },
    ]
  },
}

.eslintrc.jsonの作成とその記述内容

eslint:recommendedをextendして、セミコロンを忘れるとエラーになるルールを追加で設定しています。

{
    "extends": ["eslint:recommended"],
    "plugins": [],
    "parserOptions": {},
    "env": {"browser": true},
    "globals": {},
    "rules": {
        "semi": "error"
    }
}

./src/index.jsの作成とその記述内容

参考にさせていただいたページに倣って以下の通りです。
二行目は構文チェックでエラーになるようにセミコロンを忘れた状態です。

function hello(name) {
    document.body.textContent = "Hello, " + name + "!"
}

hello("World");

webpackでビルドをしてみる

webpackコマンドでビルドします。

webpack

以下のようなエラーが表示されました。
./src/index.js の二行目の55文字目に semi のルールによるエラーがあることがわかります。

ERROR in ./src/index.js

/Users/motomichi/Desktop/webpack_4_eslint_introduction/src/index.js
  2:55  error  Missing semicolon  semi

✖ 1 problem (1 error, 0 warnings)
  1 error, 0 warnings potentially fixable with the `--fix` option.

エラーが表示されたので./src/index.jsを修正する

以下のように修正してみます。

function hello(name) {
    document.body.textContent = "Hello, " + name + "!";
}

hello("World");

もう一度webpackでビルドをしてみる

webpack

エラーが出ずに、./dist/bundle.jsが書き出されました。