はじめに
できるだけ余計なものを使わないで、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を書く
{
(前略)
"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 watchとnpm run bsを同時に実行する。
npm run cp-html
srcの中にあるhtmlをdist直下にコピーする。
手順4. ディレクトリとファイルを作る
Finderかなにかでsrcフォルダを作る。
├── src
├── html
│ └── index.html
└── js
├── main.js
└── piyo.js
htmlファイルは、webpack2でアウトプットするjsファイルを読み込むだけ。
<!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にビルドしてもらいたいコードを書く。
import piyo from './piyo';
console.log(piyo);
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を書く
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を書く
{
"presets": [
"stage-0",
"es2015",
"react"
]
}
babel関連の設定。
手順7. .eslintrcを書く
{
"extends": "airbnb",
"env": {
"browser": true
}
}
eslintはairbnbのルールを使うことを宣言している。
このファイルを以下の具合に変更すればルールは優しくなる。
{
"extends": "airbnb",
"env": {
"browser": true
},
"rules": {
"eqeqeq": 1,
"prefer-const": 0,
}
}
上記のように追記すれば、eqeqeqの設定により、厳密等価演算子を使わなくてもエラーにはならず、警告されるだけになります。
prefer-constの設定によって、再代入されない変数にconstを使わなくてもエラーにならないようになります。
あくまで今回取り上げたルールは一例で、その他にもいっぱいルールはあります。ルールについて知りたければ他の記事を参照してください。
手順8. BrowserSyncの設定を書く
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と.babelrcとbs-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で使いたい人が少しでも参考になればいいなと思って書きました。
動作しないとか、ここの説明が間違ってるとかあるとかあればご一報頂けると幸いです。