WebAssemly环境配置

3,034 阅读2分钟
本文住要讲了Emscripen、Binaryen、WABT ,浏览器环境配置。

安装Emscripen

1、安装git、cmake、python2.7.x、编译器
安装完毕后,确认 git,cmake 和 python 已经在你的环境变量里,可以使用。

brew install cmake
2、安装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_portable

hello.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(或直接从githubrawgitunpkg下载

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

参考资料:github.com/WebAssembly…

浏览器

体验新技术,建议使用激进版浏览器,最新版本中都已经支持了 WebAssembly。
除了上边几个激进的浏览器,在主流版本里开启 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。