跳到主要内容

环境配置

本章节将指导你配置 WebAssembly 开发环境，包括工具链安装、项目初始化和基本配置。

开发环境概览​

WebAssembly 开发需要以下工具：

  • 编译器：将源代码编译为 WebAssembly 二进制
  • 构建工具：打包和优化 WebAssembly 模块
  • 调试工具：浏览器开发者工具和专用调试器
  • 运行时：浏览器或 Node.js 环境

根据你选择的语言，需要不同的工具链：

语言编译器构建工具
Rustrustc + wasm-bindgenwasm-pack
C/C++Emscripten (emcc)emcc
AssemblyScriptascasc
WATwat2wasmwabt

安装 Rust 工具链​

Rust 是开发 WebAssembly 的首选语言，提供了完善的工具链支持。

安装 Rust​

访问 rustup.rs 或运行以下命令：

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Windows 用户可以下载 rustup-init.exe 安装。

安装完成后，验证安装：

rustc --version
cargo --version

安装 wasm-pack​

wasm-pack 是 Rust WebAssembly 的核心构建工具，它简化了编译、打包和发布流程：

cargo install wasm-pack

验证安装：

wasm-pack --version

安装 wasm-bindgen​

wasm-bindgen 用于生成 JavaScript 和 WebAssembly 之间的绑定代码。通常由 wasm-pack 自动管理，但也可以单独安装：

cargo install wasm-bindgen-cli

安装 Emscripten​

Emscripten 是将 C/C++ 编译为 WebAssembly 的主流工具链。

安装依赖​

Emscripten 需要 Python 和 Git：

python --version
git --version

安装 Emscripten SDK​

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

./emsdk install latest
./emsdk activate latest

Windows 用户：

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

emsdk install latest
emsdk activate latest

配置环境变量​

每次使用前需要激活 Emscripten 环境：

source ./emsdk_env.sh

Windows：

emsdk_env.bat

验证安装：

emcc --version

安装 WABT 工具集​

WABT (WebAssembly Binary Toolkit) 提供了处理 WebAssembly 文本格式和二进制格式的工具。

从源码编译​

git clone https://github.com/WebAssembly/wabt.git
cd wabt
git submodule update --init
mkdir build
cd build
cmake ..
cmake --build .

使用包管理器安装​

macOS：

brew install wabt

Ubuntu：

sudo apt install wabt

Windows (使用 Scoop)：

scoop install wabt

WABT 常用工具​

工具功能
wat2wasm将 WAT 文本格式编译为 WASM 二进制
wasm2wat将 WASM 二进制反编译为 WAT 文本
wasm-validate验证 WASM 文件格式
wasm-objdump查看 WASM 文件结构

安装 AssemblyScript​

AssemblyScript 是 TypeScript 语法的 WebAssembly 开发语言，适合前端开发者。

npm install -g assemblyscript

验证安装：

asc --version

Node.js 环境​

WebAssembly 也可以在 Node.js 中运行，需要 Node.js 8+ 版本：

node --version

安装最新 LTS 版本：

nvm install --lts
nvm use --lts

浏览器开发工具​

现代浏览器都内置了 WebAssembly 支持：

Chrome DevTools​

  1. 打开开发者工具 (F12)
  2. Sources 面板可以查看 .wasm 文件
  3. 支持 WebAssembly 断点调试
  4. Performance 面板可以分析 Wasm 性能

Firefox Developer Tools​

  1. 内置 Wasm 调试器
  2. 可以查看 WAT 格式源码
  3. 支持单步调试

Edge DevTools​

与 Chrome 类似，基于 Chromium 内核。

创建第一个项目​

Rust WebAssembly 项目​

使用 wasm-pack 创建新项目：

cargo new --lib hello-wasm
cd hello-wasm

编辑 Cargo.toml：

[package]
name = "hello-wasm"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2"

编辑 src/lib.rs：

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

构建项目：

wasm-pack build

C/C++ WebAssembly 项目​

创建简单的 C 文件 hello.c：

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
    return a + b;
}

编译为 WebAssembly：

emcc hello.c -o hello.js -s EXPORTED_FUNCTIONS="['_add']"

WAT 项目​

创建 add.wat 文件：

(module
  (func $add (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add)
  (export "add" (func $add)))

编译为 WebAssembly：

wat2wasm add.wat -o add.wasm

项目结构建议​

一个典型的 WebAssembly 项目结构：

my-wasm-project/
├── src/
│   ├── lib.rs          # Rust 源码
│   └── utils.rs        # 辅助模块
├── pkg/                # wasm-pack 输出目录
│   ├── my_wasm.d.ts    # TypeScript 类型定义
│   ├── my_wasm.js      # JavaScript 绑定
│   └── my_wasm_bg.wasm # WebAssembly 二进制
├── www/                # Web 前端
│   ├── index.html
│   ├── index.js
│   └── package.json
├── Cargo.toml          # Rust 配置
└── README.md

常见问题​

编译速度慢​

Rust 编译 WebAssembly 可能较慢，可以通过以下方式优化：

[profile.release]
opt-level = "s"
lto = true

内存限制​

WebAssembly 默认内存有限，可以通过配置增加：

// Rust
#[wasm_bindgen]
pub fn init_memory() {
    // 使用 wasm-bindgen 的内存配置
}

调试困难​

在开发模式下启用调试信息：

wasm-pack build --dev

下一步​

环境配置完成后，你可以继续学习：