快速启动 Rust + WebAssembly 项目
一、 模板一：wasm-pack-template
适合目标：构建一个 Rust 写的 WebAssembly npm 包
这是最常用、也是最官方推荐的起点模板。它提供了：
Cargo.toml配置好 WebAssembly 的 crate 类型（cdylib）- 已设置
wee_alloc和 panic hook - 集成
wasm-bindgen与类型定义导出 - 支持通过
wasm-pack构建并发布到 npm
1.1. 启动项目：
cargo install cargo-generate
cargo generate --git https://github.com/rustwasm/wasm-pack-template.git
1.2.构建：
wasm-pack build
此模板非常适合用来写 一个功能独立的 Rust 模块，供 JS/TS 项目消费，比如图像处理、压缩算法、文本解析器等。
二、模板二：create-wasm-app
适合目标：JS/TS 项目，需要调用 Rust 生成的
.wasm模块
这是一个前端侧的模板，它用于创建一个消费 npm 上 .wasm 包的 JS 项目，集成了 webpack、TS、热更新等现代前端配置。
2.1.启动项目：
mkdir my-project
cd my-project/
npm init wasm-app
2.2.配合方式：
通常与 wasm-pack-template 项目搭配使用，方法如下：
# 假设你在 rust-wasm-lib/ 中使用 wasm-pack-template 构建了库
cd rust-wasm-lib/
wasm-pack build
npm link
# 然后在 JS 项目中引入
cd ../my-project/
npm link rust-wasm-lib
你也可以把构建好的 .wasm 包发布到 npm，然后在前端项目中 npm install 来引入。
三、模板三：rust-webpack-template
🧰 适合目标：希望使用 webpack 打包 Rust 和 JS 的一体化项目
这是一个高级模板，它将 Rust 项目直接通过 webpack 的 rust-loader 集成进前端构建流程。适合那些习惯用 Webpack 构建一切的人。
3.1.启动项目：
mkdir my-project
cd my-project/
npm init rust-webpack
3.2. 特点：
- 使用
rust-webpack-plugin自动构建.wasm - 可热更新
- 适合纯 JS + Rust 混合项目，如游戏/图形引擎/WebGL 应用
四、三者之间的关系和组合
| 模板名 | 用途 | 适合角色 |
|---|---|---|
| wasm-pack-template | 构建 .wasm npm 包（Rust 编写） | 类库作者 |
| create-wasm-app | 构建前端消费 .wasm 的 JS 项目 | 应用开发者 |
| rust-webpack-template | Rust + JS 一体化项目构建 | 全栈工程师 / 游戏开发 |
你可以这样组合：
[wasm-pack-template] → 构建成 npm 包 → 被 [create-wasm-app] 安装使用
五、小结与推荐
- 如果你是第一次接触 Rust Wasm，推荐从
wasm-pack-template入手，体会.wasm是怎么从 Rust 生成并暴露给 JS 使用的。 - 如果你已经有前端项目，希望引入 Rust 模块增强性能或功能，选择
create-wasm-app。 - 如果你倾向于一体化构建方案、全栈工程，使用
rust-webpack-template更加流畅。
六、实战建议
- 在 CI/CD 中结合
wasm-pack build，实现自动发布.wasmnpm 包。 - 若需最大体积优化，搭配使用
wasm-opt。 - 发布到 npm 前，务必更新版本号，避免冲突。
如果你想要我帮你构建一个基于这些模板的项目骨架、或搭建 GitHub Actions 自动构建 .wasm + npm 发布流程，欢迎随时告诉我！