webpack, babel, typescript, react のメモ。

Published: 2020/1/29

babel とは、いろんなタイプの js を別の js (commonjs など) に変換するためのツールである。
- babel は js を parse, transform, そして print する。
- babel は処理のそれぞれの工程に対して plugin により処理を追加できる。
- plugin をまとめたものを preset と呼ぶ。
webpack は module bundler である。
- webpack は、依存関係を持つリソースを module として抽象化する。
  - リソースを module として読み込む機構を loader と呼ぶ。
  - webpack は、 rule によってリソースファイルに対して利用するべき loader を決定する。
- webpack は module を依存関係によりかき集めて、配布用の asset を出力する。
typescript + react の場合には、 ts-loader と babel-loader が利用される場合が多い。
- webpack は ts-loader によって ts(x) リソースを js モジュールに変換する。
  - typescript には tsx 形式を js に変換する設定がある。
- webpack は babel-loader によって、 js to js の変換を行う。