今天直接讓 Rust 跑進瀏覽器，這樣才有感覺有在學東西。

你會拿到

1. 一個用 wasm-pack 產生的 pkg
2. 在 Vite 專案裡 import → await init → 呼叫函式，看到 alert 或 console 訊息

前置

rustup target add wasm32-unknown-unknown
cargo install cargo-generate
wasm-pack --version
node -v   # 建議 20.19+ 或 22+

怎麼跑起來

1. 偷官方的模板來用用

cargo generate --git https://github.com/rustwasm/wasm-pack-template
cd <你剛取的專案名>

2. 打包成可以給前端用的 pkg（這邊 target 選 web，和 Vite 最合）

wasm-pack build --target web

完成後會多一個 pkg/，裡面有 .js、.wasm、.d.ts。

3. 建一個最小 Vite demo，直接匯入

pnpm create vite@latest demo --template vanilla-ts
cd demo && pnpm i

把上一個步驟的 pkg/ 整包放到 demo/src/pkg/ 底下。

在 demo/src/main.ts 最下面加這三行：

import init, { greet } from './pkg/your_pkg_name.js'  // 例如 ./pkg/rustwasm_test.js
;(async () => {
  await init()
  greet?.('Vite')   // 模板預設會跳「Hello, 你的專案名!」
})()

啟動：

npm run dev   # 或 pnpm dev

驗收畫面

• 頁面一載入就跳出一個 hello 的 alert；或你改成 console.log，就去 console 看訊息。
• Network 分頁能看到對應的 .wasm 檔成功載入（狀態 200）。