最近TypeScriptの学習をしようと思い、何でもTypeScriptで作ってみている。今回はCLIツールを作ろうと思ったのだが、ビルド環境やeslint環境など考えることが結構あった。そこでTypeScriptでのCLIツールのプロジェクトサンプルを作りながら勉強してみた。
作成したのは https://github.com/shibayu36/typescript-cli-project 。 npm install -g shibayu36/typescript-cli-project
でtypescript-cli-projectというコマンドがインストールされ実行できるようになった。
このプロジェクトサンプル作成を通して学んだことをメモしておく。
参考文献
以下2つの文献が入門として非常に参考になった。この2つの文献を参考にしつつ、公式ドキュメントを追いかけながら作成していった。
- TypeScriptでCLIツールを作って、npmパッケージにする - Qiita
- TypeScriptでCLIツール作るやり方が全て載っていた
- 脱TSLintして、ESLint TypeScript Plugin に移行する - Qiita
- TypeScript環境でのeslintの設定に付いてわかりやすかった
ビルドの環境を整える
TypeScriptを使うのでビルドの環境を整える必要がある。tscだけでも出来ると思うが、今回はwebpackも使ってビルド環境を作ってみた。
インストールした時にコマンドを使えるようにする
package.jsonのbinで指定されたkeyがコマンド名、valueが実行ファイルとなる。指定するファイルはshebangを設定してないといけなそう。そのためbinディレクトリ以下には、shebangとビルドしたファイルをrequireするだけのファイルを作る。
eslintとprettierとvscode
コードを書く時に何も考えたくないので、lintもかけてフォーマットも自動で行われるようにする。
- .eslintrc.js
- overridesを使ってTypeScriptのファイルだけ
@typescript-eslint/parser
を使うようにしている - このようにすることで、jsのファイルなどがあってもうまくeslintが動く
- overridesを使ってTypeScriptのファイルだけ
- .eslintignore
- .prettierrc.js
- .vscode/settings.json
- VSCodeでのフォーマットではデフォルトのフォーマットではなく、eslintのfixが働くようにしている
まとめ
今回はTypeScriptでCLIツール作りをするためのプロジェクトサンプルを作ってみた。今度作るCLIツールはこのプロジェクト構成を使って作ってみたい。