Parcelを使うとJavaScriptからRustをimportできる

タイトルのままなのですが、実際にはimportされたRustファイルはwasmに変換されます。

embed.ly

このリポジトリを見ていてこの事実に気がついたのですが、Parcelの特徴であるノーコンフィグで手軽にrust+wasmを扱えるのは便利だと感じました。

コード片は上のリポジトリにありますが、実際に軽く手を動かして試してみました。

import { add } from './main.rs';

const el = document.getElementById("result");
el.innerText = add(1, 2);

このように違和感なくRustの関数をimportして使えます。

#[no_mangle]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

Rust側は pub fn で関数を定義します。

#[no_mangle] はmanglingされるとjs側で呼ぶ際に名前が異なってしまいかねないので付けます。

あとは普通にparcelでビルドすると wasm32-unknown-unknown をターゲットにしてwasmを生成してくれます。

jsとwasm間のグルーコードもよしなに生成してくれるので何も気にせずjsからRustの関数を使えている体験ができます。

便利。

cargoを使用した例も先のexamples内にあるので外部ライブラリも使えそうです。

ただ、特にサイズを気にせずwasmを生成するので、add関数のみのwasmファイル単体で825.34 KBありました。

embed.ly

こんな素晴らしい情報を発見したので、parcel build + wasm-snipの2 stepのビルド構成にすることでサイズもだいぶ削減できそうです。

Show comments

Adsense

Share

  • このエントリーをはてなブックマークに追加

About

どこにでもいる平凡なプログラムを書く人間のログ。

Recently

Tags

Pages

-->