モジュールバンドラーとトランスパイラ

モジュールバンドラー

JavaScriptは細かく分けて開発を進めた方が効率的で生産性も上がる。
ただ、本番環境で実行するときはファイルを細分化する必要はない。
むしろ、読み込み回数が増えてパフォーマンスが悪くなる。
そこで、 開発はファイルを分けて行い、本番用にビルドするときに１つのファイルにまとめるという思想を実現するため、
jsファイルやcssファイル等をまとめてくれるモジュールバンドラーが作られた。

パッケージ管理システムはパッケージの依存関係を解決してくれるものだが、
モジュールバンドラーも同様に、モジュールの依存関係をファイルを一つにまとめるときに依存関係を解決する。

現在主流のモジュールバンドラーはWebpack。

トランスパイラ(コンパイラ)

モジュールバンドラーが複数のファイルを一つにまとめてくれるものならば、
トランスパイラはJavaScriptの記法をブラウザで実行できる形に変化してくれるもの。
ECMAScriptは毎年仕様が変わり、バージョンが変わりますが、それに全てのブラウザが対応しているわけではない。
ex)ES6はIE(InternetExplore)でエラーが出て全然動かない。。。
そこで、トランスパイラを使用すると、新しい記法で書かれたJavaScriptを古い記法（多くのブラウザで実行できる形）に変換してくれます。
ReactのJSX記法と呼ばれる特殊なルールの書き方も、ブラウザで認識してくれるようになる。

現在主流のトランスパイラはBabel（旧 6to5）。

ビルド

トランスパイラやモジュールバンドラーを使って、コードを異なる本番環境（localでなくWebのChrome,IE）でも動くようにする。
ex)reactで作ったプロジェクトのpackage.json内のスクリプト buildで

npm run build

と叩く

余談

これから主流になるであろうビルドツール Vite

これからフロントエンドで主流となると言われているビルドツールにViteというものがある
Vue.jsの開発者であるEvan You氏が中心となって開発
Webpackよりも圧倒的に高速である