Rust 编译为WebAssembly 在前端项目中使用( 二 ) _Rust

在一些其他的教程中可以不使用wasm-bindgen构建Hello World程序，但是在本文中，我们将使用它，因为它在Rust WebAssembly开发中是必不可少的。
cargo install wasm-bindgen-cliRust WebAssembly允许我们将WebAssembly模块有针对性地插入到现有的JAVAScript应用程序中，尤其是在「性能关键的代码路径」中。我们可以将wasm-bindgen视为一种工具，它通过生成用于JavaScript和WebAssembly之间高效交互的「粘合代码」和绑定来帮助我们实现丝滑的交互体验。
2.2 创建Rust WebAssembly项目巴拉拉小魔仙，念诵如下咒语，构建一个Rust WebAssembly项目。
cargo new hello_world --lib上面的代码是使用Cargo工具创建一个新的Rust项目，项目的名称是hello_world ，并且指定它是一个库（--lib）。这将创建一个包含基本项目结构的文件夹，其中包括一个Cargo.toml文件和一个src文件夹。
+-- Cargo.toml+-- src+-- lib.rs

Cargo.toml文件用于管理项目的依赖和配置
src文件夹包含项目的Rust源代码文件
项目名称hello_world是一个示例名称，我们可以根据自己的需求为项目指定不同的名称。

2.3 修改Cargo.toml配置项使用宇宙最强IDE -VScode，打开Cargo.toml文件。我们应该会看到以下内容。
[package]name = "hello_world"version = "0.1.0"authors = ["789"]edition = "2021"[dependencies]将其修改成下面的内容

[package]name = "hello_world"version = "0.1.0"authors = ["789"]edition = "2021"[lib]crate-type = ["cdylib"][dependencies]wasm-bindgen = "0.2"

上面的大部分字段大家都能看懂，其中lib项的配置，这里稍微解释一下：
crate-type = ["cdylib"]: 这一行「指定了生成的库的类型」。在这里，crate-type 设置为["cdylib"]，这表示我们正在创建一个动态链接库（C-compatible dynamic library）。这用于编译一个供其他编程语言加载的动态库。此输出类型将在linux上创建*.so文件，在macOS上创建*.dylib文件，在windows上创建*.dll文件。
这种类型的库可以被其他编程语言调用，因为它们与C语言兼容。这对于与WebAssembly（Wasm）互操作性很重要，因为Wasm通常需要与C语言接口进行交互。因此， cdylib 表示该库是一个可供其他语言使用的动态链接库。
2.4 编辑lib.rs打开src/lib.rs文件。将其更改为以下内容：

extern crate wasm_bindgen;use wasm_bindgen::prelude::*;// 导入 'window.alert'#[wasm_bindgen]extern "C" {fn alert(s: &str);}// 导出一个 'helloworld' 函数#[wasm_bindgen]pub fn helloworld(name: &str) {alert(&format!("Hello World : {}!", name));}

我们简单解释一下核心代码:

extern crate wasm_bindgen;: 这一行声明了对wasm_bindgen库的依赖。wasm_bindgen是一个Rust库，用于构建Wasm模块并提供与JavaScript的互操作性。在 Rust 当中，库被称为crates，因为我们使用的是一个外部库，所以有 extern 。
use wasm_bindgen::prelude::*;: 这一行导入了wasm_bindgen库的预导出（prelude）模块中的所有内容，以便在后续代码中使用。

在 Rust 中调用来自 JavaScript 的外部函数#[wasm_bindgen]extern "C" {fn alert(s: &str);}#[wasm_bindgen]: 在 #[] 中的内容叫做 "属性" ，并以某种方式改变下面的语句。#[wasm_bindgen]是一个「属性标记」，用于指定与WebAssembly互操作相关的特性。
extern "C" { fn alert(s: &str); }: 这里声明了一个「外部函数」alert，它使用extern "C" 指定了C ABI（应用二进制接口），这意味着它「可以与C语言进行交互」。「这个alert函数没有在Rust中实现，而是在JavaScript中实现，用于在浏览器中显示警告框」。
在 JavaScript 中调用的 Rust 函数#[wasm_bindgen]pub fn helloworld(name: &str) {alert(&format!("Hello World : {}!", name));}#[wasm_bindgen] pub fn helloworld(name: &str): 这是一个Rust函数helloworld，它被标记为wasm_bindgen，这意味着它「可以被JavaScript调用」。这个函数接受一个「字符串参数」name，然后调用「之前声明」的alert函数，以显示带有Hello World消息的弹框，并在消息中包括name参数的内容。
2.5 编译代码在命令行中输入以下命令：