webpackからesbuildへの移行手順（TypeScript）

移行編

前提

• A. TypeScriptで書かれたExpressのコード
• B. TypeScriptで書かれた数種類のスクリプト（DynamoDBへの書き込みによりキックされる）

修正イメージ

build-sがA.にあたり、build-tがB.にあたる。

移行手順

1. tsconfigの修正

• compilerOptions.noEmit: true (冒頭)
• compilerOptions.isolatedModules: true
• compilerOptions.esModuleInterop: true

2. Aのビルドコマンドの修正（CLI）

2-1. ビルド時のエントリポイントについて

2-2. オプションの置き換え

...
const server = {
  entry: './dist/path/to/entrypoint.js',
  target: 'node',
  mode: 'production',
  output: {
    path: path.join(__dirname, 'dist/server'),
    filename: 'handler.js',
    libraryTarget: 'commonjs2'
  },
};
...

esbuild ./src/path/to/entrypoint.ts --platform=node --bundle --outfile=./dist/server/handler.ts --target=node14

• entryプロパティ → esbuildコマンドのパラメータ
• targetプロパティ → --platformオプション
• outputプロパティ→ --outfileオプション
• babel-loader等の実行環境設定→ --targetオプション

• productionプロパティによる最適化は--minifyオプション
• devtoolプロパティによるソースマップ設定は--sourcemapオプション

2-3. ビルドプロセスの修正

3. Bのビルドスクリプトの修正（JavaScriptAPI）

3-1. ビルドスクリプトの作成

// build-trigger.ts
import { build } from "esbuild";

const triggerNames = ["triggerA", "triggerB", "triggerC"];
const buildPromises = triggerNames.map(async (name) => {
  const sourcePath = `./src/trigger/${name}/handler.ts`;
  const destPath = `./dist/trigger/${name}/handler.js`;
  await build({
    entryPoints: [sourcePath],
    bundle: true,
    outfile: destPath,
    platform: "node",
    target: "node14",
  });
});

Promise.all(buildPromises)
  .then(() => {
    console.log("done trigger build");
  })
  .catch((reason) => {
    console.log(reason);
  });

3-2. ビルドプロセスの修正

採用編

今回移行して感じた利点

1. ビルド時間の短縮

2. デベロッパーフレンドリ

• tsc標準対応
• CLIでできる範囲が広くわかりやすい
• JavascriptAPI自体がTypeScript対応しており、asyn/awaitにも対応（かつ、並行で動かしても速い）

esbuild採用にあたっての注意点

1. 開発途上の機能について

2. TypeScriptプロジェクトへの適用

3. 本番採用について

追伸