®️

Vite + Rust + wasm-packでHelloWorldする

2023/11/12に公開

JavaScript

RustをWASMにコンパイルしてViteプロジェクトで呼び出すサンプルです。

GitHubリポジトリ :

ディレクトリ構成

hello-vite-wasm-pack/
├ src/
│ ├ wasm/
│ │ ├ src/
│ │ │ └ lib.rs
│ │ ├ Cargo.lock
│ │ └ Cargo.toml
│ └ main.js
├ index.html
├ package.json
└ package-lock.yaml

wasmをviteプロジェクト配下に配置して一緒に管理します。

環境

cargo v1.73.0
node v19.6.0
pnpm v8.6.12

手順

作業ディレクトリ作成

mkdir hello-vite-wasm-pack

cd hello-vite-wasm-pack

pnpm init

pnpm init

viteとwasm-packをインストール

pnpm add -D vite wasm-pack

cargo new

cargo new --lib src/wasm

作成されたsrc/wasm/Cargo.tomlを以下のように編集

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

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2.84"

作成されたsrc/wasm/src/lib.rsを以下のように編集

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello {}!", name));
}

package.jsonにscript追加

{
  ...
  "scripts": {
    "dev": "vite",
    "build": "wasm-pack build ./src/wasm --target web && vite build",
    "build-wasm": "wasm-pack build ./src/wasm --target web",
    "preview": "vite preview"
  },
  ...
}

wasmをbuild

pnpm build-wasm

src/main.jsを作成

import init, { greet } from "./wasm/pkg";

init().then(() => greet("Wasm"));

index.htmlを作成

<html>
  <head>
    <script type="module" src="./src/main.js"></script>
  </head>
  <body></body>
</html>

起動してHello WASM!と表示されたらOK

pnpm dev --open

ソースコード

以下のGitHubリポジトリをcloneしても動くかと思います。

環境

手順

ソースコード

Discussion