通过从JavaScript调用Rust来构建和扩充库【Programming（JavaScript）】
通过从JavaScript调用Rust来构建和扩充库【Programming（JavaScript）】
探索如何使用WebAssembly（Wasm）将Rust嵌入JavaScript。
在《为什么要在WebAssembly中使用Rust？》中，我探讨了为什么您可能要编写WebAssembly（Wasm），以及为什么选择Rust作为其语言。现在，我将通过探索将Rust嵌入JavaScript的方式来分享这个过程。
这是将Rust与Go，C＃和其他大型语言（具有可编译为Wasm的大型运行时）区分开来的功能。Rust的运行时最少（基本上只是一个分配器），可以轻松地从JavaScript库使用Rust。C和C++相似，但是Rust的独特之处在于它的工具，现在我们来看一下。
基本知识
如果您以前从未使用过Rust，那么您首先需要进行设置。很简单首先下载Rustup，这是一种控制Rust版本和不同工具链进行交叉编译的方式。这将使您可以访问Cargo，这是Rust构建工具和包管理器。
现在我们要做出决定。我们可以很容易地编写通过WebAssembly在浏览器中运行的Rust代码，但是如果我们不想让人们的CPU风扇疯狂旋转，我们可能会在某个时候想与文档对象模型（DOM）进行交互或使用一些JavaScript API。 换句话说，我们需要 JavaScript 互操作(也就是 JavaScript 互操作 API)。
问题与解决方案
WebAssembly是一种非常简单的机器语言。如果我们希望能够与JavaScript进行通信，Wasm仅提供四种数据类型来进行处理：32位和64位浮点数和整数。Wasm没有字符串，数组，对象或任何其他丰富数据类型的概念。基本上，我们只能在Rust和JavaScript之间传递指针。不用说，这不是理想的。
好消息是，有两个库可促进基于Rust的Wasm与JavaScript之间的通信：wasm-bindgen和stdweb。然而，坏消息是，这两个库互不兼容。Wasm-bindgen比stdout更底层，它试图提供对JavaScript和Rust交互方式的完全控制。实际上，甚至有人在谈论使用wasm-bindgen重写stdweb，这将解决不兼容的问题。
因为wasm-bindgen是更轻量级的选项（该选项由Rust WebAssembly官方工作组正式开发），所以我们将重点讨论这个选项。
wasm-bindgen和wasm-pack
我们将创建一个函数，该函数从JavaScript中获取字符串，将其变为大写并在其前面加上“HELLO”，然后将其返回给JavaScript。 我们称这个函数为excited_greeting ！
首先，让我们创建一个Rust库，其中将包含这个函数：
$ cargo new my-wasm-library --lib
$ cd my-wasm-library现在，我们要用令人兴奋的逻辑替换src / lib.rs的内容。 我认为最好自己尝试写出代码而不是复制/粘贴。
// Include the `wasm_bindgen` attribute into the current namespace.
use wasm_bindgen::prelude::wasm_bindgen;
// This attribute makes calling Rust from JavaScript possible.
// It generates code that can convert the basic types wasm understands
// (integers and floats) into more complex types like strings and
// vice versa. If you're interested in how this works, check this out:
// https://blog.ryanlevick.com/posts/wasm-bindgen-interop/
#[wasm_bindgen]
// This is pretty plain Rust code. If you've written Rust before this
// should look extremely familiar. If not, why wait?! Check this out:
// https://doc.rust-lang.org/book/
pub fn excited_greeting(original: &str) -> String {
format!("HELLO, {}", original.to_uppercase())
}其次，我们必须对Cargo.toml配置文件进行两项更改：
- 添加wasm_bindgen作为依赖项。
- 将库二进制文件的类型配置为cdylib或动态系统库。在这种情况下，我们的系统是wasm，设置此选项是我们产生.wasm二进制文件的方式。
[package]
name = "my-wasm-library"
version = "0.1.0"
authors = ["$YOUR_INFO"]
edition = "2018"
[lib]
crate-type = ["cdylib", "rlib"]
[dependencies]
wasm-bindgen = "0.2.33"现在开始构建！ 如果仅使用cargo build ，我们将获得一个.wasm二进制文件，但是为了使从JavaScript调用Rust代码更容易，我们希望有一些JavaScript代码可以将丰富的JavaScript类型（例如字符串和对象）转换为指针，并代表我们将这些指针传递给Wasm模块。 手动执行此操作很繁琐且容易出现错误。
幸运的是，wasm-bindgen不仅仅只是一个库，它还具有为我们创建一种“胶水”JavaScript的能力。 这意味着在我们的代码中，我们可以使用普通的JavaScript类型与Wasm模块进行交互，并且wasm-bindgen生成的代码将完成将这些丰富的类型转换为Wasm真正理解的指针类型的工作。
我们可以使用wasm-pack来构建Wasm二进制文件，调用wasm-bindgen CLI工具，然后将所有JavaScript（以及任何可选的生成的TypeScript类型）打包到一个简洁的程序包中。 现在就开始吧！
首先，我们需要安装wasm-pack ：
$ cargo install wasm - pack默认情况下，wasm-bindgen 生成 ES6模块。 我们将使用来自一个简单脚本标记的代码，因此我们只希望它生成一个普通的旧JavaScript 对象，使我们能够访问 Wasm 函数。 为此，我们将传递 -- target no-modules 选项。
$ wasm - pack build -- target no - modules现在，我们的项目中有一个pkg目录。 如果我们查看内容，将会看到以下内容：
- package.json ：如果我们要将其打包为NPM模块，则很有用
- my_wasm_library_bg.wasm ：我们实际的Wasm代码
- my_wasm_library.js ：JavaScript“胶水”代码
- 一些TypeScript定义文件
现在，我们可以创建一个index.html文件，该文件将使用我们的JavaScript和Wasm：
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
</head>
<body>
<!-- Include our glue code -->
<script src='./pkg/my_wasm_library.js'></script>
<!-- Include our glue code -->
<script>
window.addEventListener('load', async () => {
// Load the wasm file
await wasm_bindgen('./pkg/my_wasm_library_bg.wasm');
// Once it's loaded the `wasm_bindgen` object is populated
// with the functions defined in our Rust code
const greeting = wasm_bindgen.excited_greeting("Ryan")
console.log(greeting)
});
</script>
</body>
</html>你可能想在浏览器中打开HTML文件，但不幸的是，这是不可能的。出于安全原因，Wasm文件必须与HTML文件来自同一个域。你需要一个HTTP服务器。如果您有一个最喜欢的静态HTTP服务器，可以从您的文件系统提供文件，请随意使用它。我喜欢使用basic-http-server，你可以像这样安装和运行它：
$ cargo install basic-http-server
$ basic-http-server现在通过web服务器打开索引.html文件，访问googlehttp://localhost:4000/index.html并检查你的JavaScript控制台。你应该看到一个非常令人兴奋的问候！
如有任何疑问，请告诉我们。下次，我们将研究如何在Rust代码中使用各种浏览器和JavaScript API。
本文系外文翻译，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系外文翻译，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。