JS / TS のモジュール分割の記事
JavaScript、TypeScriptのモジュール分割について整理してみた
読んだ。
なんというかこう、シンプルというか素朴というか、こういうところも細かく見ると知らないことがあるなというのがわかった。
まず import を使わない場合は script タグでそれぞれのファイルを読み込まないといけなくて、その読み込み順も自分で管理しないといけないし間違えたらバグの元になるというのは知っていた。が、 import を使ってもモジュールバンドラーを使ってバンドルしないと、 import のたびに HTTP リクエストが発生するというのは知らなかった。
import したファイルを HTTP リクエストで取得して読み込む必要があるからだろうか。意識したことがなかった。
TypeScript の、 namespace と reference path を指定する方法は知らなかった。これらを指定して tsconfig.json で "module": "amd" と書く。
トリプルスラッシュ・ディレクティブ | TypeScript 日本語ハンドブック | js STUDIO
また、 outFile を指定することで TypeScript 自体にあるバンドル機能を有効にできる。
ちなみに tsconfig.json の module はこんなことが書いてあった。
誤解しやすいがmoduleは、モジュールをCommonJS, ES Module形式で出力するかなどモジュールの構文のみについてのオプションなので、他のECMAScript構文とは関係ない。webpackやRollupなどの中でTypeScriptを扱っているなら、module: "ESNext" にしておくことでTree Shakingなどの最適化ができるという仕組み。
なるほど。
たぶん reference path を使うことはないと思うけど、知らないことだらけ。こういうのもあるんだなという感じで頭の片隅に置いておきたい。