JavaScript
es6
webpack
ESLint

webpack2.2.1でESLintを使って構文チェックができるまでの手順

More than 1 year has passed since last update.


はじめに

できるだけ余計なものを使わないで、webpack2.2.1でESLintを使えるようにする手順を書きました。

部分的にでも誰かのためになったら嬉しいです。


つくるもの


  • ES2015を使って書き、babelでトランスパイルする。

  • ビルド過程で構文をチェックしてもらう。(ルールはairbnbで。)

  • ESLintがエラーを吐いたらビルドは中断してもらう。

  • ESLintで引っかかる軽微なミス(スペースの有無等)はfixオプションによって自動で修正してもらう。

  • ビルドに成功したかどうか通知してもらう。

  • jsを編集・保存したら自動でブラウザを更新してもらう。


ディレクトリ構成

├── dist

│   ├── index.html
│   └── js
│   └── bundle.js
├── package.json
├── node_mosules
│   ├──(略)

├── src
│   ├── html
│   │   └── index.html
│   └── js
│   ├── main.js
│   └── piyo.js
└── webpack.config.babel.js


以下の手順を踏むとできあがるもの

https://github.com/aq41571/webpack_eslint_minimum

※ mac OS 10.11.6 にて作成しました。他の環境で動作チェックしていないので、動かないかもしれないです。


手順1. 適当なディレクトリを作ってpackage.jsonを作る

まずは適当なディレクトリを作る。


そこにターミナルで移動した後、

npm init

色々訊かれるけど、エンターキーをポチポチする。


手順2. npmモジュールのインストール

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 babel-register browser-sync eslint eslint-config-airbnb eslint-loader eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react webpack webpack-notifier

ターミナルで上記をコピペする。


一行でごちゃごちゃしていますが、内容は以下のnpmモジュールになってます◎


  • babel-core

  • babel-loader

  • babel-preset-es2015

  • babel-preset-react

  • babel-preset-stage-0

  • babel-register

  • browser-sync

  • eslint

  • eslint-config-airbnb

  • eslint-loader

  • eslint-plugin-import

  • eslint-plugin-jsx-a11y

  • eslint-plugin-react

  • webpack

  • webpack-notifier

最小限のつもりですが、不要なものがあればご一報頂けると嬉しいです。


手順3. run scriptsを書く


package.json

{

(前略)
"scripts": {
"build": "webpack --progress --colors",
"clean": "rm -rf dist",
"watch": "webpack -d --watch",
"bs": "browser-sync start --config bs-config.js -s ./dist --ss ./dist --files='./dist/**/*.html, ./dist/js/**/*.js'",
"dev": "npm run watch & npm run bs",
"cp-html": "cp -rf ./src/html/ ./dist/"
}
}

scripts解説


npm run build

ビルドする

npm run clean

dist以下を消去

npm run watch

srcファイルを監視して差分があればビルドする。

npm run bs

ローカルサーバを立ち上げてdist以下の各ファイルに差分があればリロードする。

npm run dev

npm run watchnpm run bsを同時に実行する。

npm run cp-html

srcの中にあるhtmlをdist直下にコピーする。


手順4. ディレクトリとファイルを作る

Finderかなにかでsrcフォルダを作る。

├── src

   ├── html
   │   └── index.html
   └── js
   ├── main.js
   └── piyo.js

htmlファイルは、webpack2でアウトプットするjsファイルを読み込むだけ。


index.html

<!DOCTYPE>

<html lang="ja">
<head>
<title>ESLint test</title>
</head>
<body>
<h1>ESLint test</h1>
<!-- ▼webpack.config.babel.jsでアウトプットに指定したファイル名 -->
<script src="./js/bundle.js"></script>
</body>
</html>

jsファイルの中身は自分がwebpackにビルドしてもらいたいコードを書く。


main.js

import piyo from './piyo';

console.log(piyo);



piyo.js

const sum = (x, y) => x + y;

const hoge = 5;
const fuga = 3;

const piyo = sum(hoge, fuga);

document.getElementsByTagName('body')[0].style.background = '#cfc';

export default piyo;



手順5. webpack.config.babel.jsを書く


webpack.config.babel.js

import webpack from 'webpack';

import WebpackNotifierPlugin from 'webpack-notifier';

// jsというタスクを定義します。
const js = {
entry: {
// どのjsを読み込むかという宣言。今回はmain.jsを読む。
module: `${__dirname}/src/js/main.js`,
},
output: {
path: `${__dirname}/dist/js/`,
// distに吐き出されるファイル名はbundle.jsになるという宣言
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
},
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'eslint-loader',
options: {
// 自動修正させる
fix: true,
// eslintでエラーだしたらビルドを中断する
failOnError: true,
},
},
],
},
plugins: [
// 圧縮
new webpack.optimize.UglifyJsPlugin(),
// 通知
new WebpackNotifierPlugin(),
],
};

// webpackはjsというタスクを実行してくださいね。
module.exports = [js];



手順6. .babelrcを書く


.babelrc

{

"presets": [
"stage-0",
"es2015",
"react"
]
}

babel関連の設定。


手順7. .eslintrcを書く


.eslintrc

{

"extends": "airbnb",
"env": {
"browser": true
}
}

eslintはairbnbのルールを使うことを宣言している。


このファイルを以下の具合に変更すればルールは優しくなる。


.eslintrc(ルール優しくする版)

{

"extends": "airbnb",
"env": {
"browser": true
},
"rules": {
"eqeqeq": 1,
"prefer-const": 0,
}
}

上記のように追記すれば、eqeqeqの設定により、厳密等価演算子を使わなくてもエラーにはならず、警告されるだけになります。


prefer-constの設定によって、再代入されない変数にconstを使わなくてもエラーにならないようになります。

あくまで今回取り上げたルールは一例で、その他にもいっぱいルールはあります。ルールについて知りたければ他の記事を参照してください。


手順8. BrowserSyncの設定を書く


bs-config.js

module.exports = {

ui: {
port: 3001,
weinre: {
port: 8080,
},
},
port: 3000,
ghostMode: false,
logLevel: 'info',
logPrefix: 'BS',
logConnections: false,
logFileChanges: true,
logSnippet: true,
rewriteRules: false,
browser: 'default',
notify: true,
reloadDelay: 0,
reloadDebounce: 0,
codeSync: true,
timestamps: true,
};

https://browsersync.io/docs/

BrowserSyncはあんまり良く分かってないけど、ここに解説ありますね。


手順9. .eslintrcと.babelrcとbs-config.jsを設置する

.eslintrc.babelrcbs-config.jsを書き終わったら、全てプロジェクトのルートディレクトリに設置する。(ディレクトリ構成参照)

これでビルドさせる準備が整いました🎉


手順10. htmlをdistにコピーする

npm run cp-html

htmlをdistの中に入れるために実行する。


手順11. npm run dev する

npm run dev

手順通りに踏んだ人は背景がライトグリーンになってConsoleに8が表示されているはずです。

consoleの8はpiyo.jsで書いたhoge(5) + fuga(3)の計算結果ですね。


つまり、main.jsがpiyo.jsをimportすることに成功していますね。


おしまい

できる人からしたら「こんなもの作ってどうするんだ」というようなモノなんだけど、ESLintをwebpackで使いたい人が少しでも参考になればいいなと思って書きました。


動作しないとか、ここの説明が間違ってるとかあるとかあればご一報頂けると幸いです。