WebAssemly環境配置

本文住要講了Emscripen、Bi naryen、 WABT ,瀏覽器環境配置。

安裝Emscripen

一、安裝git、cmake、python2.7.x、編譯器

安裝完畢後，確認 git，cmake 和 python 已經在你的環境變量裏，能夠使用。

brew install cmake複製代碼

二、安裝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…

三、注意

系統目錄安裝問題：

安裝到/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

複製代碼

參考： github.com/WebAssembly…

安裝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。

• 黃色的 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。