EagleLand

Babelとの併用を止めてTypeScriptビルド一本化へ

Published at 2017-05-01

最近は社内で Web おじさん業をやる傍ら、プロジェクトコードなども少し触っている。最近では FRESH! でアレコレしていて、クライアントサイドとサーバーサイドの改善もやったり。

ふたつ👆ともよくまとまっているので、未読の人は是非読んでください。

あとは開発環境周りもコツコツ直していたりする。Web クライアントの構成要素 - Client Side of █████fresh.tv で触れられている通り、TypeScript と Babel の多段ビルドで運用していた。型を使いたいモチベーションと JSX をコンパイルする事情が合わさってのことだが、最近では TypeScript が JSX に対応しているので、TypeScript ビルドへの統一に踏み切った。

JavaScriptをTypeScriptでビルドする

TypeScript と JSX それぞれの JavaScript へのコンパイルに分かれていて、設定が2箇所に分かれている気持ち悪さと、ビルド結果を Browserify でバンドルする都合で双方の待ち合わせがあったりなどの、ビルド処理の複雑化を招いていた。TypeScript ビルドへ統一することでそれらが一気に解消された上に、ビルド時間への短縮にも繋がった。

対応内容としては単純で、babel でビルドしていた .js ファイルを代わりに tsc でビルドするだけ。ここで JavaScript ファイルのコンパイルを有効にするため tsconfig.json に "allowJs": true を入れる。JSX が記述されている .js は順に .tsx に変更していかなければならないが、ほとんど何も変更せずに今まで動作しまっている。

JavaScript のスーパーセットというのと、JSX サポートが最高ということに尽きそう。

eslint/typescript-eslint-parser

FRESH! では ESLint を採用しており、自家製の openfresh/eslint-config-fresh と openfresh/eslint-config-fresh-react をルールにしている（ほとんど xo ベースだけど）。tslint も2分くらい検討したが 、公式の eslint/typescript-eslint-parser が動いてくれたのでこちらを使うことにした。

eslint-config-fresh で parser に babel-eslint を指定していたところ、プロジェクトの .eslintrc で typescript-eslint-parser を指定しても先に babel-eslint が参照されてしまうようでうまく ESLint が動作しなかった（これが仕様なのかどうかはちゃんとに調べていない…）。これは eslint-config-fresh 側で parser を指定しない方向で対処した。

タイトルと URL をコピーしました