快捷導航

Node.js使用WebAssembly

更新時間：2023年05月24日 09:05:07 作者：和你一起去月球

本文主要介紹了Node.js使用WebAssembly，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

1、簡介

首先，讓我們了解為什么WebAssembly是一個很棒的工具，并學會自己使用它。

WebAssembly是一種類似匯編的高性能語言，可以從各種語言編譯，包括C/C++、Rust和AssemblyScript。目前，Chrome、Firefox、Safari、Edge和Node.js都支持它！

WebAssembly規(guī)范詳細介紹了兩種文件格式，一種是擴展名為.wasm的WebAssembly模塊的二進制格式，另一種是相應(yīng)的擴展名為.wat的WebAssemblyText格式的文本表示。

2、關(guān)鍵概念

模塊 - 一個經(jīng)過編譯的WebAssembly二進制文件，即.wasm文件。
內(nèi)存 - 可調(diào)整大小的ArrayBuffer。
表 - 未存儲在內(nèi)存中的可調(diào)整大小的引用類型數(shù)組。
實例 - 模塊及其內(nèi)存、表和變量的實例化。

為了使用WebAssembly，您需要一個.wasm二進制文件和一組API來與WebAssembly通信。Node.js通過全局WebAssembly對象提供了必要的API。

console.log(WebAssembly);

我們在瀏覽器中打印下這個對象，如下圖所示：

3、生成WebAssembly模塊

有多種方法可用于生成WebAssembly二進制文件，包括：

手工編寫WebAssembly（.wat），并使用wabt等工具轉(zhuǎn)換為二進制格式
在C/C++應(yīng)用程序中使用emscripten（https://emscripten.org/）
在Rust應(yīng)用程序中使用wasm-pack（https://rustwasm.github.io/wasm-pack/book/）
如果您喜歡類似TypeScript的體驗，請使用AssemblyScript（https://www.assemblyscript.org/）

其中一些工具不僅生成二進制文件，還生成要在瀏覽器中運行的JavaScript“粘合”代碼和相應(yīng)的HTML文件。

4、如何使用它

如果我們更熟悉TypeScript的體驗，那就通過 AssemblyScript 來試一下

1、我們先安裝一下 AssemblyScript

npm install --save-dev assemblyscript

2、我們通過編譯器對應(yīng)的腳手架工具，快速生成推薦目錄結(jié)構(gòu)和配置文件

npx asinit .

目錄結(jié)果如下：

./assembly 包含正在編譯到WebAssembly的AssemblyScript源的目錄。
./assembly/tsconfig.json TypeScript配置繼承了建議的AssemblyScript設(shè)置。
./assembly/index.ts 示例文件正在編譯到WebAssembly中，以便開始使用。
./build 生成存儲編譯的WebAssembly文件的工件目錄。
./build/.gitignore 從源代碼管理中排除已編譯二進制文件的Git配置。
./asconfig.json 定義“調(diào)試”和“發(fā)布”目標的配置文件。
./package.json 包含編譯到WebAssembly所需命令的包信息。
./tests/index.js 啟動測試，以檢查模塊是否正常工作。
./index.html 生成的html文件

3、打開，index.ts 我們在里面寫了一個函數(shù)：

export function add(a: i32, b: i32): i32 {
 return a + b;
}

4、然后我們編譯一下

npm run asbuild

一旦有了WebAssembly模塊，就可以使用Node.js WebAssembly對象來實例化它。

// 假設(shè)存在 release.wasm文件，該文件aad 包含一個添加2個提供參數(shù)的函數(shù)
async function instantiate(module, imports = {}) {
  const { exports } = await WebAssembly.instantiate(module, imports);
  return exports;
}
export const {
  memory,
  add
} = await (async url => instantiate(
  await (async () => {
    try { return await globalThis.WebAssembly.compileStreaming(globalThis.fetch(url)); }
    catch { return globalThis.WebAssembly.compile(await (await import("node:fs/promises")).readFile(url)); }
  })(), {
  }
))(new URL("release.wasm", import.meta.url));

5、打開index.html文件，看一下結(jié)果：

<!DOCTYPE html>
<html lang="en">
<head>
  <script type="module"> 
    import { add } from "./build/release.js"; 
		document.body.innerText = add(1, 2);
	</script>
</head>
<body></body>
</html>