前説
ES2015でのフロントエンド開発時に以下のような経験をしたことはないでしょうか？
- その場でルールを決めているため、一人開発時でも書き方に開発が進むに連れてズレがでる
- 雰囲気でJavascriptを書いているため書き方が揃っていない
- 型安全がない無法地帯
- 各種ツールを導入したのはいいが、チーム内で使われずにクズコミットが行われる
上記の山積した問題についてツール導入＋自動化をおこなったので、その手順をまとめました。
使用するパッケージ(2017年9月20日時点)
※、各パッケージの仕様についてはリンク先参照
今回のプロジェクトについて
今回はReactは使用せず、シンプルなExpressサーバをターゲットとしています。
React導入時にはBabel及びESLintの設定・導入パッケージについて適宜変更して下さい。
実行環境
OS: Windows10
Node: 8.5.0
開発ツール: VS Code 1.16.1 (拡張機能： ESLint、prettier-vscode)
導入方法
以下の手順にてパッケージ導入・設定ファイルを作成
1. Babel
プロジェクト作成後、以下のコマンドにてパッケージを追加
yarn add -D babel-cli babel-core babel-eslint babel-plugin-transform-flow-strip-types babel-preset-env babel-preset-es2015
パッケージを追加後、プロジェクト直下に「.babelrc」ファイルを作成。以下の設定を追加。
{
"presets": [
[
"env",
{
"targets": {
"node": "current",
"modules": false,
"loose": true
}
}
],
"es2015"
],
"plugins": ["transform-flow-strip-types"]
}
※、トランスパイル対象がnodeのみになっているので、ブラウザをターゲットとする場合は適宜追加してください
2. ESLint
以下のコマンドにてパッケージを追加
yarn add -D eslint eslint-config-airbnb-base eslint-config-prettier eslint-plugin-flowtype eslint-plugin-import
npmの場合、「eslint --init」が使えますが、yarnだと追加パッケージにインストール時に不具合がでるため、手動で設定ファイルを作成します。
プロジェクト直下に「.eslintrc.json」作成後、以下の設定を追加
{
"parser": "babel-eslint",
"extends": [
"airbnb",
"prettier",
"prettier/react"
],
"plugins": [
"prettier"
]
}
3. flow
以下のコマンドにてパッケージを追加
yarn add -D flow-bin flow-typed
パッケージ追加後、以下のコマンドにてflow-typedの定義ファイル取得
yarn flow init
yarn flow-typed install
init時に作成された「.flowconfig」に以下の設定を追加
[ignore]
.*/node_modules/.*
[include]
[libs]
./flow-typed
[options]
4. git関連
以下のコマンドにてパッケージを追加
yarn add -D husky lint-staged pre-commit
パッケージ追加後、「package.json」に以下の項目を追加
"lint-staged": {
"subTaskConcurrency": 1,
"linters": {
"*.js": [
"prettier-eslint --write",
"eslint",
"git add"
]
}
},
プロジェクト直下に「.gitignore」作成後、以下の設定を追加
# See http://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
node_modules
flow-typed
# testing
# production
dist
# misc
.DS_Store
5. express
以下のコマンドにてパッケージを追加
yarn add -D nodemon
yarn add express compression morgan serve-static
プロジェクト直下に「lib」、「public」フォルダ作成後、以下のファイルを追加
// @flow
import express from 'express';
import expressWs from 'express-ws';
import morgan from 'morgan';
import compression from 'compression';
import serveStatic from 'serve-static';
const app = express();
app.set('port', process.env.PORT || 3000);
app.use(morgan('dev'));
app.use(compression());
app.use(serveStatic(`${__dirname}/public`));
app.get('/', (req, res, next) => {
console.log('get route', req.testing);
next();
});
app.listen(app.get('port'), () => {
console.log('Server listening on port %s', app.get('port'));
});
add git
6. npm script追記
1～5の設定完了後、「package.json」に以下の項目を追加
"scripts": {
"build": "babel lib -d dist",
"dev:srv": "nodemon lib/index.js --exec babel-node --presets=env",
"prd:srv": "node dist/index.js",
"precommit": "lint-staged && flow check"
},
※、各コマンド補足
| コマンド | 実行内容 |
|---|---|
| build | libフォルダのjavascriptをdistにトランスパイル |
| dev:srv | 開発用サーバ起動。nodemonで変更時にトランスパイルして再起動 |
| prd:srv | 本番用サーバ起動。トランスパイルしたファイルで実行 |
| precommit | パッケージ「pre-commit」用コマンド。コミット時に記載されたコマンドが実行される。今回ではpackage.jsonに記載された「lint-staged」と「flow check」が実行され、どちらかでエラーが有った場合、コミットが行われない |
まとめ
とりあえず、書き出したが指摘があれば追記を行う予定