TypeScript + Webpack4 な素振り環境を作った

今さらながら TypeScript で静的型付けに入門したくなったので、サクッと素振り環境を作ってみた。

Tl;dr

cheezenaan-sandbox/frontend_boilerplate: Docker + Webpack

docker-compose run --rm yarn install
docker-compose up

ゴール

ローカル PC に依存せずに TypeScript を書いてコンパイルできる環境を作る
- node のバージョン違いで yarn install 落ちたりつらい
- yarn コマンドも Docker コンテナ上で叩く(Mac 上で Docker 動かすと I/O 遅くてつらいけど)

Webpack 4

docker-compose run --rm node yarn add -D webpack webpack-cli webpack-serve

webpack-dev-server の後継らしい webpack-serve を導入してみた。

TypeScript さえビルドできればいいので余計な Loader とかプラグインを入れてないからかもしれないけど webpack.config.js がわりとスッキリしていてよい。

Introduce TypeScript

docker-compose run --rm node yarn add -D typescript ts-loader
docker-compose run --rm yarn tsc --init

生成された tsconfig.json で Strict Type-Checking Options と Additional Checks をすべて有効にしておく。

Introduce Linter / Formatter

TSLint を使うか ESLint に TypeScript のパーサーを突っ込んで使うか選択肢があるらしいんだけど、 ESLint のほうが設定できるルールが多いらしいので後者を採用(要調査)。

Vue.js 向けの ESLint プラグインを公式が用意しているのも、なにげに評価高い。

vuejs/roadmap: 🗺️ Roadmap for the Vue.js project

ESLint

docker run --rm node add -D eslint eslint-conifig-airbnb-base eslint-plugin-import typescript-eslint-parser eslint-plugin-typescript

React(JSX) 抜きで普遍的に使える構成にしたかったので eslint-config-airbnb ではなく eslint-config-airbnb-base を導入した。 eslint-plugin-typescript はおまけ。

Prettier

docker run --rm node add -D prettier eslint-config-prettier eslint-plugin-prettier

問答無用で入れる。 ESLint と併存させるとより幸せになれる。

eslint-config-prettier は ESLint 上で Prettier と競合するフォーマット関連のルールを無効にしてくれる
eslint-plugin-prettier は Prettier のルールを ESLint が読み込んで、 ESLint 上で Prettier を実行してくれる

.eslintrc

// .eslintrc
{
  "env": {
    "browser": true
  },
  "extends": ["airbnb-base", "plugin:prettier/recommended"],
  "parser": "typescript-eslint-parser",
  "plugins": ["typescript", "prettier"],
  "rules": {
    "no-undef": "off",
    "no-unused-vars": "off",
    "import/extensions": "off",
    "import/no-unresolved": "off",
    "import/prefer-default-export": "off",
    "prettier/prettier": "error"
  }
}

prettier 以外に rules に追加しているのは以下:

"no-undef": typescript-eslint-parser で未対応なので無効化
"import/extensions", "import/no-unresolved": import するときに .ts および .tsx を解釈してくれないので無効化
"import/prefer-default-export": 1 ファイルで 1 つだけ export const するときに不便なので消した