npm dependenciesを更新してGitHub Compare Viewのリンク付きでPRするツールを定期実行する - Islands in the byte stream
このci-npm-updateはTypeScript 2.0 (beta) で書いたので、TypeScript+NodeJSツールを開発するときのプロジェクト構成の一例としてざっと解説しておきます。
最近はRailsなどのウェブアプリのJSもnpmで管理するようになったため、そういう条件でNodeJSツールを開発することも増えてくることでしょう。
Table of Contents
- Table of Contents
- エディタ
- tsconfig.json
- TSLint
- Task Runner
- Visual Studio Code Tasks
- shrinkwrap
- 所感
- See Also
エディタ
Visual Studio CodeはさすがにTypeScriptサポートはしっかりしていて、次のようにTypeScriptの型定義にしたがって補完をだせます。補完の際に引っかかりを感じることもないですし、構文エラーの指摘なども迅速です。
ただし今回はTypeScript 2.0 betaを使いたいので、 npm install --dev typescript@beta で入れたtypescript language service*1を使うような設定が必要です。
今回は .vscode/settings.json に、以下のようなJSONを設定しました。
{ "typescript.tsdk": "./node_modules/typescript/lib/" }
vscodeで本格的にプログラミングするのが初めてなら、ざっとドキュメントも目を通しておくといいでしょう。
とりあえずvscodeで最初におぼえるべきショートカット (for Mac) は command + shift + p （コマンドパレット）です。これはIntelliJ IDEAでいうところの command + shfit + a で、エディタコマンドを検索して実行するためのものです。最初はショートカットを無理におぼえるのではなく、コマンドパレット経由で呼び出すのが楽だと思います。
tsconfig.json
tsconfig.jsonはTypeScript compiler (tsc) に与える設定です。これを適切に設定しておくと、引数なしでtsc(1)を起動してもよしなにビルドしてくれます。
リファレンス:
ci-npm-updateでの設定:
ci-npm-update/tsconfig.json at master · gfx/ci-npm-update · GitHub
またtsconfigを作るときにプロジェクトの構成と配布形式を意識することになります。
つまり、今回はnpm distとして配布するので、TypeScriptソースファイルは配布物に含めず、ビルドしたJSと型定義ファイル *.d.ts をパッケージに含めます*2。また開発中は度々ビルドしてJSと型定義ファイルを生成するので、その成果物をどこに置くかを決めます。
成果物はデフォルトだとTSファイルと同じディレクトリにおかれます。このへんは好みだと思うのですが、私はこの挙動を変えたかったので、以下のような構成にしました。
src/- TSファイル。npm distには含めないlib/- JSファイルと型定義ファイル。npm distに含める
そしてこれにしたがって outDir を設定します。
TSLint
コーディングスタイルを強制するツールです。
Visual Studio Codeのエクステンションを入れると編集中に報告してくれるのではかどります。
TSLint | Visual Studio Marketplace
なおtslintは "tslint:recommended" というプリセットがあるのですが、Visual Studio Codeのデフォルトのフォーマットルールだと警告をだす設定があり、一部変えています。なるべく奨励と銘打たれたスタイルで行きたいのですが、難しいものですね。
ci-npm-update/tslint.json at master · gfx/ci-npm-update · GitHub
Task Runner
今回はシンプルにしたかったし、TSファイルをビルドするだけなのでgulpやgruntは使ってません。そのかわり、npm scriptsを設定してコマンド一つでビルドできるようにしています。
ci-npm-update/package.json at master · gfx/ci-npm-update · GitHub
ビルドの際にtslintも通すようにしているので、たとえばmissing semicolonのよようなちょっとしたtslint違反でもビルドが通らないのですが、このへんは慣れれば減ってくるはずです。
Visual Studio Code Tasks
npm scriptsをvscodeから起動するために .vscode/tasks.json を設定しています。
リファレンス:
プロジェクトの設定:
ci-npm-update/tasks.json at master · gfx/ci-npm-update · GitHub
（このJSONにはコメントを書けるようだ…）
開発中よく使うのは command+shift+b のビルドコマンドでした。
shrinkwrap
このプロジェクトでは npm-shrinkwrap.json をコミットしていますが、プロジェクトのドッグフーディングのために入れているだけです。。普通のCLIツールやライブラリではこれは不要なので真似しないでください。
所感
TypeScript 2.0とその開発環境は非常に良く出来ていると感じます。もはやES5とは別物といっていいくらい快適ですし、ES2015とくらべても生産性（かけた時間に対する品質のよさ）が高いと思います。
ウェブアプリでもどんどん使っていきたい。
