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作为编译目标,最后应该像这样:
toml
[package]
name = "ProjectName"
version = "0.1.0"
edition = "2021"
[dependencies]
wasm-bindgen = "YourVersion"
[lib]
crate-type = ["cdylib"]
打开src/lib.rs,里面有Rust自动生成的测试代码,把它们替换成下面的代码:
rs
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来使用插件:
js
import wasmPlugin from 'vite-plugin-wasm';
export default defineConfig({
plugins: [
wasmPlugin()
],
//...
});
有关于vite-plugin-wasm 插件及其兼容性的更多信息,请自行查阅官方仓库。
在任意组件中导入wasm包暴露的greet函数接口:
vue
<script setup>
// 导入greet函数接口
import { greet } from '@YourAccount/ProjectName'
</script>
<script>
export default {
mounted() {
// 在组件挂载完成后立即进行问候
greet("WebAssembly");
}
}
</script>
<template>
<!-- ... -->
</template>
最后通过命令npm run dev
来查看你的第一个wasm+vue项目!
前端与后端的界线在这一刻再次变得模糊不清,这是否给你带来一些思考与启发呢?
- fin -