快速开始

环境配置

$ curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
$ cargo install cargo-generate
$ npm install npm@latest -g

Backend

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

项目结构如下所示：

├── Cargo.toml
├── LICENSE_APACHE
├── LICENSE_MIT
├── README.md
└── src
    ├── lib.rs
    └── utils.rs

Cargo.toml文件指定了Rust的包管理器和构建工具Cargo的依赖关系和元数据。这个文件预先配置了wasm-bindgen依赖关系，一些我们稍后会深入研究的可选依赖关系，以及为生成.wasm库而正确初始化的crate类型。src/lib.rs文件是我们要编译成WebAssembly的Rust crate的根。它使用wasm-bindgen与JavaScript接口。它导入了window.alert函数，并导出了greet Rust函数，该函数会提醒一个问候信息。

extern crate cfg_if;
extern crate wasm_bindgen;

mod utils;

use cfg_if::cfg_if;
use wasm_bindgen::prelude::*;

cfg_if! {
    // When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
    // allocator.
    if #[cfg(feature = "wee_alloc")] {
        extern crate wee_alloc;
        #[global_allocator]
        static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
    }
}

#[wasm_bindgen]
extern {
    fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet() {
    alert("Hello, wasm-game-of-life!");
}

src/utils.rs模块提供了一些常用的实用工具，使编译为WebAssembly的Rust工作变得更容易。我们将在后面的教程中更详细地介绍其中的一些实用工具，比如当我们研究调试wasm代码时，但我们现在可以忽略这个文件。我们使用 wasm-pack 来协调以下构建步骤。

• 确保我们有Rust 1.30或更新的版本，并通过rustup安装wasm32-unknown-unknown目标。
• 通过 “cargo “将我们的Rust源编译成WebAssembly.wasm二进制。
• 使用 “wasm-bindgen “来生成JavaScript API，以便使用我们的Rust生成的WebAssembly。

然后运行如下命令：

wasm-pack build

当构建完成后，我们可以在 pkg 目录下找到它的工件，它应该有这些内容。

pkg/
├── package.json
├── README.md
├── hello_world_bg.wasm
├── hello_world.d.ts
└── hello_world.js

.wasm文件是由Rust编译器从我们的Rust源代码中生成的WebAssembly二进制文件，它包含了所有Rust函数和数据的编译到wasm版本。它包含了我们所有Rust函数和数据的编译到wasm版本。例如，它有一个导出的 “greet “函数。.js文件是由wasm-bindgen生成的，它包含了JavaScript胶水，用于将DOM和JavaScript函数导入到Rust中，并将WebAssembly函数暴露给JavaScript一个不错的API。例如，有一个JavaScript greet函数，它包装了从WebAssembly模块导出的greet函数。现在，这个胶水并没有做什么，但当我们开始在wasm和JavaScript之间来回传递更多有趣的值时，它将帮助牧羊人将这些值越过边界。

import * as wasm from "./hello_world_bg";

// ...

export function greet() {
  return wasm.greet();
}

.d.ts文件中包含了JavaScript胶水的TypeScript类型声明，如果你使用TypeScript，你可以让你对WebAssembly函数的调用进行类型检查，你的IDE可以提供自动完成和建议。如果你使用TypeScript，你可以对WebAssembly函数的调用进行类型检查，并且你的IDE可以提供自动完成和建议！如果你没有使用TypeScript，你可以安全地忽略这个文件。如果你没有使用TypeScript，你可以放心地忽略这个文件。

export function greet(): void;

package.json文件包含了关于生成的JavaScript和WebAssembly包的元数据。这被npm和JavaScript捆绑程序用来确定不同包之间的依赖关系、包名、版本和其他一系列东西。它帮助我们与JavaScript工具集成，并允许我们将我们的包发布到npm。

{
  "name": "hello_world",
  "collaborators": ["Your Name <your.email@example.com>"],
  "description": null,
  "version": "0.1.0",
  "license": null,
  "repository": null,
  "files": ["hello_world_bg.wasm", "hello_world.d.ts"],
  "main": "hello_world.js",
  "types": "hello_world.d.ts"
}

Frontend

$ npm init wasm-app www

hello_world/www/
├── bootstrap.js
├── index.html
├── index.js
├── LICENSE-APACHE
├── LICENSE-MIT
├── package.json
├── README.md
└── webpack.config.js

这个package.json预先配置了webpack和webpack-dev-server的依赖，以及对hello-wasm-pack的依赖，它是已经发布到npm的wasm-pack-template初始包的一个版本。这个文件配置了webpack和它的本地开发服务器。它是预先配置好的，你不需要调整这个文件就可以让webpack和它的本地开发服务器工作。我们不想使用npm的hello-wasm-pack包，而是想使用我们本地的hello_world包。这将允许我们逐步开发我们的生活游戏程序。

{
  // ...
  "dependencies": {
    "hello_world": "file:../pkg" // Add this line!
    // ...
  }
}

import * as wasm from "hello_world";

wasm.greet();