見出し画像

bun build --compile

zochang

Bunとは

  • JavaScriptのランタイム

  • NPM互換のPackage Manager

  • 起動が速い

    • Edge computingを想定している

  • 処理速度が速い

    • JavaScriptCoreというSafari用のJS engineの拡張

  • 凝集度の高いDeveloper Experience

    • bundler, transpiler, package managerが全部入ってる

    • TypeScript、JSXがすぐ動く

    • `Bun.Transpiler` というAPIがある

    • とにかくJS開発でよく使うものは全部入ってる

  • ZIGで書かれている

Bunのインストール

web上のshell scriptをcurlしてインストールもできるけど、個人的にはnpm installがいいかなと思った。

$ npm install -g bun

bun buildとは

説明が２つある

https://bun.sh/

ブラウザで動かすためのJSがビルドできるっぽい説明
サーバーサイドで動かすためっぽい説明

そしてExecutable Binaryをbuildする場合は --compile オプションを付ける必要があり、Bunのruntimeが同梱される。

試しにbuild --compileしてみる

// main.ts
console.log('Hello world')

$ bun build main.ts --compile
   [4ms]  bundle  1 modules
  [93ms] compile  main

$ ls -l
total 91712
-rwxrwxrwx   1 yamagata.k  staff  46948739 Jun 19 11:03 main
-rw-r--r--   1 yamagata.k  staff        27 Jun 19 11:03 main.ts

$ ./main
Hello world

console.logするだけのtsファイルで、mainのサイズは44.77MB

denoでもやってみた

インストールはcurl | shの後にpathを通す

$ curl -fsSL https://deno.land/x/install/install.sh | sh
$ echo 'export "$HOME/.deno/bin:$PATH"' >> ~/.zshrc

bunと同じmain.tsをcompile

$ deno compile main.ts --output main-deno
Check file:///path/to/main.ts
Compile file:///path/to/main.ts to main-deno

$ ls -l
total 274968
-rwxrwxrwx  1 yamagata.k  staff  46948739 Jun 19 11:03 main
-rwxrwxrwx  1 yamagata.k  staff  93823059 Jun 19 11:14 main-deno
-rw-r--r--  1 yamagata.k  staff        27 Jun 19 11:03 main.ts

denoだと89.47MB！倍…

JSXが使えるというのは

どうゆうことかなと思って試してみた

// main.tsx
console.log('Hello world', <div />)


$ bun build main.tsx --compile                                                                                                                   ✘ 1


error: Could not resolve: "react/jsx-dev-runtime". Maybe you need to "bun install"?
console.log('Hello world', <div />)
^
/Users/yamagata.k/Dev/bun-example/main.tsx:1:1 0

react等のJSXを扱えるruntimeが入っていないのでエラーした。
ちなみにreact/jsx-dev-runtimeというのをinstallしようとすると404エラーが発生する。これはreactパッケージの中にあるjsx-dev-runtime.jsファイルをさしている => https://github.com/facebook/react/blob/main/packages/react/jsx-dev-runtime.js

なのでreactをinstallしてみた。

$ bun install --save react                                                                                                                       ✘ 1
bun add v0.6.8 (bdb1b712)

 installed react@18.2.0


 3 packages installed [694.00ms]

~/Dev/bun-example
$ bun build main.tsx --compile
   [8ms]  bundle  5 modules
  [91ms] compile  main

~/Dev/bun-example
$ ./main
Hello world <div />

<div /> というJSXをconsole.logするとそのまま <div /> で出力された。

bun install --saveするとpackage.jsonがなければ作られて、bun.lockbという詳細なパッケージ情報が入っているバイナリが作られた。

当然denoでmain.tsxをcompileしようとするとJSXの部分でエラーしてしまう。先にトランスパイルする必要がある。

感想

全部bunに入っているというのは本当に気が楽でいい。denoはgithubのURLでimportできたりするのは面白いけど、package.jsonで管理できる方がわかりやすいと思う。
バイナリに含まれるruntimeが必要な分だけになると最高だけどやってくれるかな。