什么是wat文件

通常在浏览器端可以通过fetch或者XMLHttpRequset加载wasm文件，但是wasm文件是二进制文件不利于阅读，所以webassembly提供了一种基于S表达式的wat文件，可以使用wabt编译wat为wasm。

编译wat文件（mac）

根据readme，安装wabt总共分两步：

1. 下载wabt源码

git clone --recursive https://github.com/WebAssembly/wabt
cd wabt

2. 编译wabt

   mkdir build // 在wabt目录新建build目录 cd build // 进入build目录 cmake .. // mac 上可以提前使用 brew install cmake 安装cmake cmake --build . // 注意后面有个.

3. 添加环境变量
   编辑 .bash_profile文件，在path后面添加第二步新建的build目录的绝对路径。

   一个简单的demo

test.wat

(module
    (func (export "showMeTheAnawser") (result i32)
        i32.const 42
    )
)

所谓的s表达式，好别扭。这段代码的意思是暴露出一个叫showMeTheAnawser的函数，这个函数返回42。然后在命令行调用wat2wasm test.wat -o test.wasm

然后新建index.html,核心代码。

fetch('./test.wasm').then(response=>{
    return response.arrayBuffer() // 拿到文件内容，转换成WebAssembly可以识别的arrayBuffer
}).then(b=>{
    return WebAssembly.instantiate(b) // 编译arrayBuffer
}).then(res=>{
    console.log(res.instance.exports.showMeTheAnawser()) //调用showMeTheAnawser函数
})

后面会补一个可以在线运行的例子

• ← Previous Post
• Next Post →