wrangler v2 素振り

久しぶりで忘れてるのと wrangler2 で色々変わってそうなので素振りしておく

$ mkdir play-worker
$ cd play-worker
$ npm init -y
$ npm install wrangler --save-dev

今は開発モードで立ち上げるだけなら wrangler.toml がいらないらしいので、それでやってみる。(tsもやらない)

index.js

addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  return new Response('Hello World!', {status: 200});
}

$ npx wrangler dev index.js
 ⛅️ wrangler 2.0.5 
-------------------
⬣ Listening at http://localhost:8787
Script modified; context reset.
20:02:35 GET / 200
20:02:35 GET /favicon.ico 200
╭──────────────────────────────────────────────────────────────────────────────────────────────╮
│ [b open a browser, [d] open Devtools, [l] turn on local mode, [c] clear console, [x] to exit │
│                                                                                              │
╰──────────────────────────────────────────────────────────────────────────────────────────────╯

b で open a browser で http://localhost:8787 で開いた。

mizchi

とりあえずデフォルトの wrangler init で生成されるやつを見たかったのでログインする。

$ npx wrangler login
 ⛅️ wrangler 2.0.5 
-------------------
Attempting to login via OAuth...
Successfully logged in.

$ npx wrangler init
 ⛅️ wrangler 2.0.5 
-------------------
Using npm as package manager, as there is already a package-lock.json file.
✨ Created wrangler.toml
Would you like to create a Worker at src/index.ts? (y/n) # y
✨ Created src/index.ts

To start developing your Worker, run `npx wrangler dev`
To publish your Worker to the Internet, run `npx wrangler publish`

出力

src/index.ts

export default {
  async fetch(request: Request): Promise<Response> {
    return new Response("Hello World!");
  },
};

wrangler.toml

name = "play-worker"
main = "src/index.ts"
compatibility_date = "2022-05-15"

wrangler v2 デフォルトは SW スタイルではなく ESM スタイルになったみたい。

$ npx wrangler dev

で同様

$ npx wrangler publish

で publish された。

mizchi

cf が勝手に決め打ちしてない確認したが、とりあえず npm 決め打ちではなさそうだったので、pnpm にした

$ rm -r package-lock.json node_modules
$ pnpm install

mizchi

裏で bundler が動いてる気配があったので、挙動を確かめる

ts コンパイラを動かす。 pnpm add @mizchi/mints

import { transformSync } from "@mizchi/mints";

export default {
  async fetch(request: Request): Promise<Response> {
    const code = `const x: number = 1;`;
    const result = transformSync(code, {});
    if (result.error) return new Response("CompileError", { status: 500 });
    return new Response(result.code, { status: 200 });
  },
};

node_modules を解決している

ドキュメントは虚無だった( https://developers.cloudflare.com/workers/wrangler/custom-builds/ ) ので、ここで wrangler2 のソースコード読みにいったが、何も設定してなければ esbuild が走ってそうだった

mizchi

build.command を定義すると esbuild 前に走るっぽいので、試しに tsc の型チェックを挟んでみる。

wrangler.toml

name = "play-worker"
main = "src/index.ts"
compatibility_date = "2022-05-15"

[build]
command = "tsc -p . --noEmit"

わざと落としてみた

src/index.ts:5:9 - error TS2322: Type 'string' is not assignable to type 'number'.

5     let s: number = '';

ちゃんと落ちた。 esbuild も止められるだろうか。

mizchi

esbuild は常に走るっぽい