将 Rust 代码编译为 WASM
前言
在现代 Web 开发中，WebAssembly (WASM) 已成为一种强大的工具。它使得开发者可以在浏览器中运行高性能的代码，跨越传统的 JavaScript 性能限制。Rust 语言因其高效性和内存安全性，成为了编写 WASM 模块的热门选择。本文将介绍如何将 Rust 代码编译为 WebAssembly，并在 Web 项目中使用。
1. 创建 Rust 项目
首先，我们需要创建一个新的 Rust 项目。由于我们要生成一个可以被其它语言或工具调用的模块，因此选择创建一个库项目，而不是可执行程序。使用 cargo 命令可以轻松完成：
cargo new lib_wasm --lib
这个命令会生成一个名为 lib_wasm 的项目，其中包含一个基础的 Cargo.toml 配置文件和一个 src/lib.rs 文件，你将在其中编写你的 Rust 代码。
2. 添加 wasm-bindgen 依赖项
在 Rust 中，wasm-bindgen 是一个关键工具，它使 Rust 和 JavaScript 之间的交互变得更加简单。wasm-bindgen 负责生成与 JavaScript 交互所需的绑定代码，让你能够直接调用 Rust 编写的函数。
要添加 wasm-bindgen，你可以使用 cargo add 命令：
cargo add wasm-bindgen
或者，手动编辑 Cargo.toml 文件，添加如下依赖项：
[dependencies]
wasm-bindgen = "0.2"
添加 wasm-bindgen 后，Rust 编译器会在编译过程中生成必要的绑定文件，从而使你的 WASM 模块可以被 JavaScript 直接调用。
3. 安装 wasm32-unknown-unknown 目标
Rust 编译器默认会生成适用于本地机器架构的可执行文件。要编译成适用于 Web 的 WebAssembly 文件，我们需要添加一个特定的目标架构，即 wasm32-unknown-unknown。这是一个通用的 WASM 目标，不依赖任何特定的操作系统。
使用以下命令安装该目标：
rustup target add wasm32-unknown-unknown
此命令会配置你的 Rust 工具链，使其能够生成适用于 WebAssembly 的二进制文件。
4. 编写 Rust 代码
现在，你可以在 src/lib.rs 文件中编写你希望导出的功能。例如，我们可以编写一个简单的函数，它接受一个名字作为参数并返回一个问候语：
use wasm_bindgen::prelude::*;
// 使用 #[wasm_bindgen] 宏来导出函数到 JavaScript
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}
在这段代码中，我们使用了 #[wasm_bindgen] 宏将 greet 函数导出，使其可以从 JavaScript 中调用。
5. 编译 Rust 项目为 WASM
编写完代码后，我们可以将其编译为 WASM 文件。编译时指定目标为 wasm32-unknown-unknown，并使用 --release 选项生成优化后的构建：
cargo build --target wasm32-unknown-unknown --release
编译完成后，生成的 .wasm 文件将存储在 target/wasm32-unknown-unknown/release/ 目录下。
6. 使用 wasm-bindgen 生成 JavaScript 绑定代码
虽然编译生成了 .wasm 文件，但直接在 JavaScript 中使用它并不方便。为此，我们需要使用 wasm-bindgen 工具生成相应的 JavaScript 绑定代码。这将创建一个便于在 JavaScript 中调用的模块。
首先，确保已安装 wasm-bindgen-cli 工具。你可以通过以下命令安装：
cargo install wasm-bindgen-cli
然后，运行以下命令生成 JavaScript 绑定文件：
wasm-bindgen --out-dir ./out --target web target/wasm32-unknown-unknown/release/lib_wasm.wasm
这会在 out 目录中生成一系列文件，包括 .js 文件和 .wasm 文件，你可以直接在 Web 项目中使用。
7. 在网页中使用 WASM 模块
现在，生成的 WASM 模块已经可以在 Web 项目中使用。你只需在 HTML 文件中导入生成的 JavaScript 绑定文件，并调用 Rust 导出的函数。例如：
<!DOCTYPE html>
<html>
<head>
<title>Lib WASM Demo</title>
</head>
<body>
<script type="module">
import init, { greet } from "./out/lib_wasm.js";
init().then(() => {
console.log(greet("World"));
});
</script>
</body>
</html>
这个示例会在控制台打印出 "Hello, World!"。其中，init 函数用于初始化 WASM 模块，而 greet 函数则调用了我们在 Rust 中定义的函数。
8. 目录结构
经过以上步骤，你的项目目录结构可能如下：
index.html
out/
├── lib_wasm_bg.wasm
├── lib_wasm_bg.wasm.d.ts
├── lib_wasm.d.ts
└── lib_wasm.js
out 目录中包含了生成的 WASM 文件以及相应的 JavaScript 绑定文件，index.html 是一个简单的网页，用于测试和展示你的 WASM 模块。
结语
通过这套流程，你可以轻松地将 Rust 代码编译为 WebAssembly，并将其集成到 Web 项目中。Rust 的高效性和 WebAssembly 的灵活性相结合，可以为 Web 应用带来显著的性能提升。
将 Rust 代码编译为 WASM的更多相关文章
- 试试将.NET7编译为WASM并在Docker上运行
之前有听到说Docker支持Wasmtime了,刚好.NET7也支持WASM,就带大家来了解一下这个东西,顺便试试它怎么样. 因为WASM(WebAssembly) 一开始是一个给浏览器的技术,比起J ...
- 使用Apache TVM将机器学习编译为WASM和WebGPU
使用Apache TVM将机器学习编译为WASM和WebGPU TLDR 在Apache TVM深度学习编译器中引入了对WASM和WebGPU的支持.实验表明,在将模型部署到Web时,TVM的WebG ...
- 如何提升代码编译的速度 iOS
前阵子有遇到代码编译速度慢的问题,特别是在swift和object-c混编的过程中问题很突显. 网上找到一篇蛮好的文章里面又一些解决方法 推荐一下 http://www.open-open.com/l ...
- Java 代码编译和执行的整个过程
Java 代码编译是由 Java 源码编译器来完成,流程图如下所示: Java 字节码的执行是由 JVM 执行引擎来完成,流程图如下所示: Java 代码编译和执行的整个过程包含了以下三个重要的机制: ...
- java-cef系列视频第一集：从官方代码编译
本视频介绍了如何从官方给出步骤编译java-cef代码,生成可运行可移植的发行版. 值得一提的是:截至2016-09-24java-cef代码编译方式有所改变,读者请自行查看bitbucket上关于编 ...
- 利用Roslyn把C#代码编译到内存中并进行执行
Tugberk Ugurlu在其博文<Compiling C# Code Into Memory and Executing It with Roslyn>中给大家介绍了一种使用.NET下 ...
- JVM学习笔记（二）------Java代码编译和执行的整个过程【转】
转自:http://blog.csdn.net/cutesource/article/details/5904542 版权声明:本文为博主原创文章,未经博主允许不得转载. Java代码编译是由Java ...
- JVM学习笔记（二）------Java代码编译和执行的整个过程
Java代码编译是由Java源码编译器来完成,流程图如下所示: Java字节码的执行是由JVM执行引擎来完成,流程图如下所示: Java代码编译和执行的整个过程包含了以下三个重要的机制: Java源码 ...
- xcode针对不同IOS版本的代码编译问题
有时候在项目中为了兼容低版本IOS系统,通常会针对不同的OS版本写不同的代码,例如: #define IS_IOS7_OR_LATER ([[UIDevice currentDevice].syste ...
- 如何把iOS代码编译为Android应用
新闻 <iPhone 6/6 Plus中国销量曝光:单月销量650万>:据iSuppli Corp.中国研究总监王阳爆料,iPhone 6和iPhone 6 Plus在国内受欢迎的情况大大 ...
随机推荐
- VMware 虚拟机下载
VMware破解版下载地址: https://www.aliyundrive.com/s/CUr4eaMgxGa 提取码:e0c8 激活码: ZF3R0-FHED2-M80TY-8QYGC-NPKYF ...
- Nuxt.js 深入浅出：目录结构与文件组织详解
title: Nuxt.js 深入浅出:目录结构与文件组织详解 date: 2024/6/18 updated: 2024/6/18 author: cmdragon excerpt: 摘要:本文详述 ...
- Service Mesh技术详解
深入探讨Service Mesh的基本概念和核心技术,涵盖了服务发现.负载均衡.断路器与熔断机制,以及数据平面与控制平面的详细工作原理和实现方法. 关注作者,复旦博士,分享云服务领域全维度开发技术.拥 ...
- 使用Scrcpy 在电脑显示手机画面并控制安卓设备
使用Scrcpy 显示手机画面并控制手机 原文(有删改):https://www.iplaysoft.com/scrcpy.html 背景 本文适用于安卓开发人员,不针对普通安卓手机用户. 在安卓开发 ...
- Kubernetes 存储资源 PV、PVC 和StorageClass详解
一.存储机制介绍 在 Kubernetes 中,存储资源和计算资源(CPU.Memory)同样重要,Kubernetes 为了能让管理员方便管理集群中的存储资源,同时也为了让使用者使用存储更加方便,所 ...
- Golang 依赖注入设计哲学｜12.6K 🌟 的依赖注入库 wire
一.前言 线上项目往往依赖非常多的具备特定能力的资源,如:DB.MQ.各种中间件,以及随着项目业务的复杂化,单一项目内,业务模块也逐渐增多,如何高效.整洁管理各种资源十分重要. 本文从"术& ...
- Java常见的加密方式
前言 传说在古罗马时代,发生了一次大战.正当敌方部队向罗马城推进时,古罗马皇帝凯撒向前线司令官发出了一封密信:VWRS WUDIILF.这封密信被敌方情报人员翻遍英文字典,也查不出这两个词的意思. 此 ...
- 新一代Java高性能构建工具Maven-mvnd【实践可行版】
Maven-mvnd介绍 Maven 的优点是稳定可靠,在绝大多数的项目上工作良好,社区生态很完善,几乎所有的 Java 开发者都在用.Maven 的缺点是,对于大一点的项目来说,构建太慢了.有时候只 ...
- 【算法】用c#实现自定义字符串编码及围栏解码方法
编写一个函数/方法,它接受2个参数.一个字符串和轨道数,并返回ENCODED字符串. 编写第二个函数/方法,它接受2个参数.一个编码字符串和轨道数,并返回DECODED字符串. 然后使用围栏密码对其进 ...
- 怎么用git命令将其他分支的提交记录提取到当前分支上
您可以使用 Git 命令 "cherry-pick" 将其他分支的提交记录提取到当前分支上.以下是使用 cherry-pick 命令的步骤:1. 切换到当前分支: `git che ...