使用Emscripten生成WebAssembly文件

前提

根据2022.stateofjs.com/zh-Hans/fea… 给出的数据，webAssembly已经在全球的前端从业者中有比较广泛的认知度了，作为一个在处在这13%的选手，还是决定随大流从众一波。

流程

环境安装

windows环境需要安装

• git
• python2.7以上，作为emscripten的依赖
• CMake installer

// 拉取emscripten sdk的初始化模块
git clone https://github.com/juj/emsdk.git
cd emsdk

// 使用emsdk命令初始化emscripten环境 需要环境下有python支持
emsdk install latest
emsdk activate latest
emsdk_env.bat

如果emsdk install没有效果，可以参考这个issue

编译

这时候copy一段简单c++代码

#include <stdio.h>

int main(int argc, char ** argv) {
  printf("Hello World\n");
}

在一个已经配置过 Emscripten 编译环境的终端窗口中，进入刚刚保存 hello.c 文件的文件夹中，然后运行下列命令：

emcc hello.c -s WASM=1 -o hello.html

得到如下文件：

• hello.wasm 二进制的 wasm 模块代码
• hello.js 一个包含了用来在原生 C 函数和 JavaScript/wasm 之间转换的胶水代码的 JavaScript 文件
• hello.html 一个用来加载，编译，实例化你的 wasm 代码并且将它输出在浏览器显示上的一个 HTML 文件

打开hello.html,可以看到刚才的c++代码运行结果在html上展示了

编译成功。

结果查看

在vscode下载webAssembly插件查看生成的wasm文件，可以看到他的wat结构：

wat结构

这里分析一下wat的结构，wat是使用S- 表达式编码

一个S-表达式的执行步骤如下：

(print (* 2 (+ 3 4)))

（图片出自于航老师的课程）

那么来看一段基础的wat结构的代码

// wat文件
(module
   //函数申明方式 func 函数名 (param 参数1 32位) (param 参数2 32位) (返回值 32位)
  (func $add (param $lhs i32) (param $rhs i32) (result i32)
    // get_local表示压栈，把$lhs压栈
    get_local $lhs
    // 把$rhs压栈
    get_local $rhs
    // 相加
    i32.add)
    // 导出add函数
  (export "add" (func $add))
)

// js文件
fetchAndInstantiate('add.wasm').then(function(instance) {
   console.log(instance.exports.add(1, 2));  // "3"
});

相当于实现了一个(a, b) => a + b 的功能。

详细的wat介绍可以看这里