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

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

2.6 构建Web服务器

既然,我们通过上述的魔法,将Rust程序编译为了可以在浏览器环境下引用执行的格式。为了这口醋,我们还专门包顿饺子


我们需要一个Web服务器来测试我们的WebAssembly程序。我们将使用Webpack,我们需要创建三个文件:index.jspackage.jsonwebpack.config.js

下面的代码,我们最熟悉不过了,就不解释了。

index.js

// 直接引入了,刚才编译后的文件
const rust = import('./pkg/hello_world.js');
rust
  .then(m => m.helloworld('World!'))
  .catch(console.error);

package.json

{
  "scripts": {
    "build": "webpack",
    "serve": "webpack-dev-server"
  },
  "devDependencies": {
    "@wasm-tool/wasm-pack-plugin": "0.4.2",
    "text-encoding": "^0.7.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.29.4",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.0"
  }
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js',
    },
    plugins: [
        new HtmlWebpackPlugin(),
        new WasmPackPlugin({
            crateDirectory: path.resolve(__dirname, ".")
        }),
        // 让这个示例在不包含`TextEncoder`或`TextDecoder`的Edge浏览器中正常工作。
        new webpack.ProvidePlugin({
            TextDecoder: ['text-encoding', 'TextDecoder'],
            TextEncoder: ['text-encoding', 'TextEncoder']
        })
    ],
    mode: 'development'
};

安装指定的依赖。

npm install webpack --save-dev
npm install webpack-cli --save-dev
npm install webpack-dev-server --save-dev
npm install html-webpack-plugin --save-dev
npm install @wasm-tool/wasm-pack-plugin --save-dev
npm install text-encoding --save-dev

2.7 构建&运行程序

使用npm run build构建程序。

使用npm run serve运行Hello World程序

在浏览器中打开localhost:8080,我们将看到一个显示 Hello World! 的弹窗。

image.png

到目前为止,我们已经构建了一个wasm并且能够和js实现功能交互的项目。其实,到这里已经完成了,我们这篇文章的使命。但是,在这里戛然而止,感觉缺失点啥。所以,我们继续深挖上面的项目的实现原理。


3. 原理探析

在使用cargowasm_bindgen编译源代码时,会在pkg文件中自动生成以下文件:

  • "hello_world_bg.wasm"
  • "hello_world.js"
  • "hello_world.d.ts"
  • "package.json"

这些文件也可以通过使用以下wasm-bindgen命令手动生成

bash

复制代码

wasm-bindgen target/wasm32-unknown-unknown/debug/hello_world.wasm --out-dir ./pkg

浏览器调用顺序

以下显示了当我们在浏览器中访问localhost:8080时发生的函数调用序列。

  1. index.js
  2. hello_world.js (调用hello_world_bg.js)
  3. helloworld_bg.wasm

index.js

const rust = import('./pkg/hello_world.js');
rust
  .then(m => m.helloworld('World!'))
  .catch(console.error);

index.js 导入了 hello_world.js 并调用其中的 helloworld 函数。

hello_world.js

下面是hello_world.js的内容,在其中它调用了helloworld_bg.wasm

import * as wasm from "./hello_world_bg.wasm";
import { __wbg_set_wasm } from "./hello_world_bg.js";
__wbg_set_wasm(wasm);
export * from "./hello_world_bg.js";

hello_world_bg.js

// ...省去了部分代码
export function helloworld(name) {
    const ptr0 = passStringToWasm0(name, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
    const len0 = WASM_VECTOR_LEN;
    wasm.helloworld(ptr0, len0);
}

hello_world_bg.js 文件是由wasm-bindgen自动生成的,它包含了用于将DOMJavaScript函数导入到Rust中的JavaScript粘合代码。它还在生成的WebAssembly函数上向JavaScript公开了API。

Rust WebAssembly专注于将WebAssembly与现有的JavaScript应用程序集成在一起。为了实现这一目标,我们需要在JavaScriptWebAssembly函数之间传递不同的值、对象或结构。这并不容易,因为需要协调两个不同系统的不同对象类型

更糟糕的是,当前WebAssembly仅支持整数浮点数,不支持字符串。这意味着我们不能简单地将字符串传递给WebAssembly函数。

要将字符串传递给WebAssembly,我们需要将字符串转换为数字(请注意在webpack.config.js中指定的TextEncoderAPI),将这些数字放入WebAssembly的内存空间中,最后返回一个指向字符串的指针WebAssembly函数,以便在JavaScript中使用它。在最后,我们需要释放WebAssembly使用的字符串内存空间。

如果我们查看上面的JavaScript代码,这正是自动执行的操作。helloworld函数首先调用passStringToWasm

  • 这个函数在WebAssembly创建一些内存空间,将我们的字符串转换为数字,将数字写入内存空间,并返回一个指向字符串的指针。

image.png

  • 然后将指针传递给wasm.helloworld来执行JavaScriptalert。最后,wasm.__wbindgen_free释放了内存。
  1. image.png
  2. image.png
  3. image.png
  4. image.png

如果只是传递一个简单的字符串,我们可能可以自己处理,但考虑到当涉及到更复杂的对象和结构时,这个工作会很快变得非常复杂。这说明了wasm-bindgenRust WebAssembly开发中的重要性。

反编译wasm到txt

在前面的步骤中,我们注意到wasm-bindgen生成了一个hello_world.js文件,其中的函数调用到我们生成的hello_world_bg.wasm中的WebAssembly代码。

基本上,hello_world.js充当其他JavaScript(如index.js)与生成的WebAssemblyhelloworld_bg.wasm之间的桥梁。

我们可以通过输入以下命令进一步探索helloworld_bg.wasm

wasm2wat hello_world_bg.wasm > hello_world.txt

这个命令使用wabtWebAssembly转换为WebAssembly文本格式,并将其保存到一个hello_world.txt文件中。打开helloworld.txt文件,然后查找$helloworld函数。这是我们在src/lib.rs中定义的helloworld函数的生成WebAssembly函数。

$helloworld函数

image.png

helloworld.txt中查找以下行:

(export "helloworld" (func $helloworld))

这一行导出了wasm.helloworld供宿主调用的WebAssembly函数。我们通过hello_world_bg.js中的wasm.helloworld来调用这个WebAssembly函数。

image.png

接下来,查找以下行:

(import "./hello_world_bg.js" "__wbg_alert_9ea5a791b0d4c7a3" (func $hello_world::alert::__wbg_alert_9ea5a791b0d4c7a3::h93c656ecd0e94e40 (type 4)))

这对应于在hello_world_bg.js中生成的以下JavaScript函数:

export function __wbg_alert_9ea5a791b0d4c7a3() { return logError(function (arg0, arg1) {
    alert(getStringFromWasm0(arg0, arg1));
}, arguments) };

这是wasm-bindgen提供的粘合部分,帮助我们在WebAssembly中使用JavaScript函数或DOM

最后,让我们看看wasm-bindgen生成的其他文件。

hello_world.d.ts

这个.d.ts文件包含JavaScript粘合的TypeScript类型声明,如果我们的现有JavaScript应用程序正在使用TypeScript,它会很有用。我们可以对调用WebAssembly函数进行类型检查,或者让我们的IDE提供自动完成。如果我们不使用TypeScript,可以安全地忽略这个文件。

package.json

package.json文件包含有关生成的JavaScriptWebAssembly包的元数据。它会自动从我们的Rust代码中填充所有npm依赖项,并使我们能够发布到npm


4. 内容拓展

再次看一下以下代码:

hello_world_bg.js

function helloworld(name) {
    const ptr0 = passStringToWasm0(name, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
    const len0 = WASM_VECTOR_LEN;
    wasm.helloworld(ptr0, len0);
}

该代码用于分配和释放内存,这一切都是由程序自动处理的。不需要垃圾回收器或完整的框架引擎,使得使用Rust编写的WebAssembly应用程序或模块变得小巧且优化。其他需要垃圾回收器的语言将需要包含用于其底层框架引擎的wasm代码。因此,无论它们有多么优化,其大小都不会小于Rust提供的大小。这使得Rust WebAssembly成为一个不错的选择,如果我们需要将小型WebAssembly模块集成或注入到JavaScript Web应用程序中。

除了Hello World之外,还有一些其他需要注意的事项:

web-sys

使用wasm-bindgen,我们可以通过使用externRust WebAssembly中调用JavaScript函数。请记住src/lib.rs中的以下代码:

#[wasm_bindgen]
extern "C" {
    fn alert(s: &str);
}

Web具有大量API,从DOM操作到WebGL再到Web Audio等等。因此,如果我们的Rust WebAssembly程序增长,并且我们需要对Web API进行多次不同的调用,我们将需要花时间编写大量的extern代码。

web-sys充当wasm-bindgen的前端,为所有Web API提供原始绑定。

这意味着如果我们使用web-sys,可以节省时间,而不必编写extern代码。

image.png

引入web-sys

web-sys添加为Cargo.toml的依赖项:

[dependencies]
wasm-bindgen = "0.2"
[dependencies.web-sys]
version = "0.3"
features = [
]

为了保持构建速度非常快,web-sys将每个Web接口都封装在一个Cargo特性后面。在API文档中找到我们要使用的类型或方法;它将列出必须启用的特性才能访问该API。

例如,如果我们要查找window.resizeTo函数,我们会在API文档中搜索resizeTo。我们将找到web_sys::Window::resize_to函数,它需要启用Window特性。要访问该函数,我们在Cargo.toml中启用Window特性:

[dependencies.web-sys]
version = "0.3"
features = [
  "Window"
]

调用这个方法:

use wasm_bindgen::prelude::*;
use web_sys::Window;
#[wasm_bindgen]
pub fn make_the_window_small() {
    // 调整窗口大小为500px x 500px。
    let window = web_sys::window().unwrap();
    window.resize_to(500, 500)
        .expect("无法调整窗口大小");
}

这段代码的目的是调整浏览器窗口的大小为500x500像素,并演示了如何使用web-sys和启用的Cargo特性来调用Web API。


后记

分享是一种态度

全文完,既然看到这里了,如果觉得不错,随手点个赞和“在看”吧。

相关文章
|
1月前
|
前端开发 JavaScript 测试技术
探索现代前端工程化工具与流程:提升开发效率和项目质量
探索现代前端工程化工具与流程:提升开发效率和项目质量
探索现代前端工程化工具与流程:提升开发效率和项目质量
|
5天前
|
存储 前端开发 JavaScript
【JavaEE初阶】 博客系统项目--前端页面设计实现
【JavaEE初阶】 博客系统项目--前端页面设计实现
|
6天前
|
Rust 前端开发 安全
探索未来前端发展趋势——WebAssembly技术的崛起
【2月更文挑战第1天】在不断变化的互联网技术领域,前端开发者需要不断更新自己的技能以适应新的需求和挑战。本文将探索WebAssembly技术的崛起,分析其对前端开发的影响和潜在前景,并介绍如何利用WebAssembly提升应用的性能和可扩展性。
15 1
|
8天前
|
Rust 算法 安全
Rust中的宏与编译时性能优化
本文深入探讨了Rust编程语言中的宏(Macros)及其在编译时性能优化方面的应用。我们将了解宏的基本概念,探索它们在元编程和性能优化中的潜力,并通过实例展示如何使用宏来优化Rust代码的性能。
|
12天前
|
Rust 前端开发 JavaScript
Rust在前端与全栈开发中的实践探索
随着Rust语言的日渐成熟,其应用场景已经从后端扩展到前端和全栈开发领域。本文将深入探讨Rust语言在前端与全栈开发中的实际应用案例,分析Rust语言在这些领域的优势和面临的挑战,并展望Rust未来的发展趋势。
|
17天前
|
Rust 测试技术 开发工具
Rust中的Cargo:依赖管理与项目构建
本文将深入探讨Rust编程语言中的Cargo工具。Cargo不仅用于构建Rust项目,还是管理项目依赖的关键组件。我们将了解如何使用Cargo创建新项目、添加依赖项、以及如何通过Cargo进行构建和测试,从而确保项目的顺利开发与部署。
|
23天前
|
JSON 前端开发 Java
springboot项目实现实体类加密存库,解密返回给前端
springboot项目实现实体类加密存库,解密返回给前端
18 0
|
23天前
|
前端开发 JavaScript 安全
|
24天前
|
Rust 前端开发 JavaScript
深入理解WebAssembly:前端开发的新时代
本文旨在探讨WebAssembly(以下简称Wasm)技术及其对前端开发领域带来的革命性变化。不同于传统的摘要,我们采用一个故事化的引入方式,设想一个世界,其中前端开发不再受限于JavaScript的性能瓶颈,复杂的应用如视频编辑、3D游戏、大数据处理等可以轻松地在浏览器中运行。这个世界不是遥远的梦想,而是通过Wasm正在成为现实。接下来的内容将从Wasm的基本概念出发,深入探讨它如何与现有的Web技术栈协同工作,以及它为前端开发带来的全新可能性。
19 0
|
24天前
|
前端开发 JavaScript C++
深入探索WebAssembly在前端性能优化中的应用
随着Web应用的功能越来越复杂,传统的JavaScript解释执行模式已经逐渐成为性能瓶颈。本文将介绍WebAssembly(以下简称Wasm)的基本概念、优势以及如何在现代Web开发中利用Wasm提升前端性能。我们将通过实际案例分析Wasm在处理高性能计算任务时相比JavaScript的优势,并探讨如何将Wasm集成到现有的前端项目中,以实现无缝的性能优化。本文旨在为前端开发者提供一个全面的Wasm应用指南,帮助他们充分利用这一新技术,提升Web应用的响应速度和用户体验。
13 0

热门文章

最新文章

相关产品

  • 云迁移中心