Cloudflare WorkersをTypeScriptで書いてesbuildでビルドする

そのためにはこういう用意があればよいというメモです。

いちおうTSだけなら公式からもテンプレが出てるので、それを使うのが手っ取り早い。
けど、`webpack`しかないし他にもいろいろ付いてくるしな〜という。

GitHub - cloudflare/worker-typescript-template: ʕ •́؈•̀) TypeScript template for Cloudflare Workers

TypeScriptで書く

型定義が提供されてるので、それをまずいれる。

npm i -D @cloudflare/workers-types

そしてそれを`tsconfig.json`で読む。

{
  "compilerOptions": {
    "lib": ["esnext", "webworker"],
    "moduleResolution": "node",
    "esModuleInterop": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "sourceMap": true,
    "target": "esnext",
    "types": ["@cloudflare/workers-types"]
  },
  "include": [
    "./**/*.ts",
    "./node_modules/@cloudflare/workers-types/index.d.ts"
  ],
  "exclude": ["node_modules/**/*"]
}

ここまでは上述のテンプレと同じ。

esbuildでビルド

CFWはデフォルトで`webpack`によるビルドをサポートしているので、独自の`webpack.config.js`でTS対応するというのがテンプレのやり方。

ただ今回は`esbuild`でビルドさせたい、だって速いから。

で、そのためには、「自分でビルドします！」という設定を`wrangler.toml`に書く。

# ...

[build]
upload.format = "service-worker"
command = "npm run build"

という感じ。

https://developers.cloudflare.com/workers/cli-wrangler/configuration#build

こうしておけば、`wrangler deploy`や`wrangler dev`のビルド時にこのコマンドが使われる。

CIでデプロイしてるなら、`npm i && npm run build`って書きたくなるかもしれない。

  "main": "./worker.js",
  "scripts": {
    "build": "esbuild --bundle --minify ./src/main.ts > worker.js",

ファイルの場所はどこでもいいけど、`main`でちゃんと指し示すこと。