WebAssembly增強(qiáng)前端應(yīng)用技巧是什么

這篇“WebAssembly增強(qiáng)前端應(yīng)用技巧是什么”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“WebAssembly增強(qiáng)前端應(yīng)用技巧是什么”文章吧。

準(zhǔn)備

需要準(zhǔn)備好下列的環(huán)境

• Rust 開發(fā)環(huán)境(rustup、rustc、cargo 這些)

• 前端開發(fā)環(huán)境(node、npm 這些)

• wasm-pack (cargo install wasm-pack)

開始

開始前我們先要準(zhǔn)備一個(gè)前端應(yīng)用，這里我們使用 create-react-app 來創(chuàng)建一個(gè) React 項(xiàng)目。 如果沒有安裝 create-react-app ，先用 pnpm (npm / yarn 也行)全局安裝一下

npm install -g create-react-app

創(chuàng)建項(xiàng)目

使用 typescript 模板來創(chuàng)建項(xiàng)目，以獲得更好的類型提示。

create-react-app react-wasm --template typescript

進(jìn)入到剛創(chuàng)建好的項(xiàng)目目錄中

cd react-wasm

創(chuàng)建好 react 項(xiàng)目之后，我們接下來使用 wasm-pack 創(chuàng)建一個(gè) wasm 工具庫

wasm-pack new wasm-lib

創(chuàng)建完成后我們的目錄結(jié)構(gòu)是像下面這樣子的，

src 目錄主要編寫前端應(yīng)用代碼

wasm-lib/src 目錄主要編寫 rust wasm 代碼

wasm-lib/src/lib.rs 目錄下，這里就是我們可以進(jìn)行編寫供前端調(diào)用的 WebAssembly 函數(shù)。這里默認(rèn)寫好了一個(gè) greet 函數(shù)，然后里面調(diào)用了 alert 彈框。接下來我們就去看看如何在前端中進(jìn)行使用這個(gè)函數(shù)。

mod utils;
use wasm_bindgen::prelude::*;
// 當(dāng) `wee_alloc` 特性開啟的時(shí)候, 使用 `wee_alloc` 作為全局分配器
#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
#[wasm_bindgen]
extern "C" {
    fn alert(s: &str);
}
#[wasm_bindgen]
pub fn greet() {
    alert("Hello, wasm-lib!");
}

打包 wasm

在 package.json 文件中添加這一行代碼，然后我們就可以進(jìn)行打包了。

項(xiàng)目根目錄中運(yùn)行

npm run build:wasm

如果在 build 的過程卡住了，或者報(bào)錯(cuò)了?？梢韵葧簳r(shí)把代碼優(yōu)化給關(guān)閉掉

在 wasm-lib 目錄下的 Cargo.toml 配置文件中關(guān)掉 wasm-opt

打包完成后就能看到項(xiàng)目根目錄中出現(xiàn)了一個(gè) pkg 文件夾，這里面就是我們打包后的產(chǎn)物，前端可以進(jìn)行調(diào)用我們用 Rust 編寫的函數(shù)。

前端調(diào)用

我們有兩種方式去調(diào)用 pkg 目錄下的 wasm 函數(shù)：

一種是將 pkg 作為一個(gè) npm 包發(fā)布

cd wasm-lib
# 該命令可以把這個(gè)庫作為 npm 包發(fā)布到 npm 中，然后我們前端就正常的方式 npm install 就可以使用了
wasm-pack publish

另一種是先在本地進(jìn)行引用，根目錄下安裝

npm install ./pkg

然后 package.json 的依賴中增加了我們的本地庫：

{
  "name": "react-wasm",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.1",
    "@types/node": "^16.11.36",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.5",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.7.2",
    "wasm-lib": "file:pkg", // ++++++++++++++++++++++++++++
    "web-vitals": "^2.1.4"
  },
  // ...
}

接下來就去我們的 App.tsx 中調(diào)用 greet 方法：

import React, { useEffect } from "react";
import init, { greet } from "wasm-lib";
import logo from "./logo.svg";
import "./App.css";
function App() {
  // +++++++++++++++++
  useEffect(() => {
    init().then(() => {
      greet();
    });
  }, []);
  return (
    <div className="App">
      ...
    </div>
  );
}
export default App;

然后開始運(yùn)行我們的 react 應(yīng)用

npm run start

打開 localhost:3000 端口，可以看到我們調(diào)用 alert 方法成功咯~

使用 console.log

首先我們要安裝一下 web-sys 這個(gè)包，在 Cargo.toml 中加入

[dependencies]
wasm-bindgen = "0.2.63"
web-sys = { version = "0.3.57", features = ['console'] } # ++++++++

在這里我們開啟了 console 這個(gè) feature， web-sys 還支持很多 feature，比如可以操作 DOM，調(diào)用前端原生 fetch API ， 操作 Canvas ， WebGL 等等等。

Rust：

mod utils;
use web_sys::console;
use wasm_bindgen::prelude::*;
#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
#[wasm_bindgen]
pub fn test_log(val: JsValue) {
    console::log_2(&"從JS端接受到數(shù)據(jù)".into(), &val);
}

JS：

import React, { useEffect } from "react";
import init, { test_log } from "wasm-lib";
import logo from "./logo.svg";
import "./App.css";
function App() {
  useEffect(() => {
    init().then(() => {
      test_log({ a: 1, b: 2, c: 3 });
    });
  }, []);
  return (
    <div className="App">
      ...
    </div>
  );
}
export default App;

打印結(jié)果：

以上就是關(guān)于“WebAssembly增強(qiáng)前端應(yīng)用技巧是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。