WebAssembly簡單指導---譯

開發者指導

本頁面提供一步一步的操做將一個簡單的程序編譯成webassembly

前提要求

爲了編譯成webAssembly，須要提早安裝一些工具：

• Git。在Linux和OSX下已自帶了Git，在Windows下須要安裝 Git for Windows
• CMake。在Linux和OSX下可使用像apt-get 或 brew 這樣的包管理工具來安裝，在Windows下下載CMake installer;
• 編譯工具。 在linux下安裝GCC，在OSX下安裝Xcode。在Windows下安裝 Visual Studio 2015 Community with Update 3 或更新的版本;
• Python2.7.x。在Linux和OSX下大部分都內置了Python2.7版本，沒有的須要安裝，Windows下須要自動下載安裝；

安裝完後，確保git,cmake,python可訪問（不然手動添加環境變量）；從技術上講,若是使用提早編譯好的工具鏈，那麼CMake和編譯工具不是必須的，只是開發選項可能受到一點限制。

下載或編譯工具鏈

在GitHub行容易得到一個提早編譯好的工具鏈，用以將c/c++編譯d爲webAssembly

$ git clone https://github.com/juj/emsdk.git
$ cd emsdk
$ ./emsdk install latest
$ ./emsdk activate latest

若是你在Linux發佈版本的操做系統裏沒法得到預編譯的Emscripten 工具鏈，或者你想從源碼構建全部工具鏈，Emscripten SDK 也能用來構建。它的操做步驟以下：

$ git clone https://github.com/juj/emsdk.git
$ cd emsdk
$ ./emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit
$ ./emsdk activate --build=Release sdk-incoming-64bit binaryen-master-64bit

通過h這些步驟後，安裝已經完成了。在下載完預編譯工具鏈或者你本身構建完成後，將Emscripten編譯環境添加到當前shell環境中，輸入：

$ source ./emsdk_env.sh --build=Release

此條命令添加相關的環境變量和目錄到PATH中，使得當前終端很容易的找到編譯工具。

在Windows下 把上面全部命令中的 ./emsdk替換爲 emsdk， source ./emsdk_env.sh替換爲 emsdk_env。

若是你是使用 Visual Studio 2017 ，在emsdk install命令後面添加一個參數 --vs2017

編譯執行一個簡單的程序

如今有一個完整的工具鏈來編譯簡單的程序爲webAssembly。可是下面還有幾個說明：

• 須要使用emcc的 -s WASM=1選項。不然emcc默認編譯爲asm.js;
• 若是要使Emscripten生成除了Wasm二進制文件和JavaScript包裝文件外的可執行HTML文件，須要指定一個以 .html結尾的輸出文件；
• 最後，不能在瀏覽器裏經過file://協議簡單的打開HTML文件，由於在file協議裏跨源請求時不被容許的，須要經過一個http服務來打開文件。

下面的命令建立和編譯一個簡單的「hello world」程序：

$ mkdir hello
$ cd hello
$ touch hello.c
$ echo '#include <stdio.h> int main(int argc, char ** argv) {  printf("Hello world!");}' > hello.c
$ emcc hello.c -s WASM=1 -o hello.html

能夠g經過Emscript SDK的 emrun來提供一個http服務：

$ emrun --no_browser --port 8000 ./

當http服務運行起來，能夠從瀏覽器打開,地址爲: http://localhost:8000/hello.html，若是你在Emscripten 控制檯看到「Hello world!」,那麼恭喜你已經成功的編譯webAssembly!

一點思考

對於辦公來講，首選的時Windows或OSX，但OSX太貴了，因此Windows用的仍是挺多的，我遇到好多的工具在Windows下的使用都依賴Visual Studio，可是Visual Studio實在是太笨重了，我特別厭惡，以後遇到了WSL 即Windows子系統，在裏面能夠安裝好幾種Linux系統，用起來特別流暢，比虛擬機好用多了，我以爲這個微軟的這個功能特別贊。

WebAssembly文件加載常會碰都WebAssembly由於MIME 不是 wasm類型而沒法編譯問題，能夠查看本身的服務器軟件裏有麼有 Application/wasm類型。

nginx配置 MIME類型

找到nginx的配置文件所在目錄，個人在/etc/nginx/下，裏面有個mime.types文件，爲了避免弄亂排序結構，找到 application/v**** 和 application/x****的配置項中間加一行 application/wasm wasm;,保存後重啓nginx systemctl restart nginx

// 配置後的一部份內容
..................
application/vnd.google-earth.kmz   kmz;
application/wasm                   wasm;
application/x-7z-compressed        7z;
....................

使用 curl -I url查看服務器響應的頭部信息。