一、模板概覽
| 模板 | 生成方式 | 核心用途 | 典型角色 |
|---|---|---|---|
| wasm-pack-template | cargo generate … | 把 Rust 代碼 打包成 npm 庫 | 「底層算法/組件」作者 |
| create-wasm-app | npm init wasm-app | 構建純 JS/TS 項目，消費上面生成的 npm 包 | Web 前端/Node 服務 |
| rust-webpack-template | npm init rust-webpack | 自帶 Webpack & rust-loader，前端與 Rust 熱編譯一體 | 同 repo 混合開發 |
一句話理解：
- wasm-pack-template 造輪子，輸出 .wasm + JS 包裝器
- create-wasm-app 裝輪子，專注業務邏輯
- rust-webpack-template 把「造輪子 + 裝輪子」合并到一個工程里，適合迅速原型
二、wasm-pack-template——“Rust → npm”的起點
1. 快速上手
cargo install cargo-generate # 若未安裝
cargo generate \--git https://github.com/rustwasm/wasm-pack-template.git \--name my-wasm-lib
cd my-wasm-lib
wasm-pack build --release --target bundler
生成目錄結構：
my-wasm-lib/
├── src/lib.rs # 寫 Rust 邏輯
├── Cargo.toml
└── pkg/ # wasm-pack 輸出：.wasm + JS 包裝文件
2. 關鍵特性
wasm-bindgen已接入：#[wasm_bindgen]讓 Rust 函數暴露給 JS- 測試與 CI 模板：開箱集成
wasm-bindgen-test、GitHub Action - TypeScript 類型聲明：
pkg/*.d.ts自動生成，IDE 友好 - npm publish：
wasm-pack publish秒發 npm
3. 與 JS 項目聯調
cd my-wasm-lib
npm link # 全局軟鏈cd ../front-app
npm link my-wasm-lib
即可在前端代碼里 import init, { foo } from 'my-wasm-lib'。
三、create-wasm-app——“JS 消費 wasm 庫”的最佳拍檔
1. 初始化
mkdir front-app && cd $_
npm init wasm-app # 交互式選擇：JS / TS、打包工具等
npm install # 裝依賴
npm run start # 本地 dev server，自動加載 .wasm
2. 項目亮點
- 零配置加載 wasm：腳手架已注入
init()+await處理 - 支持 TS：可直接
import type的 d.ts - vite / webpack / parcel 多框架可選（新版本）
3. 結合自研 wasm 庫
- 在
package.json加入"my-wasm-lib": "file:../my-wasm-lib/pkg" - run
npm install，即可獲取本地編譯產物 import { add } from "my-wasm-lib";
四、rust-webpack-template——前后端一體化熱編譯
1. 生成項目
mkdir wasm-fullstack && cd $_
npm init rust-webpack
npm run start
默認結構：
src/lib.rs # Rust 入口
webpack.config.js
index.js # 前端邏輯，已 import './pkg'
2. 為什么選它
| 特性 | 說明 |
|---|---|
| 熱更新 HMR | 改 Rust -> wasm-pack watch -> Webpack reload |
| rust-loader | Webpack loader 直接調用 wasm-pack build |
| 統一依賴 | npm install 即可管理前后端包 |
3. 適用場景
- 前端業務少、算法核心多，想要 改代碼 ? 瀏覽器秒刷新
- Hackathon / Demo 期望 5 分鐘跑通
五、典型工作流組合
方案 A：代碼分倉，產物 npm 依賴（推薦團隊協作）
- wasm-lib 用 wasm-pack-template
- ui-app 用 create-wasm-app
- 優點：職責清晰，版本控制友好
方案 B：單倉庫極速原型（個人項目）
- 一條
npm run start啟動全棧 - 缺點：Rust 與 Node 依賴都塞在 package.json，后期拆分略麻煩
六、常見問題 FAQ
| 癥狀 | 解決方案 |
|---|---|
wasm-pack 提示 wasm32-unknown-unknown unavailable | rustup target add wasm32-unknown-unknown |
Module not found: rust-loader | 僅 rust-webpack-template 內置；其他腳手架請用 wasm-pack build 先產物 |
TypeError: WebAssembly.instantiate 跨域 | dev server 需啟用 --headers 'Access-Control-Allow-Origin:*'，或改用 fetch('/pkg/pkg_bg.wasm') |
| IE11 報崩 | 用 wasm2js 轉 asm.js 或選擇降級方案 |
七、結語與實踐建議
- 先選模板，再寫業務：早期踩好腳手架能省掉 80% 配置工夫
- 生產環境請務必在 CI 流水線 跑
wasm-pack build --release+wasm-opt -Oz，體積可縮減 30-50% - 關注 rustwasm 工作組 的新模板，如基于 Vite / SWC 的現代版本
動手吧！ 五分鐘復制下方命令，你的第一個 Rust → WebAssembly 項目，就此誕生！
# 1) 造輪子
cargo install cargo-generate wasm-pack
cargo generate --git https://github.com/rustwasm/wasm-pack-template.git --name my-wasm-lib
cd my-wasm-lib && wasm-pack build --release# 2) 裝輪子
mkdir my-app && cd $_
npm init wasm-app
npm install ../my-wasm-lib/pkg # or `npm link`# 3) 運行
npm run start
祝編碼愉快，WASM 王者之路揚帆起航 🚀
 add方法報錯java.lang.UnsupportedOperationException)
)
