Vue & WebAssembly

引言

网页——虚拟世界中不可或缺的一环，自诞生之初就发挥了巨大的作用，传播知识，分享见闻……但不可否认的是，在浏览器性能饱受广大程序猿的诟病的今天，终于也要迎来属于它的自我变革，下面将要分享的是WebAssembly技术，并参照文档教程，通过一个使用Rust语言与Vue框架的示范项目介绍其开发流程。

对于网络平台而言，WebAssembly 具有巨大的意义——它提供了一条途径，以使得以各种语言编写的代码都可以以接近原生的速度在 Web 中运行。在这种情况下，以前无法以此方式运行的客户端软件都将可以运行在 Web 中。

👉参考文档

将Rust编译为WebAssembly

强烈建议提前学习Rust语言、FFI（Foreign Function Interface）以及Vue框架相关基础知识

使用命令cargo new --lib <ProjectName>在当前文件夹下创建名为ProjectName的目录，并在ProjectName目录内创建生成库文件的Rust项目，或使用cargo init --lib <ProjectName>在当前目录直接初始化Rust项目。

使用命令cargo install wasm-pack为你的Rust添加WebAssembly（以下统称wasm）支持，然后使用命令cargo add wasm-bindgen为你的Rust项目添加wasm外部函数链接支持。

打开Cargo.toml，添加 [lib] 项，crate-type选择cdylib作为编译目标，最后应该像这样：

[package]
name = "ProjectName"
version = "0.1.0"
edition = "2021"

[dependencies]
wasm-bindgen = "YourVersion"

[lib]
crate-type = ["cdylib"]

打开src/lib.rs，里面有Rust自动生成的测试代码，把它们替换成下面的代码：

extern crate wasm_bindgen;

use wasm_bindgen::prelude::*;

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

#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}

在这里，我们的目标是在网页上通过调用Rust提供的greet函数接口，间接地调用JS提供的alert函数接口。greet函数顾名思义，在传入的参数name前加上“Hello”并弹出提示窗进行问候。（有点脱裤子放屁的嫌疑） 属性 #[wasm_bindgen] 告诉了Rustc，wasm_bindgen知道如何链接这些函数，至于为何能够做到这种事，请自行查阅FFI有关资料。

然后通过命令wasm-pack build --scope <AccountName>构建wasm包，AccountName是你的npm账号。此时在pkg文件夹中有构建出来的ProjectName_bg.wasm文件，以及将其封装并暴露出greet接口的ProjectName.js文件，至于其内部究竟是如何实现的，这里就留给有心者深入探究。

（可选）在pkg目录下，通过命令npm publish --access=public将包发布到你的npm账号上。

在Vue中使用WebAssembly

通过命令npm create vue@latest创建一个新的Vue项目。然后通过命令npm install @YourAccount/ProjectName将你的wasm包导入到项目中。（或导入上面的本地wasm包）

需要注意的是，目前Vue框架所使用的Vite构建工具不支持ESM集成提案，因此不能直接使用wasm包暴露出的接口，还需要通过社区贡献的vite-plugin-wasm插件提供支持：通过命令npm install vite-plugin-wasm安装插件，然后编辑Vite项目配置文件vite.config.js来使用插件：

import wasmPlugin from 'vite-plugin-wasm';
export default defineConfig({
    plugins: [
        wasmPlugin()
    ],
    //...
});

有关于vite-plugin-wasm插件及其兼容性的更多信息，请自行查阅官方仓库。

在任意组件中导入wasm包暴露的greet函数接口：

<script setup>
// 导入greet函数接口
import { greet } from '@YourAccount/ProjectName'
</script>

<script>
export default {
  mounted() {
    // 在组件挂载完成后立即进行问候
    greet("WebAssembly");
  }
}
</script>

<template>
    <!-- ... -->
</template>

最后通过命令npm run dev来查看你的第一个wasm+vue项目！

前端与后端的界线在这一刻再次变得模糊不清，这是否给你带来一些思考与启发呢？

- fin -