将Rust程序编译成WebAssembly

Frey February 19, 2022 [编程] #rust #webassembly

环境搭建

  1. 这里安装Rust工具链,rustup(Rust版本管理),rustc(Rust编译器),cargo(Rust包管理)
  2. 安装wasm-pack,用于构建、测试发布Rust生成的WebAssembly
  3. 安装cargo-generate,用于从模板快速启动一个Rsut项目,cargo install cargo-generate
  4. 安装npm,用于运行JavaScript bundler和开发服务器

实现Hello World

1.克隆基础模板项目

cargo generate --git https://github.com/rustwasm/wasm-pack-template

2.添加一个新的rust编译器

rustup target add wasm32-unknown-unknown

3.编译

wasm-pack build

启动Web服务器

1.初始化web项目

npm init wasm-app www

2.进入目录www,初始化依赖

npm install

3.在www项目中加载本地依赖wasm-app包

{
  // ...
  "dependencies": {                     // Add this three lines block!
    "wasm-app": "file:../pkg"
  },
  "devDependencies": {
    //...
  }
}

4.运行npm install在www项目中安装wasm-app依赖

5.修改文件wasm-game-of-life/www/index.js导入生成的库

6.启动服务器

npm run start

Back to top