TypeScriptプロジェクト構成案
生のJavaScriptで最後まで書いてしまった Uber売上変換ツールをTypeScriptで書き直すために、TypeScriptのプロジェクト構成について調査したところ、それだけで一本記事にした方が良さそうだったので。
最終的にはこんな感じになりました。事前に必要な環境はちゃんとNode.jsだけにしてあります。（Windowsでしか確認してないので、他のOSだとライセンス更新コマンドあたりが動作しないかもしれませんが・・・）
package.json
Node.js（※バージョン情報）があれば、npm installで環境構築完了。
npm startでデバッグしながら開発。
（デフォルトのポートが8080なので、Tomcatと競合するのに注意）
ライブラリを更新したらnpm run licenseで権利情報も更新。
最後はnpm run build。
tsconfig.json
tsconfig.json内の「target」と「module」は両方「es2020」にしました。
資料を見た限り、es2015にするのがよくある選択肢なのかな？と思いましたが、売上変換ツールで使っているasync系が2017の機能のため、できるだけ新しくすることに。まあ2020くらいで良いか、という感じです。あんまり新しすぎるとブラウザが対応してなかったりしますし。
moduleを「CommonJS」にすると「Tree Shaking」という不要なコードを削除する機能が使えなくなるため、避けた方が良いそうです。
webpackの設定
あと、clean-webpack-pluginを使ってる人もいるようなのですが、「clean: true」で充分だったため、使ってません。
外部ライブラリの権利情報
npmで外部ライブラリを簡単にインストールできるのは良いのですが、権利情報をどう管理するか調べた結果、license-reportが現状は良さそうだったので採用。不要な列を削除して、表示はこんな感じ。
・・・うーん、微妙。「link」の列くらいちゃんとリンクにして欲しい。でもそれを設定する方法はなさそうで、もちろんライセンス情報をjsonに出力して自分でHTMLに表示すれば解決できるんですが・・・、まあこれでも良いや、めんどくさいし。一応権利元の表示はできてるんだからオッケー、という感じです。
コマンド一発で更新できるのはお気に入りです。
TypeScriptへの感想
結局は型もコンパイルも必要、ということだと思います。業務レベルでプログラムを書くならば。
お遊びなら何でも良いですけどね。
今後の課題
- 自動テスト
- third-party-licenses.htmlのブラウザキャッシュ対策
（意外と難しそうだったので保留中・・・、ハッシュ値を付与するのはできるが、そうするとリンクが壊れる。何か良い方法があるのかも）
Youtube版は↓
コメント
コメントを投稿