参考: google WebAssembly Introducation
1. 安装准备
- Git
- CMake
- Host system compiler
- Python 2.7
2. 下载编译工具
install emsdk (emsdk(Emscripten toolchain) 是一个预编译的工具链) Link
执行命令:
MacBook-Pro-6:hello mac$ emcc hello.c -Os -s WASM=1 -s SIDE_MODULE=1 -o hello.wasm
可能会报错:
Traceback (most recent call last):
File "/Users/mac/Documents/WebAssembly/emsdk/emscripten/1.37.22/emcc", line 5, in <module>
from tools.toolchain_profiler import ToolchainProfiler
ImportError: No module named tools.toolchain_profiler
原因:安装时失败,重装即可。
3. 使用.wasm文件
wasm作为一个模块导入进来,依靠JS API得到模块中的函数,如下
编写C文件(gen.c):
#include<stdio.h>
int add(int i, int j) {
return i + j;
}
4. 使用emcc 编译
* emcc gen.c -s ONLY_MY_CODE=1 -s WASM=1 -s EXPORTED_FUNCTIONS="['_add']" -o gen.js
在上面的命令行中,_add函数作为gen.c中add函数的导出名。
- 在js中调用
var add = new Function();
const memory = new WebAssembly.Memory({ initial: 256, maximum: 256 });
const importObj = {
env: {
abortStackOverflow: () => { throw new Error('overflow'); },
table: new WebAssembly.Table({ initial: 0, maximum: 0, element: 'anyfunc' }),
tableBase: 0,
memory: memory,
memoryBase: 1024,
STACKTOP: 0,
STACK_MAX: memory.buffer.byteLength,
}
};
fetch('gen.wasm').then((response) => response.arrayBuffer())
.then((bytes) => WebAssembly.instantiate(bytes, importObj))
.then((wa) => add = wa.instance.exports._add);
//若出现Link_error,则检查importObj中是否未包含错误提示中指出的关键字。
5. 参数传递
- 若现在用C编写一个对整数数组进行排序的算法,将其编译为wasm,如何在JS中调用并传递数组参数?
Ans: 参见:pass array to C function with emscripten