ブラウザからruby.wasmを実行するときは https://cdn.jsdelivr.net/npm/ruby-head-wasm-wasi@2.1.0/dist/browser.script.iife.js を使うことが多いです。
browser.script.iife.jsは https://cdn.jsdelivr.net/npm/ruby-head-wasm-wasi@2.1.0/dist/ruby+stdlib.wasmをダウンロードして実行します。
便利なスクリプトです。
ただ、自分がビルドしたruby.wasmを動かすには向きません。
そこで browser.script.iife.js をビルドします。
ruby.wasmを取得するコードは https://github.com/ruby/ruby.wasm/blob/b37b90ca139a3c1c1e710faa2f9072ecb750a0b2/packages/npm-packages/ruby-wasm-wasi/src/browser.script.ts#L7-L9 にあります。
const response = fetch( `https://cdn.jsdelivr.net/npm/${pkg.name}@${pkg.version}/dist/ruby+stdlib.wasm`, );
任意のパスに書き換えます。
例えば、browser.script.iife.js と同じディレクトリに ruby.wasm を置く場合は、次のように修正します。
const response = fetch( `ruby+stdlib.wasm`, );
browser.script.iife.jsをビルドします。
rake npm:ruby-head-wasm-wasi
ruby.wasm自体のビルドが終わっていれば、npmパッケージのビルドだけが実行されます。
30秒くらいで終わります。
packages/npm-packages/ruby-head-wasm-wasi/dist/にbrowser.script.iife.jsとruby+stdlib.wasmが出来ます。*1
ledsun@MSI:~/ruby.wasm►ls -la packages/npm-packages/ruby-head-wasm-wasi/dist/ total 104940 drwxr-xr-x 4 ledsun ledsun 4096 Jun 22 23:28 ./ drwxr-xr-x 5 ledsun ledsun 4096 Nov 5 11:23 ../ -rw-r--r-- 1 ledsun ledsun 1067 Nov 14 15:58 LICENSE -rw-r--r-- 1 ledsun ledsun 51157 Nov 14 15:58 NOTICE drwxr-xr-x 2 ledsun ledsun 4096 Jun 22 23:28 RubyRunner/ drwxr-xr-x 2 ledsun ledsun 4096 Jun 22 23:28 bindgen/ -rw-r--r-- 1 ledsun ledsun 560499 Nov 14 15:58 browser.cjs.js -rw-r--r-- 1 ledsun ledsun 267 Nov 14 15:58 browser.d.ts -rw-r--r-- 1 ledsun ledsun 560301 Nov 14 15:58 browser.esm.js -rw-r--r-- 1 ledsun ledsun 566241 Nov 14 15:58 browser.script.cjs.js -rw-r--r-- 1 ledsun ledsun 95 Nov 14 15:58 browser.script.d.ts -rw-r--r-- 1 ledsun ledsun 566045 Nov 14 15:58 browser.script.esm.js -rw-r--r-- 1 ledsun ledsun 623166 Nov 14 15:58 browser.script.iife.js -rw-r--r-- 1 ledsun ledsun 578943 Nov 14 15:58 browser.script.umd.js -rw-r--r-- 1 ledsun ledsun 566825 Nov 14 15:58 browser.umd.js -rw-r--r-- 1 ledsun ledsun 46153 Nov 14 15:58 index.cjs.js -rw-r--r-- 1 ledsun ledsun 6310 Nov 14 15:58 index.d.ts -rw-r--r-- 1 ledsun ledsun 46083 Nov 14 15:58 index.esm.js -rw-r--r-- 1 ledsun ledsun 48856 Nov 14 15:58 index.umd.js -rw-r--r-- 1 ledsun ledsun 46923 Nov 14 15:58 node.cjs.js -rw-r--r-- 1 ledsun ledsun 248 Nov 14 15:58 node.d.ts -rw-r--r-- 1 ledsun ledsun 46887 Nov 14 15:58 node.esm.js -rw-r--r-- 1 ledsun ledsun 34240164 Nov 14 15:58 ruby+stdlib.wasm -rw-r--r-- 1 ledsun ledsun 53327741 Nov 14 15:58 ruby.debug+stdlib.wasm -rw-r--r-- 1 ledsun ledsun 15505037 Nov 14 15:58 ruby.wasm
browser.script.iife.jsとruby+stdlib.wasmにくわえて、次の index.html を用意します。
<html> <script src="browser.script.iife.js"></script> <script type="text/ruby"> puts "Hello, world!" </script> </html>
動かしてみましょう。 上の三つのファイルを置いたたディレクトリでHTTPサーバーを起動します。
ruby -run -e httpd .
ブラウザで http://localhost:8080/ を開き、開発コンソールを開きます。
次のように Hello, world! が表示されていれば成功です。
