サーバーサイドでESMプロジェクトをesbuildでbundleして実行する（TypeScript）

+   "type": "module",

{
  "compilerOptions": {
-  "target": "es2016",
+  "target": "es2022",
-  "module": "commonjs",
+  "module": "es2022",
+  "moduleResolution": "nodenext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

pnpm add fastify
pnpm add -D typescript @types/node esbuild tsx

{
  "name": "test-esm-app",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "@types/node": "^18.11.18",
    "esbuild": "^0.17.5",
    "tsx": "^3.12.2",
    "typescript": "^4.9.5"
  },
  "dependencies": {
    "fastify": "^4.12.0"
  }
}

{
  "compilerOptions": {
    "target": "es2022",
    "module": "es2022",
    "moduleResolution": "nodenext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

.
├── package.json
├── pnpm-lock.yaml
├── src
│   ├── main.ts
│   └── sample-module.ts 
└── tsconfig.json

import fastify, { type FastifyReply, type FastifyRequest } from 'fastify';
import { awaitedMessage } from './sample-module.js';

const server = fastify({
  logger: true,
})

server.get('/', async (request: FastifyRequest, reply: FastifyReply) => {
  await reply.code(200).send({
    hello: 'world',
    tla: awaitedMessage, // top-level-awaitした値のexport/importが出来るか確認
  })
})

await server.listen({ port: 3000 })

const messageAfterSleep = async (): Promise<string> => {
  console.log('start sleeping');
  await new Promise(resolve => setTimeout(resolve, 1000)); // 1秒待機
  console.log('finish sleeping');
  return 'success.';
}

export const awaitedMessage = await messageAfterSleep();

pnpm tsx src/main.ts

# watchモード
pnpm tsx watch src/main.ts

  "scripts": {
+   "dev": "tsx watch src/main.ts",

# 実行
pnpm dev

# fastifyによるサーバーログ
start sleeping
(1秒待機)
finish sleeping
{"level":30,"time":1675526354122,"pid":24834,"hostname":"XXXXX-XXXXXX,"msg":"Server listening at http://127.0.0.1:3000"}

curl http://localhost:3000
# {"hello":"world","tla":"success."}

  "scripts": {
    "dev": "tsx watch src/main.ts",
+   "build": "tsx build.ts",
+   "start": "node dist/main.mjs",

import esbuild from 'esbuild';

await esbuild.build({
  // logLevel: 'info', // ビルド時のログを出したいときは設定する
  entryPoints: ['./src/main.ts'], // トランスパイル対象のコード。今回はbundleするのでimportしているライブラリと自作モジュールも自動で含まれる
  outdir: './dist', // トランスパイル結果のファイルの格納先
  outExtension: { // 必須では無いが、ESM形式で出力されることを明示的にするため拡張子を.mjsにしている
    '.js': '.mjs'
  },
  minify: true, // 必須では無いが、ファイルサイズ削減のため
  bundle: true,
  platform: 'node', // ブラウザ上などではなく、サーバーサイドのnodejsで実行するため
  // tsconfig: './tsconfig.json', // デフォルトでtsconfig.jsonを使うが、ビルド時に設定を変える場合は指定する

  format: 'esm', // ESMプロジェクトなので、出力フォーマットを'esm'に設定する必要
  banner: { // commonjs用ライブラリをESMプロジェクトでbundleする際に生じることのある問題への対策
    js: 'import { createRequire as topLevelCreateRequire } from "module"; import url from "url"; const require = topLevelCreateRequire(import.meta.url); const __filename = url.fileURLToPath(import.meta.url); const __dirname = url.fileURLToPath(new URL(".", import.meta.url));',
  },
})

pnpm build
pnpm start

.
├── build.ts ★追加
├── dist ★ビルド結果
│   └── main.mjs
├── package.json
├── pnpm-lock.yaml
├── src
│   ├── main.ts
│   └── sample-module.ts
└── tsconfig.json

pnpm add -D jest @types/jest esbuild-jest ts-jest-resolver

/** @type {import('jest').Config} */
const config = {
  resolver: 'ts-jest-resolver', // jestでTypeScriptモジュールを拡張子`.js`でimportする
  extensionsToTreatAsEsm: ['.ts'], // commonjsでなくesmとして実行するのに必要
  transform: {
    '^.+\\.(t|j)sx?$': [
      'esbuild-jest',
      {
        sourceMaps: true, // 必須でないが、必要に応じて
        // esm形式に変換するため、formatとtargetを設定する必要
        format: 'esm',
        target: 'es2022',
      },
    ],
  },
};

module.exports = config;

import { awaitedMessage } from './sample-module.js'; // jestが`.js`を解釈してimportするには`ts-jest-resolver`などが必要

test('awaitedMessage', () => {
  expect(awaitedMessage).toBe('success.');
})

  "scripts": {
    "dev": "tsx watch src/main.ts",
    "build": "tsx build.ts",
    "start": "node dist/main.mjs",
-   "test": "echo \"Error: no test specified\" && exit 1"
+   "test": "NODE_OPTIONS='--experimental-vm-modules' jest"
  },

pnpm test

import { jest } from `@jest/globals`; // ESMでは明示的にimportが必要

jest.useFakeTimers();

// ...

/** @type {import('jest').Config} */
const config = {
  // preset: 'ts-jest/presets/default-esm', // 必要に応じて
  resolver: 'ts-jest-resolver',
  extensionsToTreatAsEsm: ['.ts'],
  transform: {
    '^.+\\.(t|j)sx?$': [
      'ts-jest',
      { useESM: true }
    ],
  },
};

module.exports = config;