RustからWebAssemblyにコンパイルする（2） #Rust

一通り、ライブラリが書けたのでビルドしていきます。

コードを WebAssembly にコンパイルする

Cargo.toml

Cargo.tomlを以下のように記述します。

[package]
name = "hello-wasm"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

[package]: パッケージについての定義

name: パッケージの名前
version: パッケージのバージョン
edition: パッケージがどのRust Editionでコンパイルされるか

[lib]：ライブラリのターゲット設定
crate-type = ["cdylib"] は他の言語からロードされる動的ライブラリをコンパイルする時に使用されます。
[dependencies]: パッケージライブラリの依存関係

パッケージのビルド

$ wasm-pack build --target web

wasm-pack　buildは以下のことをします。

Rust コードを WebAssembly にコンパイルする。

wasm-bindgen をその WebAssembly に対して実行し、WebAssembly ファイルを npm が理解できるモジュールにラップする JavaScript ファイルを生成する。

pkg ディレクトリーを作成し、その JavaScript ファイルと WebAssembly コードをそこに移動する。

Cargo.toml を読み、等価な package.json を生成する。
(もし存在するなら) README.md をパッケージにコピーする。

ビルドが成功すると、以下のようなpkgディレクトリが作成されました。

pkg
├── hello_wasm.d.ts
├── hello_wasm.js
├── hello_wasm_bg.wasm
├── hello_wasm_bg.wasm.d.ts
└── package.json

メモ： .wasmのサイズ縮小

パッケージをウェブで利用

index.htmlを作成します。また、ローカルでホストするようにhttp-serverをインストールします。

$ npm init
$ npm install http-server
$ npmx http-server

すると localhost:8080でホスティングされるのでアクセスすると、以下のようにalertが表示されることがわかります。

npmでパッケージが利用できるようにする

基本的な作成の仕方は以下を参考にしてください。気になった wasm-packのbuildオプションと npm link についてメモを載せます。

target bundlerオプションとは？

$ wasm-pack build --target bundler

target bundlerオプションとは？

オプション	使用法	説明
bundler(default)	Bundler	WebpackなどのBundlerとの相互運用に適したJSを出力します。JSをインポートし、package.jsonにモジュールキーを指定します。
nodejs	Node.js	CommonJSモジュールを使用したJSを出力します。require文で使用します。
web	ブラウザ	ブラウザでESモジュールとしてネイティブにインポートできるJSを出力しますが、WebAssemblyは手動でインスタンス化し、ロードする必要があります。
no-modules	ブラウザ	JS がページに含まれ、グローバルな状態を変更し、webほど多くのwasm-bindgenの機能をサポートしないことを除けば、webと同じです。

npm linkとは？

$ cd pkg
$ npm link

通常ライブラリはnpm publish等をしてリリースして、それを利用する側が新しいバージョンをインストールすることで使用できますが、npm linkを利用すればローカル環境で即座にライブラリの変更を反映することができます。

初めに、npm link をパッケージフォルダーで実行し、グローバルなシンボリックリンクをグローバルフォルダー内に作成します。次にそのパッケージを使用したいディレクトリに移動しnpm link <package名>とすることでシンボリックリンクを作成し参照できるようにします。

npmの例がわかりやすいです。

cd ~/projects/node-redis    # パッケージのディレクトリに移動
npm link                    # グローバルリンクを作成
cd ~/projects/node-bloggy   # パッケージを使用したいディレクトリに移動
npm link redis              # パッケージをnpm linkでインストールする

最後に

siteプロジェクトも完成し、webpack-dev-serverが起動できると localhost:8080で以下が表示できるようになると思います。

明日以降もRustとWebAssemblyで何かを作って行こうと思います。