一通り、ライブラリが書けたのでビルドしていきます。
コードを 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で何かを作って行こうと思います。