モジュールバンドラとは

この記事は

モジュールバンドラに関してわかってるようで何もわかってなかったので基本的なことを整理してまとめたメモ。

モジュールバンドラとは

モジュールバンドラとは文字通りモジュールをバンドルするもの。

モジュールとは

変数や関数をまとめたもの。モジュールシステムが導入されたJavaScriptでは、処理内容に応じてファイルにモジュールを分けて管理することができ、１つのモジュールは１つのJavaScriptファイルに対応する。このモジュールシステムには、Node.js環境下のCommonJSにて組み込まれているモジュールシステムや、2015年にECMA Script2015のモジュールシステムであるES Modulesなどいくつかの形式がある。

モジュールをバンドルするとは

複数のJavaScriptファイル（モジュール）を一つにまとめること。ただ単にまとめるわけではなく、モジュール構文を解析し依存関係を解決しながら一つにまとめて実行できる形にしてくれる。依存関係を解決するというのは、モジュール間の依存関係が正しく解決され、各モジュールが必要な順番で読み込まれるようにまとめること。
ちなみにモジュールバンドラには依存関係の解決意外にもMinify（コードないの不要な改行やインデントなどを削除し、軽量化する）、Tree Shaking（デッドコードの除去）、コード分割、キャッシュ管理... など様々な最適化とかも実施してくれる。

モジュールシステムの歴史的な流れ

JavaScriptにモジュールシステムが導入される前は、ファイルを分割するとscriptタグで読み込み、読み込まれたものはグローバル空間に展開されていた。
2009年に開始されたServerJSプロジェクトで、サーバーサイド用のNode.JS環境で動くCommonJSが開発され、モジュールシステムが組み込まれることとなった。Node.jsはモジュールバンドラを持つため、JavaScriptでサーバーサイド開発をする際はファイルをモジュールとして扱えるようになり、コードの分割とともに名前空間を分離できるようになった。
しかしブラウザではJavaScriptはグローバルコンテキストで動作し、同じ名前の変数や関数が衝突するという問題があり、フロントエンドでもCommonJS（モジュールシステム）を使いたいというニーズが生まれた。これを解決するために、Webブラウザで実行されるコードの変数や関数などをモジュール単位で管理し、衝突を避けることができるモジュールバンドラとしてBrowserifyが活用されるようになっていった...

主なモジュールバンドラ

Browserify

CommonJSモジュールをブラウザ用に変換するモジュールバンドラ。当初はNode.jsモジュールをブラウザで動作させることが主な用途だったが、次第にモジュール間の依存解決を行いながら複数のファイルをひとつにまとめる「モジュールバンドラ」としても広く使われるようになった。

Webpack

Browserifyより後発のモジュールバンドラ。ES Modules、CommonJS、AMDなどさまざまなモジュール構文をサポートするモジュールバンドラで、異なるモジュール構文が混在していても自動で適切に解釈し、依存関係を解決してバンドルする。

Vite

Vue.jsの開発者Evanさんによって2020年に開発されたモジュールバンドラ。ビルド、ホットリロードが早く開発時の待ち時間が短くなる。Nuxtのモジュールバンドラとして使用されている。