ruby.wasmをビルドする

ruby.wasmをブラウザで動かす時に https://cdn.jsdelivr.net/npm/ruby-head-wasm-wasi@2.0.0/dist/browser.script.iife.js を使います。このJavaScriptをハックして少し便利にしたいときには次の手順でビルドしています。

ビルド

git clone git@github.com:ruby/ruby.wasm.git
cd ruby.wasm
bin/setup
rake npm:ruby-head-wasm-wasi

以上の手順で browser.script.iife.js がビルド出来ます。 bin/setupだけで、依存する物を全部用意出来るはずです。が、ちょっと自信ないです。上手く行かなかったら教えてください。

動作確認

ビルドしたものが上手く動いているか確認します。

https://github.com/ruby/ruby.wasm/blob/main/packages/npm-packages/ruby-wasm-wasi/example/hello.html に browser.script.iife.js を使ったサンプルコードがあります。これを修正してビルドしたバージョンを動かします。

vi packages/npm-packages/ruby-wasm-wasi/example/hello.html

<html>
  <script src="https://cdn.jsdelivr.net/npm/ruby-head-wasm-wasi@2.0.0/dist/browser.script.iife.js"></script>
  <script type="text/ruby">
    puts "Hello, world!"
  </script>
</html>

の1番目のscriptタグを次のように書き換えます。

<html>
  <script src="../../ruby-head-wasm-wasi/dist/browser.script.iife.js"></script>
  <script type="text/ruby">
    puts "Hello, world!"
  </script>
</html>

ビルドされた browser.script.iife.js は /ruby-head-wasm-wasi/dist/browser.script.iife.js にあります。つづいてHTTPサーバーを起動します*1。

cd packages/npm-packages/
ruby -run -e httpd

ブラウザで http://localhost:8080/ruby-wasm-wasi/example/hello.html を開くと動作確認出来ます。開発コンソールに次のように表示されれば成功です。

ソースコード

ビルドされるソースコードのエントリポイントは https://github.com/ruby/ruby.wasm/blob/main/packages/npm-packages/ruby-wasm-wasi/src/browser.script.ts です。このファイルからたどって行くと変更したい機能のソースコードを見つけられると思います。

参考

ruby.wasm/CONTRIBUTING.md at main · ruby/ruby.wasm · GitHub

20230613追記

いつもありがとうございますー。もしCRuby自体に変更がない場合、rake build:download_prebuiltを使って頂くとビルド時間がかなり節約できると思いますー。https://t.co/p9F16Io017
— kateinoigakukun (@kateinoigakukun) June 9, 2023