Emscripten編譯器安裝教程，親測成功編譯出第一個WebAssembly

javascript 這門語言的性能沒法與原生的C/C++代碼相媲美，爲了進一步提升網頁的性能，業界推出了WebAssembly技術：將C語言編譯成了瀏覽器能夠執行的wasm文件。WebAssembly不只提升了網頁的性能，並且還能夠完成原來javascript沒法實現的功能。

要想使用WebAssembly，就須要經過Emscripten編譯器將C語言編譯成wasm文件，可是官方安裝教程不夠細緻，可能會讓開發者形成困惑而致使安裝失敗（本寶寶就失敗了好屢次，因此以爲有必要寫本文）。

PS：本文是windows系統Emscripten編譯器安裝教程

步驟一：克隆emsdk倉庫

# 克隆emsdk倉庫，並執行安裝
git clone https://github.com/juj/emsdk.git

步驟二：安裝

# 定位到emsdk文件夾
cd emsdk

# 執行 update
emsdk update

# 安裝各類工具
emsdk install latest

在執行emsdk install latest會下載安裝不少東西，時間會有些久，最後一個須要下載的東西（emscripten-x.xx.xx.zip）是從github下載的，常常會下載失敗。

好在第一次執行 emsdk install latest 成功下載並安裝的東西，當你再次執行 emsdk install latest 的時候並不須要從新下載安裝，因此若是你發現emscripten-x.xx.xx.zip下載失敗，能夠複製命令行中的下載地址，使用迅雷先下載好，按照命令行中的保存路徑，事先將.zip放到那個路徑下面，事情就解決了。

# 生成 ~/.emscripten 文件，激活配置
emsdk activate latest

最後，雙擊emsdk目錄下的emsdk_env.bat文件配置環境變量，不過我雖然雙擊了，可是環境變量並無被設置。如何判斷環境變量是否配置成功呢？可使用命令行工具在非emsdk目錄下，執行emcc -v，看看結果是否是相似下面：

C:\Users\Administrator>emcc -v
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 1.37.36
clang version 5.0.0  (emscripten 1.37.36 : 1.37.36)
Target: x86_64-pc-windows-msvc
Thread model: posix
InstalledDir: D:\Application\emsdk\clang\e1.37.36_64bit
INFO:root:(Emscripten: Running sanity checks)

C:\Users\Administrator>

若是是，那麼恭喜你已經安裝成功了。能夠忽略步驟三了。

步驟三：配置環境變量

打開剛纔克隆下來的emsdk文件夾，雙擊執行emcmdprompt.bat文件，能夠看到以下內容（我把emsdk克隆到了D:\Application\下，因此下面有不少D:\Application\，實際狀況以大家克隆保存目錄爲準）：

Adding directories to PATH:
PATH += D:\Application\emsdk\clang\e1.37.36_64bit
PATH += D:\Application\emsdk\node\8.9.1_64bit\bin
PATH += D:\Application\emsdk\python\2.7.13.1_64bit\python-2.7.13.amd64
PATH += D:\Application\emsdk\java\8.152_64bit\bin
PATH += D:\Application\emsdk\emscripten\1.37.36

Setting environment variables:
EMSDK = D:/Application/emsdk
BINARYEN_ROOT = D:\Application\emsdk\clang\e1.37.36_64bit\binaryen
JAVA_HOME = D:\Application\emsdk\java\8.152_64bit
EMSCRIPTEN = D:\Application\emsdk\emscripten\1.37.36

這堆東西用來讓你配置環境變量的，右鍵個人電腦 -> 屬性 -> 高級系統設置 -> 環境變量，在系統變量的Path值中添加：

D:\Application\emsdk\clang\e1.37.36_64bit;D:\Application\emsdk\node\8.9.1_64bit\bin;D:\Application\emsdk\python\2.7.13.1_64bit\python-2.7.13.amd64;D:\Application\emsdk\java\8.152_64bit\bin;D:\Application\emsdk\emscripten\1.37.36

新建系統變量EMSDK，值設置爲D:/Application/emsdk
新建系統變量BINARYEN_ROOT，值設置爲D:\Application\emsdk\clang\e1.37.36_64bit\binaryen
新建系統變量JAVA_HOME，值設置爲D:\Application\emsdk\java\8.152_64bit
新建系統變量EMSCRIPTEN，值設置爲D:\Application\emsdk\emscripten\1.37.36

點擊肯定退出設置，嘗試在其餘非emsdk目錄執行 emcc -v 檢查是否配置成功。

步驟四：編譯第一個wasm文件

在其餘文件夾新建一個 index.c 文件（我參考了這篇文章中代碼：讓C代碼在瀏覽器中運行）：

#include <stdio.h>
#include <stdlib.h>
#include <time.h>
#include <emscripten/emscripten.h>
// 一旦WASM模塊被加載，main()中的代碼就會執行
int main(int argc, char ** argv) {
    printf("WebAssembly module loaded\n");
}
// 返回1-6之間的一隨機數
int EMSCRIPTEN_KEEPALIVE roll_dice() {
    srand ( time(NULL) );
    return rand() % 6 + 1;
}

而後用命令行工具定位到這個文件夾，執行：

emcc index.c -s WASM=1 -O3 -o index.js

等待片刻以後，你就可以看見生成了兩個新文件：

index.js
index.wasm

你能夠用html引入這個index.js試試（index.wasm必須和index.js在同一路徑下）

end.