WebAssembly，通过AssemblyScript编写wasm

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

对于苏南大叔来说，这个可以在网页里面运行的webassembly技术，就是对JavaScript进行代码加密隐藏的新技术。所以，对它展开探索。根据官方文档，这个.wasm文件是个编译后的结果，编译之前各个主流编程语言都可以对它有所支持。这个就更令人有选择困难症了。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。测试环境：win10，node@20.18.0，AssemblyScript@0.27.31。先说一下本文的结论，并不建议使用AssemblyScript编写，实在是功能有限。

AssemblyScript

AssemblyScript是一种将TypeScript编译为WebAssembly的编程语言。官方网站：

• https://www.assemblyscript.org/
• https://www.assemblyscript.org/introduction.html

在众多支持编译为WebAssembly的各种语言里面，苏南大叔选择了这个AssemblyScript，因为它宣称是typescript的子集，使用typescript的语法。

AssemblyScript 范例

首先，创建一个新的项目文件夹并初始化 npm 项目：

npm init -y
npm install assemblyscript --save-dev
npx asinit .

npx asinit . 命令会在当前目录下生成一些初始文件和文件夹，包括 assembly/ 文件夹和 asconfig.json 配置文件。

最简单例子

在 assembly/index.ts文件里，自带个加法运算的例子。修改index.ts代码，就可以导出自己的算法了。使用export来导出即可，可以导出多个函数：

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

编译 AssemblyScript 代码

可以执行：

npm run asbuild

如果目标明确，只需要wasm文件的话，也可以执行：

asc assembly/index.ts --outFile build/release.wasm --optimize

这个AssemblyScript的输出.wasm文件，构建的命令参数，经常变化。所以，不能盲目的照抄网上教程里面的命令。因为很有可能已经失效了，不能正常构建。

引入wasm文件

build下面的release.js文件，也是有参考意义的。

async function instantiate(module, imports = {}) {
  const { exports } = await WebAssembly.instantiate(module, imports);
  return exports;
}
export const {
  memory,
  add,
  add2,
} = await (async url => instantiate(
  await (async () => {
    const isNodeOrBun = typeof process != "undefined" && process.versions != null && (process.versions.node != null || process.versions.bun != null);
    if (isNodeOrBun) { return globalThis.WebAssembly.compile(await (await import("node:fs/promises")).readFile(url)); }
    else { return await globalThis.WebAssembly.compileStreaming(globalThis.fetch(url)); }
  })(), {
  }
))(new URL("release.wasm", import.meta.url));

index.html的源码：

<script type="module">
    import { add, add2 } from "./build/release.js";
    document.body.innerText = add(1, 2);
    document.body.innerText += "," + add2(2, 2);
</script>

参考文章：

• https://newsn.net/say/es6-module-browser.html

运行wasm

范例里面自带个serve，否则的话，就需要nginx之类的容器进行启动。

npm start

结论

不建议使用AssemblyScript。所以，继续选择其它的编程语言。不建议使用的原因，是目前只要函数里面出现字符串，就会发生各种各样的问题。虽然可以解决，但是作为一门编程语言来说，这匪夷所思啊。所以，在目前来看，不建议使用。具体可以参考后续文章。

• https://newsn.net/tag/wasm/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。