使用 Rust 和 wasm-pack 开发 WebAssembly 应用
WebAssembly (Wasm) 是一种在现代浏览器中运行的二进制指令格式，旨在实现高效的代码执行和更好的应用性能。Rust 作为一种系统编程语言，以其内存安全和高性能而闻名，成为开发 WebAssembly 应用的热门选择之一。本文将为你介绍如何使用 Rust 和 wasm-pack 开发 WebAssembly 应用，并提供相关的代码示例。
环境准备
在开始之前，你需要确保你的开发环境已经安装了以下工具：
- Rust：可以通过Rust的官方安装工具rustup自动安装。
- wasm-pack：用于构建和打包 WebAssembly 模块，可通过以下命令安装：
bash cargo install wasm-pack - Node.js 和 npm：本示例将使用 Node.js 服务器来运行我们的应用。
创建 Rust 项目
首先，创建一个新的 Rust 项目：
cargo new wasm-example --lib
cd wasm-example
然后，在项目目录中，编辑 Cargo.toml 文件，添加 wasm-bindgen 依赖项：
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"
编写 Rust 代码
接下来，在 src/lib.rs 中编写一些简单的 Rust 代码，以便与 JavaScript 进行交互：
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}
这里，我们定义了一个 greet 函数，它接受一个字符串作为参数，并返回一条问候消息。
构建 WebAssembly 模块
使用 wasm-pack 构建我们的 WebAssembly 模块。在项目根目录下运行以下命令：
wasm-pack build --target web
该命令会在 pkg 目录下生成 WebAssembly 二进制文件和 TypeScript 声明文件。
创建前端应用
在 pkg 目录中生成的文件后，需要创建一个前端应用来使用我们的 WebAssembly 模块。创建一个新的文件夹 web，并在里面初始化一个新的 npm 项目：
mkdir web
cd web
npm init -y
然后安装所需的库：
npm install --save-dev webpack webpack-cli html-webpack-plugin
接着，在 web 目录下创建一个名为 index.js 的文件，将生成的 WebAssembly 模块引入其中：
import("../pkg").then(wasm => {
const name = "World";
console.log(wasm.greet(name)); // 输出: Hello, World!
});
接下来，创建一个 webpack.config.js 文件，配置 webpack：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
}),
],
mode: 'development',
};
最后，创建一个 index.html 文件，该文件是我们的前端页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wasm Example</title>
</head>
<body>
<h1>Check the console for output</h1>
<script src="bundle.js"></script>
</body>
</html>
运行应用
现在，你可以在 web 目录中运行 webpack，以构建前端应用：
npx webpack
然后，可以使用任何 HTTP 服务器来测试应用，比如 http-server 或 serve。
你现在可以打开浏览器，在控制台中看到输出：Hello, World!。
结论
通过本教程，我们展示了如何使用 Rust 和 wasm-pack 开发简单的 WebAssembly 应用。Rust 的性能和类型安全结合 WebAssembly 的快速执行能力，使得这种组合非常适合开发高性能的前端应用。你可以在此基础上，扩展更多的功能，创建更复杂的 WebAssembly 应用。
![[Javase]深入理解跨平台原理](http://img.makehui.com/947.jpg)
