本文住要讲了Emscripen、Binaryen、WABT ,浏览器环境配置。
安装Emscripen
1、安装git、cmake、python2.7.x、编译器
安装完毕后,确认 git,cmake 和 python 已经在你的环境变量里,可以使用。
brew install cmake2、安装emsdk
# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git
# Enter that directory
cd emsdk
Fetch the latest version of the emsdk (not needed the first time you clone)
git pull
# Download and install the latest SDK tools.
./emsdk install latest #or ./emsdk install sdk-incoming-64bit binaryen-master-64bit
# Make the "latest" SDK "active" for the current user. (writes ~/.emscripten file)
./emsdk activate latest #or ./emsdk activate sdk-incoming-64bit binaryen-master-64bit
# Activate PATH and other environment variables in the current terminal
# 当前命令窗口
source ./emsdk_env.sh测试一下
emcc
INFO root: (Emscripten: Running sanity checks)
WARNING root: no input files
lemon-Air:emsdk_portablehello.c#include <stdio.h>
int main( )
{
printf("Hello World!\n");
}
//保存为hello.c
emcc hello.c
node a.out.js就可以看到结果了参考:emscripten.org/docs/gettin…
3、注意
系统目录安装问题:
安装到/usr/local下一直报错
emcc 在 1.37 以上版本才支持直接生成 wasm 文件。
安装Binaryen
此存储库包含用于构建以下工具的代码bin/:
- wasm-opt:加载WebAssembly并运行Binaryen IR传递。
- wasm-as:将WebAssembly以文本格式(当前为S-Expression格式)组装成二进制格式(通过Binaryen IR)。
- wasm-dis:将二进制格式的WebAssembly组装成文本格式(通过Binaryen IR)。
- wasm2js:WebAssembly-to-JS编译器。Emscripten使用它来生成JavaScript作为WebAssembly的替代。
- wasm-shell:一个可以加载和解释WebAssembly代码的shell。它还可以运行spec测试套件。
- wasm-emscripten-finalize:获取由llvm + lld生成的wasm二进制文件,并对其执行emscripten特定的传递。
- asm2wasm:asm.js-to-WebAssembly编译器,使用Emscripten的asm优化器基础结构。当Emscripten使用Emscripten的fastcomp asm.js后端时,它将在二进制模式下使用。
- wasm-ctor-eval:一种可以提前执行C ++全局构造函数的工具。由Emscripten使用。
- binaryen.js:一个独立的JavaScript库,它公开了用于创建和优化WASM模块的 Binaryen方法。对于构建,请参阅npm上的binaryen.js(或直接从github,rawgit或unpkg下载)
git clone https://github.com/WebAssembly/binaryen.git
cmake . && make
安装WABT (WebAssembly Binary Toolkit)
git clone --recursive https://github.com/WebAssembly/wabt
cd wabt
mkdir build
cd build
cmake ..
cmake --build .
# 或者直接运行
make
#test
bin/wat2wasm out/test.wat -o out/test.wasm浏览器
体验新技术,建议使用激进版浏览器,最新版本中都已经支持了 WebAssembly。
- 黄色的 Chrome (Chrome Canary)
- 紫色的 Safari (Safari Technology Preview)
- 深蓝色的 Firefox (Firefox Nightly)
- 改头换面的 IE (Microsoft Edge)
除了上边几个激进的浏览器,在主流版本里开启 flag 也是可以使用 WebAssembly 的:
- Chrome: 打开 chrome://flags/#enable-webassembly,选择 enable。
- Firefox: 打开 about:config 将 javascript.options.wasm 设置为 true。
- Opera:opera://flags/#enable-webassembly;
- Vivaldi:vivaldi://flags#enable-webassembly。