wasm-pack
要构建包，我们需要一个额外的工具，wasm-pack. 这有助于将代码编译为 WebAssembly，并生成在浏览器中使用的正确包装。要下载并安装它，请在您的终端中输入以下命令：
cargo install wasm-pack
构建我们的 WebAssembly 包
让我们在 Rust 中创建一个新包。导航到您保存个人项目的位置，然后键入：
$ cargo new --lib hello-wasm
Created library `hello-wasm` project
这将在一个子目录中创建一个新库，该子目录hello-wasm包含您需要开始的所有内容：
+-- Cargo.toml
+-- src
+-- lib.rs
首先，我们有Cargo.toml；这是我们用来配置构建的文件。如果您使用Gemfile过 Bundler 或package.jsonnpm，这可能很熟悉；Cargo 的工作方式与两者类似。
接下来，Cargo 为我们生成了一些 Rust 代码src/lib.rs：
#[cfg(test)]
mod tests {
#[test]
fn it_works() {
assert_eq!(2 + 2, 4);
}
}
我们根本不会使用此测试代码，因此请删除它。
让我们写一些 Rust
让我们把这段代码改为src/lib.rs：
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
extern {
pub fn alert(s: &str);
}
#[wasm_bindgen]
pub fn greet(name: &str) {
alert(&format!("Hello, {}!", name));
}
将我们的代码编译为 WebAssembly
要正确编译我们的代码，我们首先需要使用Cargo.toml. 打开此文件，并将其内容更改为如下所示：
[package]
name = "hello-wasm"
version = "0.1.0"
authors = ["Your Name <you@example.com>"]
description = "A sample project with wasm-pack"
license = "MIT/Apache-2.0"
repository = "https://github.com/yourgithubusername/hello-wasm"
edition = "2018"
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"
Build
现在我们已经设置好所有内容，让我们构建包。在您的终端中输入：
wasm-pack build --target web
在网络上使用包
现在我们已经有了编译好的 wasm 模块，让我们在浏览器中运行它。
index.html让我们首先在项目的根目录中创建一个名为的文件，并为其提供以下内容：
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>hello-wasm example</title>
</head>
<body>
<script type="module">
import init, { greet } from "./pkg/hello_wasm.js";
init().then(() => {
greet("WebAssembly");
});
</script>
</body>
</html>
使用本地 Web 服务器（例如 ）为项目的根目录提供服务python3 -m http.server。如果您不确定该怎么做，请参阅运行简单的本地 HTTP 服务器。
注意：确保使用支持 MIME 类型的最新 Web 服务器application/wasm。较旧的 Web 服务器可能还不支持它。
index.html从 Web 服务器加载（如果您使用 Python3 示例：） http://localhost:8000。屏幕上出现一个警告框，其中有Hello, WebAssembly!。我们已经成功地从 JavaScript 调用到 Rust，并从 Rust 调用到 JavaScript。
让我们的包对 npm 可用
如果您想将 WebAssembly 模块与 npm 一起使用，我们需要进行一些更改。
让我们从使用 target bundler 选项重新编译 Rust 开始：
wasm-pack build --target bundler
接下来，让我们使用npm link这个包让其他已安装的 JavaScript 包可用
cd pkg
npm link
让我们移出目录pkg，创建一个新目录，site在以下位置进行尝试：
cd ..
mkdir site
cd site
npm link hello-wasm
接下来，我们需要配置 Webpack。创建webpack.config.js并将以下内容放入其中：
const path = require("path");
module.exports = {
entry: "./index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "index.js",
},
mode: "development",
};
接下来，创建一个名为 的文件index.js，并为其提供以下内容：
import("./node_modules/hello-wasm/hello_wasm.js").then((js) => {
js.greet("WebAssembly with npm");
});
这将从文件夹中导入新模块node_modules。这不被认为是最佳实践，但这是一个演示，所以现在还可以。加载后，它会调用greet该模块中的函数，并"WebAssembly"作为字符串传递。请注意这里没有什么特别之处，但我们正在调用 Rust 代码。就 JavaScript 代码而言，这只是一个普通模块。
最后，我们需要修改HTML文件；打开index.html文件并将当前内容替换为以下内容：
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>hello-wasm example</title>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
我们完成了文件制作。让我们试一试：
npm install
npm run serve
这将启动一个网络服务器。加载http://localhost:8080并在屏幕上出现一个警告框，其中有Hello, WebAssembly with npm!。我们已经成功地将 Rust 模块与 npm 一起使用。
网友评论