Node.js 与 WebAssembly

这篇具有很好参考价值的文章主要介绍了Node.js 与 WebAssembly。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1、简介

2、关键概念

3、生成WebAssembly模块

4、如何使用它

5、与操作系统交互


Node.js 与 WebAssembly

1、简介

首先,让我们了解为什么WebAssembly是一个很棒的工具,并学会自己使用它。

WebAssembly是一种类似汇编的高性能语言,可以从各种语言编译,包括C/C++RustAssemblyScript。目前,Chrome、Firefox、Safari、Edge和Node.js都支持它!

WebAssembly规范详细介绍了两种文件格式,一种是扩展名为.wasm的WebAssembly模块的二进制格式,另一种是相应的扩展名为.wat的WebAssemblyText格式的文本表示。

2、关键概念

  • 模块 - 一个经过编译的WebAssembly二进制文件,即.wasm文件。
  • 内存 - 可调整大小的ArrayBuffer。
  •  - 未存储在内存中的可调整大小的引用类型数组。
  • 实例 - 模块及其内存、表和变量的实例化。

为了使用WebAssembly,您需要一个.wasm二进制文件和一组API来与WebAssembly通信。Node.js通过全局WebAssembly对象提供了必要的API。

console.log(WebAssembly);

我们在浏览器中打印下这个对象,如下图所示:

Node.js 与 WebAssembly

3、生成WebAssembly模块

有多种方法可用于生成WebAssembly二进制文件,包括:

  • 手工编写WebAssembly(.wat),并使用wabt等工具转换为二进制格式
  • 在C/C++应用程序中使用emscripten(https://emscripten.org/)
  • 在Rust应用程序中使用wasm-pack(https://rustwasm.github.io/wasm-pack/book/)
  • 如果您喜欢类似TypeScript的体验,请使用AssemblyScript(https://www.assemblyscript.org/)

其中一些工具不仅生成二进制文件,还生成要在浏览器中运行的JavaScript“粘合”代码和相应的HTML文件。

4、如何使用它

如果我们更熟悉TypeScript的体验,那就通过 AssemblyScript 来试一下

1、我们先安装一下 AssemblyScript

npm install --save-dev assemblyscript

2、我们通过编译器对应的脚手架工具,快速生成推荐目录结构和配置文件

npx asinit .

目录结果如下:

  • ./assembly 包含正在编译到WebAssembly的AssemblyScript源的目录。
  • ./assembly/tsconfig.json TypeScript配置继承了建议的AssemblyScript设置。
  • ./assembly/index.ts 示例文件正在编译到WebAssembly中,以便开始使用。
  • ./build 生成存储编译的WebAssembly文件的工件目录。
  • ./build/.gitignore 从源代码管理中排除已编译二进制文件的Git配置。
  • ./asconfig.json 定义“调试”和“发布”目标的配置文件。
  • ./package.json 包含编译到WebAssembly所需命令的包信息。
  • ./tests/index.js 启动测试,以检查模块是否正常工作。
  • ./index.html 生成的html文件

3、打开,index.ts 我们在里面写了一个函数:

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

4、然后我们编译一下

npm run asbuild

一旦有了WebAssembly模块,就可以使用Node.js WebAssembly对象来实例化它。

// 假设存在 release.wasm文件,该文件aad 包含一个添加2个提供参数的函数
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文件,看一下结果:

<!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>

Node.js 与 WebAssembly

或者,运行一下测试用例,看下最后的结果也是可以的,如下所示:

Node.js 与 WebAssembly

5、与操作系统交互

WebAssembly模块本身无法直接访问操作系统功能。

可以使用第三方工具Wasmtime(https://docs.wasmtime.dev/)来访问此功能。

Wasmtime利用WASI(https://wasi.dev/) API来访问操作系统的功能。文章来源地址https://www.toymoban.com/news/detail-449793.html

到了这里,关于Node.js 与 WebAssembly的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Node.js的基本概念&&node -v 和npm -v 这两个命令的作用

    Node.js 是一个开源且跨平台的 JavaScript 运行时环境,它可以让你在服务器端运行 JavaScript 代码。Node.js 使用了 Chrome 的 V8 JavaScript 引擎来执行代码,非常高效。 在 Node.js 出现之前,JavaScript 通常只在浏览器中运行,用于控制网页行为和与用户交互。Node.js 的出现让 JavaScript 能够

    2024年02月08日
    浏览(55)
  • Vue.js核心概念简介:组件、数据绑定、指令和事件处理

    本文介绍了Vue.js的四个核心概念:组件、数据绑定、指令和事件处理。每个概念都通过一个简单的示例进行了详细的解释。通过学习这些概念,您将能够充分利用Vue.js的强大功能,构建高效、灵活的Web应用程序。 1 组件 组件是Vue.js的核心概念之一,它允许您将UI分解为相互作

    2024年02月04日
    浏览(56)
  • Node.js基本概念、特点、用途和常用模块,以及Express框架开发一个web应用

    目录 一、Node.js的基本概念和特点 二、Node.js的用途 三、Node.js的常用模块 四、使用Node.js进行Web开发 1. 安装Node.js 2. PyCharm配置Node.js 3. 使用http库编写一个web服务 4. 使用Express框架构建Web应用程序 5. 调试代码 6. 发布应用程序 参考文章  Node.js系列文章推荐阅读: JavaScript匿名函

    2024年02月07日
    浏览(86)
  • webassembly009 transformers.js 网页端侧推理

            之前试用过两个网页端的神经网络框架,一个是 Tensorflow PlayGround,它相当与实现了一个网页端的简单的训练框架,有关节点的数据结构可看这篇。另一个是onnx的网页端(nodejs绿色免安装+try onnx on web(chrome)),需要自己转换onnx模型用于推理。这里的 transformers.js 相当

    2024年02月11日
    浏览(33)
  • (WebAssembly)JS/微信小程序,调用C/C++

    1、将.c文件编译成WebAssembly,具体步骤参考:编译 C/C++ 为 WebAssembly - WebAssembly | MDN,这个比较简单,文章中比较详细的步骤 2、编译后生成3个文件:一个.js,一个.wasm,一个.html,其中.js、.wasm不用做修改,.html文件中做了2处改动 新增button,用于触发事件 调用c函数代码,其中

    2024年02月10日
    浏览(30)
  • webassembly002 whisper.wasm wasm_eval 与js代码交互 js部分

    convert audio buffer to WAV # TODO changeInput函数 这个函数的作用是根据传入的参数 input 的不同值,控制页面上特定元素的显示和隐藏状态,从而根据用户的选择切换不同的输入方式 Module load model 加载模型文件 loadF函数 使用FileReader()对象加载本地文件 loadWhisper函数 会调用loadRemote(定

    2024年04月15日
    浏览(41)
  • Emscripten + CMakeLists.txt 将 C++ 项目编译成 WebAssembly(.wasm)/js,并编译 Html 测试

    背景:Web 端需要使用已有的 C++ 库(使用 CMake 编译),需要将 C++ 项目编译成 WebAssembly(.wasm) 供 js 调用。 上篇文章《Mac 上安装 Emscripten》 已讲解如何安装配置 Emscripten 环境。 本篇文章主要讲解如何将基于 CMakeLists 配置的 C++ 项目编译成 WebAssembly 库来供 Web 前端使用。编译结

    2024年02月06日
    浏览(35)
  • vue3:3、项目目录和关键文件

    2024年02月09日
    浏览(33)
  • Kong关键概念 - Upstreams

    Upstream是指Kong Gateway转发请求到的API、应用程序或微服务。在Kong Gateway中,Upstream 对象代表了一个虚拟主机名,并可以用于对多个服务进行健康检查、断路器和负载均衡。 Upstream 和 service 交互 您可以将服务配置为指向一个Upstream,而不是一个主机。例如,如果您有一个名为

    2024年01月24日
    浏览(35)
  • Unity关键概念

    Unity是一款跨平台的游戏引擎和开发工具,用于创建2D和3D游戏、交互式内容和应用程序。它提供了一个强大的开发环境,使开发者能够轻松地设计、开发和部署高质量的游戏和应用程序。 游戏对象(Game Objects):在Unity中,所有的实体、角色、道具等都被视为游戏对象。游戏

    2024年02月10日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包