通过从JavaScript调用Rust来构建和扩充库【Programming（JavaScript）】

Potato

修改于 2019-11-25 15:13:20

2.7K0

修改于 2019-11-25 15:13:20

文章被收录于专栏：Opensource翻译专栏

探索如何使用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 删除。

javascript

api

html

编程算法

本文系外文翻译，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度