【esbuild】npm-scriptsで複数のJSファイルを一つにバンドルする方法

esbuildというJavaScriptのビルドツールを使って複数のJSファイルを一つのファイルにバンドルする方法を解説いたします。

Node.jsのバージョン管理ツール「Volta」のインストール・導入方法・使い方を解説

【初心者】npm-scriptsの使い方、web製作・webデザイナー・コーダー向けに1番分かりやすく解説

INDEX

esbuildとは

esbuild公式

esbuildはと、高速かつ効率的なビルドを提供することを目指しているJavaScriptのビルドツールです。

近年のWeb制作ではJavaScriptを機能ごとにファイルを分割させるモジュール化がトレンドになっています。
モジュール化することでコードの再利用性や保守性を高めるのに役立ちます。

しかし、複数のJavaScriptファイルを読み込むと、ページの読み込み速度が低下する可能性があります。
そのため、公開時には複数のファイルを一つのJavaScriptファイルにまとめることで、読み込み速度を向上させることが一般的です。

こうした処理を行う際に、esbuildなどのビルドツールを使用すると、コードを効率的にバンドルしたり、トランスパイルしたりすることができます。
これにより、開発者はより効率的にJavaScriptの開発を行い、高速でパフォーマンスの良いウェブアプリケーションを提供することができます。

ビルドとは、ソースコードの元データを、実行可能な形式に適したフォーマットに変換するプロセスとして利用されます。
バンドルは、複数のファイルやモジュールを一つのファイルにまとめることであり、ウェブ開発では複数のJavaScriptやCSSファイルを一つにまとめてページの読み込みを高速化する意味で利用します。

プロジェクトフォルダを作成

それでは早速esbuildを使ってJSファイルをバンドルして見ましょう。
今回のサンプルは以下のディレクトリとファイルを進めていきますので、それぞれ適当なファイルの準備してください。

htdocs
└scripts/
  └index.js（modulesのjsファイルを読み込むjsファイル）
  └modules/（機能ごとに分割したjsファイル）
    └modules.js
    └modules2.js
└assets/
  └js
    └main.js（esbuilで自動生成）
└package.json（後で作成）

コマンドでディレクトリを作成する場合は以下の手順で行なってください。

VScodeなどのエディターに任意のディレクトリを開き、ターミナルを起動します。
その後下記のコマンドでフォルダの作成、カレントディレクトリの移動を行います。

mkdir htdocs
cd htdocs

プロジェクトフォルダに移動したら以下のコマンドでpackage.jsonを作成します。

npm init -y

JSのモジュールを作成

esbuildを使用する前にJSのモジュール（分割）の準備を行いましょう。

現在はES Modules（ECMAScript Modules）というJavaScriptのモジュールシステムを使ってファイルを分割することが一般的です。

ES Modules（ECMAScript Modules）

ES Modules（ECMAScript Modules）は、JavaScriptのモジュールシステムの標準仕様です。
JavaScriptのコードを複数のファイルに分割し、それぞれのファイルで定義された関数や変数を他のファイルから使えるようにする仕組みです。
ES Modulesを使うと、コードを整理し、再利用性を高めることができます。

モジュールファイルの作成

今回は以下のようにmodulesディレクトリに2つのJSモジュールファイルがある前提で解説しますので。
それぞれ適当なファイルを作成してください。

htdocs
└scripts/
  └index.js（modulesのjsファイルを読み込むjsファイル）
  └modules/（機能ごとに分割したjsファイル）
    └modules.js
    └modules2.js

モジュールの定義

それではモジュール化したいJavaScriptファイル内で、export宣言を使用し、関数を定義します。
これでモジュール化が完了です。

export function sample1() {
  console.log("sample1です")
}

モジュールのインポート

モジュール化したJavaScriptファイルを使用する場合は、import宣言を使用してそのモジュールファイルをインポートします。
以下のようにindex.js内でmodules.js内で宣言した関数をimportの中に記載し、モジュールファイルのパスを指定して、再度関数を呼び出して使用します。

import { sample1 } from "./modules/_modules"
sample1()

これでmodules.jsで定義された関数をindex.jsで呼び出し使用することができるようになりました。
以上の手順で、もう一ファイルJSのモジュールファイルを作成してくだいさい。

エントリーポイント

ES Modulesにおいて、他のモジュールをインポートし、必要な処理を実行するための読み込み用のファイルをエントリーポイントと言います。
今回の場合index.jsがエントリーポイントとになります。

npm-scriptsでJSをバンドル

それではモジュールの準備が整ったので、実際にesbuildを使って複数のjsファイルをバンドルしてみましょう。

esbuildをインストール

まず最初に以下のコマンドでesbuildをインストールします。

npm i -D esbuild

esbuild公式

npm-scriptsの設定

package.jsonのscriptsフィールドにバンドル用のスクリプトを追加します。

scripts/index.jsの箇所にエントリーポイントとなる、バンドルするメインのJavaScriptファイルを指定します。
--outfile=にバンドルされたファイルの出力先をファイル名をつけて指定します。

--bundleは指定したエントリーポイントのJSファイルをバンドルして単一のファイルにまとめるためのオプションです。

"scripts": {
   "js": "esbuild scripts/index.js --bundle --outfile=assets/js/main.js"
}

esbuildの主なオプションは以下になります。
その他のオプションは後半で解説してきます。

オプション	概要
`--bundle`	バンドルの機能を有効にする（このオプションの左側にエントリーポイント、右側にバンドル先を指定）
`--outfile`	バンドルされたJSの出力先ファイルを指定（ファイル名は任意に変更可能）
`--outdir`	バンドルされたJSの出力先ディレクトリを指定（エントリーポイントのJSのファイル名で出力される）
`--sourcemap`	ソースマップを出力する
`--watch`	ファイルの変更を監視して自動的にビルドを実行し続ける
`--minify`	ミニファイ（圧縮）した状態でバンドル

その他のオプションについては公式から確認してください。
esbuild公式

JSファイルをバンドル

それでは実際にJSファイルをバンドルしてみましょう。
以下のコマンドでフォルダにassets/jsフォルダにバンドルされたmain.jsファイルが作成されたら成功です。

npm run js

開発用と公開用のscriptsを作成

現状のscriptsはバンドルするたびに毎回コマンドを入力する必要があります。
さらに開発時と公開時では異なる処理が必要となることがあります。
そこで、開発用と公開用のスクリプトを作成して、効率的な開発を行いましょう。

開発用のscriptsの登録

開発用のscriptsに以下の二つのオプションを追加します。
開発中はソースマップを含めてデバッグを行いやすくし、--watchオプションでファイルの変更を自動的に検知してビルドを継続させる処理を追加しています。

オプション	概要
`--sourcemap`	ソースマップを出力する
`--watch`	ファイルの変更を監視して自動的にビルドを実行し続ける

"scripts": {
   "js": "esbuild scripts/index.js --bundle --outfile=assets/js/main.js"
   "dev:js": "esbuild scripts/index.js --bundle --outfile=assets/js/main.js --sourcemap --watch"
}

それではnpm run dev:jsで確認してみましょう。

ソースマップは、バンドルされたJavaScriptファイルと元のソースコードの対応関係を提供するためのファイルで、デバッグやエラーの追跡など開発時に役立ちます。
ソースマップを有効にすると、ブラウザの開発者ツールなどで元のソースコードを確認することができます。

公開用のscriptsの登録

公開用のscriptsには以下のミニファイのオプションを追加して、ファイルの処理速度を向上させます。

オプション	概要
`--minify`	ミニファイ（圧縮）した状態でバンドル

"scripts": {
   "js": "esbuild scripts/index.js --bundle --outfile=assets/js/main.js"
   "dev:js": "esbuild scripts/index.js --bundle --outfile=assets/js/main.js --sourcemap --watch"
   "build:js": "esbuild scripts/index.js --bundle --outfile=assets/js/main.js --minify"
}

それではnpm run build:jsでミニファイルされた状態でバンドルされているか確認してみましょう。

おわり

以上でesbuildを使ったJSファイルをバンドルする方法の解説になります。

プロジェクトによっては不要な箇所もあるかもしれませんので、それぞれカスタマイズをしてご自身のプロジェクトに生かしていいただけますと幸いです。