快速启动 Rust + WebAssembly 项目

一、 模板一:wasm-pack-template

适合目标:构建一个 Rust 写的 WebAssembly npm 包

这是最常用、也是最官方推荐的起点模板。它提供了:

  • Cargo.toml 配置好 WebAssembly 的 crate 类型(cdylib
  • 已设置 wee_alloc 和 panic hook
  • 集成 wasm-bindgen 与类型定义导出
  • 支持通过 wasm-pack 构建并发布到 npm

1.1. 启动项目:

bash 复制代码
cargo install cargo-generate
cargo generate --git https://github.com/rustwasm/wasm-pack-template.git

1.2.构建:

bash 复制代码
wasm-pack build

此模板非常适合用来写 一个功能独立的 Rust 模块,供 JS/TS 项目消费,比如图像处理、压缩算法、文本解析器等。

二、模板二:create-wasm-app

适合目标:JS/TS 项目,需要调用 Rust 生成的 .wasm 模块

这是一个前端侧的模板,它用于创建一个消费 npm 上 .wasm 包的 JS 项目,集成了 webpack、TS、热更新等现代前端配置。

2.1.启动项目:

bash 复制代码
mkdir my-project
cd my-project/
npm init wasm-app

2.2.配合方式:

通常与 wasm-pack-template 项目搭配使用,方法如下:

bash 复制代码
# 假设你在 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.启动项目:

bash 复制代码
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 一体化项目构建 全栈工程师 / 游戏开发

你可以这样组合:

text 复制代码
[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,实现自动发布 .wasm npm 包。
  • 若需最大体积优化,搭配使用 wasm-opt
  • 发布到 npm 前,务必更新版本号,避免冲突。

如果你想要我帮你构建一个基于这些模板的项目骨架、或搭建 GitHub Actions 自动构建 .wasm + npm 发布流程,欢迎随时告诉我!

相关推荐
ruan11451410 分钟前
Java Lambda 类型推断详解:filter() 方法与 Predicate<? super T>
java·开发语言·spring·stream
广东数字化转型13 分钟前
java jar 启动应用程序
开发语言·python
阿幸软件杂货间15 分钟前
阿幸课堂随机点名
android·开发语言·javascript
threelab24 分钟前
three案例 Three.js波纹效果演示
开发语言·javascript·ecmascript
黎明smaly37 分钟前
【排序】插入排序
c语言·开发语言·数据结构·c++·算法·排序算法
辣辣y1 小时前
python基础day08
开发语言·python
Json____1 小时前
使用python的 FastApi框架开发图书管理系统-前后端分离项目分享
开发语言·python·fastapi·图书管理系统·图书·项目练习
人生在勤,不索何获-白大侠2 小时前
day16——Java集合进阶(Collection、List、Set)
java·开发语言
LIN-JUN-WEI2 小时前
[ESP32]VSCODE+ESP-IDF环境搭建及blink例程尝试(win10 win11均配置成功)
c语言·开发语言·ide·vscode·单片机·学习·编辑器
望获linux3 小时前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件