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 の変換を行う。

Tags: webpackbabeltypescriptreactjs

関連記事