webAssembly简单示例

前言

原文地址：20分钟上手webAssembly

在实践博客步骤时，发现原文步骤有遗漏，并且遇到许多错误，本文做记录和补充

第一步：安装依赖

任意选择某个目录为根目录，执行以下命令

git clone https://github.com/AssemblyScript/assemblyscript.git
cd assemblyscript
npm install
npm link

原文到这里直接使用asc判断是否安装正确，实际上还需要执行一次打包命令

npm run build

执行成功后会在assemblyscript文件夹下生成dist文件夹，这个时候输入asc判断是否安装正确

asc

如果没有问题，则会出现asc命令的使用说明

这里我出现过错误，因为我的node版本是14，但是依赖要求的node版本要大于16，但是我不想升级我的node，这里可以使用nvm管理不同版本的node，也可以直接下载16版本以上的node

如果没有出现问题，可忽略这一步

nvm install 16
nvm use 16

第二步：新建项目

任意选择一个文件夹为根目录，在根目录下新建wasmExample文件夹，进入该文件夹，执行以下命令创建项目

git init
git install

也可以使用脚手架搭建，创建完成后需要在package.json文件中添加，原文采用CommonJS，这里改写为ES6模块

"type": "module",

项目搭建完成后在根目录下新建目录：assembly，cd 进入该目录，添加tsconfig.json文件

{
  "extends": "../node_modules/assemblyscript/std/assembly.json",
  "include": [
    "./**/*.ts"
  ]
}

第三步：写代码

在assembly目录下创建module.ts，并添加以下代码

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

其中i32是WebAssembly 二进制格式中的整数类型之一，代表有符号 32 位整数。与 JavaScript 的 number 类型不同，i32 是一种明确大小的类型，可以确保在 WebAssembly 中对整数运算的精度和范围。代码会有报错，但是不用管。

第四步：配置NPM Scripts

打开package.json文件，在scripts中添加以下命令

"scripts": {
    "build": "npm run build:untouched && npm run build:optimized",
    "build:untouched": "asc assembly/module.ts -t dist/module.untouched.wat -o dist/module.untouched.wasm --validate --sourceMap --measure",
    "build:optimized": "asc assembly/module.ts -t dist/module.optimized.wat -o dist/module.optimized.wasm --validate --sourceMap --measure --optimize"
  },

原文的命令打包出来只有wat格式的文件，这里做出了如下修改

1. 在 build:untouched 和 build:optimized 命令中，把 -b 参数改为 -o。这是因为 -b 参数会把输出文件写入二进制格式，而 -o 参数会把输出文件写入默认格式（通常是二进制格式）。

2. 移除 --validate 参数的使用，因为在新版 AssemblyScript 中已经移除了该参数。

第五步：编译

在项目根目录下执行

npm run build

如果没有报错，dist目录下会生成6个文件，两个map，两个wasm以及两个wat

第六步：引入编译结果

项目根目录加入一个module引入代码：module.js，如下：

import { readFileSync } from 'fs'
import { fileURLToPath } from "url"
import { dirname } from "path"

const __dirname = dirname(fileURLToPath(import.meta.url))

const wasm = new WebAssembly.Module(
  readFileSync(__dirname + "/dist/module.optimized.wasm", {})
)

export default new WebAssembly.Instance(wasm).exports

同时，我们需要一个使用module的代码。再创建一个 index.js，如下：

import myModule from "./module.js"

console.log(myModule.add(1, 2))

在项目根目录下执行node index.js，如果一切正常，会看到控制台打印出3