- 開発技術
- API連携
[esbuild]ビルドスクリプトの使い方
- TypeScript
- JavaScript
- #React
- #Node.js
- #VueJS
esbuildとは
【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc. 詳細はこちらから＞
エスビルド（esbuild） は、高速的なJavaScriptバンドラーおよびトランスパイラーです。
主にJavaScriptやTypeScriptのコードを効率的にビルド、最適化するために使用されます。
以下にesbuildの特徴と用途を簡単に紹介させて頂きます。
特徴
他のWeb用ビルドツールより、キャッシュを必要とせずに、圧倒的なビルド速度とシンプルなAPIが主要な特徴です。TypeScript、JSX、JSON、CSS など多くの形式もサポートされている。
用途
(1)バンドル（bundle）
複数のモジュールや依存関係を1つのファイルにまとめます。
例: コマンドラインでReactやライブラリを含むプロジェクトをbundle.jsとして出力。
|
1 |
esbuild src/index.js --bundle --outfile=dist/bundle.js |
(2)トランスパイル（transpile）
ES6+（モダンなJavaScript）やTypeScriptのコードを、特定のブラウザや環境で動作する形式に変換します。
例: コマンドラインでTypeScript を ES5 に変換。
|
1 |
esbuild src/index.ts --outfile=dist/index.js --target=es5 |
(3)コードの圧縮
コードをミニファイ（圧縮）してファイルサイズを削減します。
例: コマンドラインでミニファイを有効化。
|
1 |
esbuild src/index.js --bundle --outfile=dist/bundle.js --minify |
(4)ソースマップの生成
デバッグ用にソースマップを生成します。
例: コマンドラインでソースマップ付きで出力。
|
1 |
esbuild src/index.js --bundle --outfile=dist/bundle.js --sourcemap |
(5)プラグイン
カスタム処理や特殊なファイル形式のサポートを追加できます。
例: esbuildのJavaScript APIでビルドスクリプトを記述し、カスタムプラグインで特定ファイルを処理する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
1、tsconfig.eslint.jsonへ「*.mjs」ファイル許可を配置する。 { "extends": "./tsconfig.json", "include": [ "src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.mjs", ".eslintrc.js" ], "exclude": [ "node_modules", "build" ] } 2、build.mjsを作成する。 import js from 'js'; const customPlugin = { name: 'example-plugin', setup(build) { build.onLoad({ filter: /\.txt$/ }, async (args) => { const contents = await fs.promises.readFile(args.path, 'utf8'); return { contents, loader: 'text' }; }); }, }; esbuild.build({ entryPoints: ['src/index.js'], outfile: 'dist/bundle.js', bundle: true, plugins: [customPlugin], }); ３、packege.jsonへカスタマビルドスクリプトを登録する。 { "name": "my-project", "version": "1.0.0", "type": "module", "scripts": { "build": "node src/build.mjs", }, "devDependencies": { "esbuild": "^0.19.0" } } 4、bashでビルドコマンドラインを実行する。 npm run build |
ビルドスクリプトの作成
(1)プロジェクト構成
以下のようなプロジェクト構成（Node.jsやReact等）を想定する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
ソースコード構成例： my-project/ ├── coverage/ ├── node_module/ ├── dist/ ├── src/ | ├── build-scripts/ | | ├── build.mjs | | ├── prebuild.mjs | | └── postbuild.mjs | ├── index.js | └── example.txt ├── .eslintrc.js ├── package-lock.json ├── package.json ├── tsconfig.eslint.json └── tsconfig.json |
(2)必要な依存関係をインストール
|
1 2 3 4 5 |
・プロジェクトのローカルにインストール例： npm install esbuild --save-dev ・グローバルインストール例： npm install -g esbuild |
(3)ビルドスクリプトの作成
①コマンドラインインターフェイスの場合
package.jsonビルドコマンドは繰り返し実行されるものなので、自動化する必要があります。自動化を行う作成方法は、以下のようにビルドスクリプトを追加する。
prebuild（ビルド前）、build（ビルド）、postbuild（ビルド後）
|
1 2 3 4 5 6 7 8 |
package.json実装例： { "scripts": { "prebuild": "rm -rf dist", "build": "esbuild src/index.ts --bundle --minify --sourcemap --platform=node --target=es2021 --outfile=dist/index.js", "postbuild": "cd dist && zip -r index.zip index.js*", } } |
②esbuildのJavaScript APIの場合
ただし、esbuildに多くのオプションを渡す必要がある場合、コマンドラインインターフェイスを使用すると扱いにくくなる可能性があります。より高度な使用法の場合は、esbuildの JavaScript APIを使用してJavaScript(*.mjsファイル)でビルドスクリプトを記述する必要があります。以下のようにビルドスクリプトを追加する。
prebuild（ビルド前）、build（ビルド）、postbuild（ビルド後）
②-1、eslintエラーチェックが問題ないように、tsconfig.eslint.jsonへ「*.mjs」ファイル許可を配置する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "extends": "./tsconfig.json", "include": [ "src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.mjs", ".eslintrc.js" ], "exclude": [ "node_modules", "build" ] } |
②-2、JavaScript(*.mjsファイル)でビルドスクリプトを記述する。
prebuildの実装例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/** * esbuildのJavaScript APIを使用してJavaScriptでビルド前スクリプトを再構築する。 * ■エスビルド公式サイト * https://esbuild.github.io/ * https://esbuild.github.io/getting-started/#build-scripts * ■ビルド前スクリプト * package.jsonに配置したbuild情報 * 『"prebuild": "rm -rf dist",』 */ import fs from 'fs/promises'; // ビルド前スクリプトの再構築 const distDir = 'dist'; try { await fs.rm( distDir, { recursive: true, force: true } ); console.log(`Cleaned up ${distDir}`); } catch (error) { console.error(`Failed to clean up ${distDir}:`, error); process.exit(1); } |
buildの実装例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/** * esbuildのJavaScript APIを使用してJavaScriptでビルドスクリプトを再構築する。 * ■エスビルド公式サイト * https://esbuild.github.io/ * https://esbuild.github.io/getting-started/#build-scripts * ■ビルドスクリプト * package.jsonに配置したbuild情報 * 『"build": "esbuild src/index.ts --bundle --minify --sourcemap --platform=node --target=es2021 --outfile=dist/index.js",』 */ import * as esbuild from 'esbuild'; // ビルドスクリプトの再構築 await esbuild .build({ // エントリーポイント entryPoints: ["src/index.ts"], // バンドル有効 bundle: true, // 縮小有効 minify: true, // ソースマップ有効 sourcemap: true, // プラットホーム platform: "node", // ターゲット target: "es2021", // アウトファイル outfile: "dist/index.js", // ログ出力 logLevel: "info" }) .catch((error) => { console.log(error); process.exit(1); }); |
postbuildの実装例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/** * esbuildのJavaScript APIを使用してJavaScriptでビルド後スクリプトを再構築する。 * ■エスビルド公式サイト * https://esbuild.github.io/ * https://esbuild.github.io/getting-started/#build-scripts * ■ビルドス後クリプト * package.jsonに配置したbuild情報 * 『"postbuild": "cd dist && zip -r index.zip index.js*",』 */ import { exec } from 'child_process'; // ビルド後スクリプトの再構築 exec( 'cd dist && zip -r index.zip index.js*', (error, stdout, stderr) => { if (error) { console.error(`Compression failed: ${stderr}`); process.exit(1); } else { console.log(`Compression successful:\n${stdout}`); } } ); |
(4)package.json にスクリプトを登録
①コマンドラインインターフェイスの場合は、(3)と同様。
②esbuildのJavaScript APIの場合
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
packege.json実装例： { "name": "my-project", "version": "1.0.0", "type": "module", "scripts": { "prebuild": "node src/build-scripts/prebuild.mjs", "build": "node src/build-scripts/build.mjs", "postbuild": "node src/build-scripts/postbuild.mjs", }, "devDependencies": { "esbuild": "^0.19.0" } } |
(5)ビルドスクリプトの実行
|
1 2 |
bash実行例： npm run build |
・npmはbuildの前後にprebuildとpostbuildというスクリプトを自動で認識します。
・これらは手動で呼び出す必要はありません。
実行フロー
１、prebuild: ビルド前の準備処理。
distフォルダをクリーンアップ。
２、build: ビルドそのもの。
esbuildによりsrc/index.jsをビルドしてdist/index.jsを生成。
３、postbuild: ビルド後の追加処理。
dist/index.jsをzipで圧縮。
■参考文書：
『エスビルド公式サイト：https://esbuild.github.io/』
【エンジニア募集中】フルリモートも◎(リモート率85.7％)、平均残業8時間、年休124日以上、有給取得率90％ etc. 詳細はこちらから＞
