首页 > 文章 > 前端

如何在 Web 中运行 Rust 应用程序

时间：2025-01-27 22:33:50 172浏览收藏

有志者，事竟成！如果你在学习文章，那么本文《如何在 Web 中运行 Rust 应用程序》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

在Web中运行Rust应用程序：循序渐进指南

本文将引导您完成在Web浏览器中运行Rust应用程序的步骤。我们将创建一个简单的Rust包，将其编译成WebAssembly (Wasm)，并使用JavaScript与之交互。

第一步：安装Rust

首先，您需要在系统上安装Rust。请参考官方Rust安装指南：https://www.rust-lang.org/tools/install (请替换为实际链接，如果需要)。安装完成后，运行以下命令验证安装：

rustc --version

第二步：创建Rust包

使用Cargo创建一个新的Rust库项目：

cargo new rust-web-app --lib

这将创建一个包含Cargo.toml和src/lib.rs文件的目录结构。Cargo.toml是项目的配置文件，lib.rs包含Rust代码。

第三步：编译为WebAssembly

为了在Web上运行Rust代码，我们需要将其编译为WebAssembly。为此，安装wasm-pack工具：

cargo install wasm-pack

第四步：启用Rust和JavaScript互操作

为了让Rust和JavaScript能够互相通信，我们需要使用wasm-bindgen crate。修改Cargo.toml文件，添加wasm-bindgen依赖：

[package]
name = "rust-web-app"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2"

然后运行以下命令安装依赖：

cargo build

第五步：编写Rust代码

在src/lib.rs中编写一个简单的函数，例如加法函数，并使用#[wasm_bindgen]属性将其暴露给JavaScript：

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(left: u64, right: u64) -> u64 {
    left + right
}

第六步：编译为WebAssembly并生成JavaScript绑定

使用wasm-pack编译Rust代码并生成JavaScript绑定：

wasm-pack build --target web

这将在pkg目录下生成必要的WebAssembly文件和JavaScript绑定代码。

第七步：创建HTML文件

创建一个index.html文件，引入生成的JavaScript文件并调用Rust函数：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello Rust</title>
</head>
<body>
    <script type="module">
        import init, { add } from "./pkg/rust_web_app.js";
        init().then(() => {
            const sum = add(5, 10);
            console.log("5 + 10 =", sum);
        });
    </script>
</body>
</html>

第八步：运行应用程序

使用本地Web服务器（例如，python -m http.server）提供index.html文件。在浏览器中打开index.html，并在浏览器控制台中查看结果（5 + 10 = 15）。

最终项目结构:

.
├── Cargo.lock
├── Cargo.toml
├── index.html
├── pkg
│   ├── package.json
│   ├── rust_web_app.d.ts
│   ├── rust_web_app.js
│   ├── rust_web_app_bg.wasm
│   └── rust_web_app_bg.wasm.d.ts
├── src
│   └── lib.rs
└── target
    ...

参考:

官方Wasm-bindgen文档 (请替换为实际链接，如果需要)

希望这个指南对您有所帮助！请记住根据实际情况调整路径和文件名。

好了，本文到此结束，带大家了解了《如何在 Web 中运行 Rust 应用程序》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！