如何在javascript ES6文件中导入wasm文件

Question

我是新来的wasm。我正在阅读一些关于该论点的教程和 mdn 文档。我有一个简单的问题，是否可能以及如何在节点或 Vue 项目中将 c++ 库转换为 wasm 后使用它？如果我理解这个概念，wasm 可以将原生代码从 C/C++ 转换为 javascript，这意味着可以使用 require() 或 import 在 ES6 javascript 文件中轻松移植和使用 c++ 库，对吧？

Answer 1

说明

它不是那样工作的。 Wasm 是在堆栈虚拟机上运行的字节码。它有自己的文本格式 (wat)，您可以在文本/代码编辑器上编写它。之后，您使用 wabt 编译它（WebAssembly 二进制工具，在 google 上搜索 wabt git 或 wabt npm）。不建议以自己的文本格式编写它，因为它太难了。 c++ 代码是用于编写 WebAssembly 的更高级别的接口。您还可以将 typescript 编译成 webassembly（搜索 assemblyscript）。 在线查看“加载 webassembly 模块”或“理解 webassembly”以获得更好的解释

Answer 2

你不能import 但如果你得到.wasm 文件的字节格式，你可以在任何javascript 文件中使用它。我将展示您可以处理的 2 种方法：

• 将 wasm 文件放在 public 文件夹中并获取它：

  异步函数 getByte() {

  try {
        const res = await fetch("test.wasm");
        // bytes from memory
        const buffer = await res.arrayBuffer();
        // this will create an object
        const wasm = await WebAssembly.instantiate(buffer);
        console.log(wasm);
        // addTwo function is exported in wasm code, otherwise I would not be able to use it. 
        const addNumbers = wasm.instance.exports.addTwo;
        // console.log(addNumbers);
        const result = addNumbers(10, 50);
        console.log(result);
      } catch (e) {
        console.log(e);
      }
    }
  

• 在 linux 中，xxd 命令创建给定文件或标准输入的十六进制转储。例如 xxd -g1 test.wasm 将创建 wasm 的十六进制格式。

现在您可以像这样在 javascript 文件中使用它们：

async function byteCode() {
        const byteArray = new Int8Array([
          0x00, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00, 0x01, 0x07, 0x01,
          0x60, 0x02, 0x7f, 0x7f, 0x01, 0x7f, 0x03, 0x02, 0x01, 0x00, 0x07,
          0x07, 0x01, 0x03, 0x73, 0x75, 0x6d, 0x00, 0x00, 0x0a, 0x09, 0x01,
          0x07, 0x00, 0x20, 0x00, 0x20, 0x01, 0x6a, 0x0b, 0x00, 0x18, 0x04,
          0x6e, 0x61, 0x6d, 0x65, 0x01, 0x06, 0x01, 0x00, 0x03, 0x73, 0x75,
          0x6d, 0x02, 0x09, 0x01, 0x00, 0x02, 0x00, 0x01, 0x61, 0x01, 0x01,
          0x62,
        ]);
        // WebAssembly is globally available
        // this will create a javascript object
        const wasm = await WebAssembly.instantiate(byteArray.buffer);
        // you need to know methods in original code
        // in test.wasm I wrote a function and exported as "sum"
        const addNumbers = wasm.instance.exports.sum;
        const result = addNumbers(10, 50);
        console.log(result);
      }