学习webassembly之环境配置

作者 likaiqiang 日期 2021-01-03
学习webassembly之环境配置

什么是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
  1. 编译wabt

    mkdir build // 在wabt目录新建build目录
    cd build // 进入build目录
    cmake .. // mac 上可以提前使用 brew install cmake 安装cmake
    cmake --build . // 注意后面有个.
  2. 添加环境变量
    编辑 .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函数
})

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