<!--
@title webAssembly 環(huán)境搭建
@author bingxl
@emaill scarecrowlxb@qq.com
-->
# 開發(fā)者指導
本頁面提供一步一步的操作將一個簡單的程序編譯成webassembly
## 前提要求
為了編譯成webAssembly，需要提前安裝一些工具：
+ Git。在Linux和OSX下已自帶了Git，在Windows下需要安裝 [Git for Windows](https://git-scm.com/download/win)
+ CMake。在Linux和OSX下可以使用像apt-get 或 brew 這樣的包管理工具來安裝，在Windows下下載[CMake installer](https://cmake.org/download);
+ 編譯工具。 在linux下安裝[GCC](https://askubuntu.com/questions/154402/install-gcc-on-ubuntu-12-04-lts)，在OSX下安裝[Xcode](https://itunes.apple.com/us/app/xcode/id497799835)。在Windows下安裝 [Visual Studio 2015 Community with Update 3](://www.visualstudio.com/downloads/) 或更新的版本;
+ Python2.7.x。在Linux和OSX下大部分都內(nèi)置了Python2.7版本，沒有的需要安裝，Windows下需要自動下載安裝；
安裝完后，確保git,cmake,python可訪問（否則手動添加環(huán)境變量）；從技術(shù)上講,如果使用提前編譯好的工具鏈，那么CMake和編譯工具不是必須的，只是開發(fā)選項可能受到一點限制。
## 下載或編譯工具鏈
在GitHub行容易獲得一個提前編譯好的工具鏈，用以將c/c++編譯d為webAssembly
```
$ git clone https://github.com/juj/emsdk.git
$ cd emsdk
$ ./emsdk install latest
$ ./emsdk activate latest
```
如果你在Linux發(fā)布版本的操作系統(tǒng)里無法獲得預編譯的Emscripten 工具鏈，或者你想從源碼構(gòu)建所有工具鏈，Emscripten SDK 也能用來構(gòu)建。它的操作步驟如下：
```
$ 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
```
經(jīng)過h這些步驟后，安裝已經(jīng)完成了。在下載完預編譯工具鏈或者你自己構(gòu)建完成后，將Emscripten編譯環(huán)境添加到當前shell環(huán)境中，輸入：
```
$ source ./emsdk_env.sh --build=Release
```
此條命令添加相關的環(huán)境變量和目錄到PATH中，使得當前終端很容易的找到編譯工具。
在Windows下 把上面所有命令中的 `./emsdk`替換為 `emsdk`， `source ./emsdk_env.sh`替換為 `emsdk_env`。
如果你是使用 Visual Studio 2017 ，在`emsdk install`命令后面添加一個參數(shù) `--vs2017`
## 編譯執(zhí)行一個簡單的程序
現(xiàn)在有一個完整的工具鏈來編譯簡單的程序為webAssembly。但是下面還有幾個說明：
+ 需要使用`emcc`的 `-s WASM=1`選項。否則`emcc`默認編譯為asm.js;
+ 如果要使Emscripten生成除了Wasm二進制文件和JavaScript包裝文件外的可執(zhí)行HTML文件，需要指定一個以 `.html`結(jié)尾的輸出文件；
+ 最后，不能在瀏覽器里通過file://協(xié)議簡單的打開HTML文件，因為在`file`協(xié)議里跨源請求時不被允許的，需要通過一個http服務來打開文件。
下面的命令創(chuàng)建和編譯一個簡單的“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](http://localhost:8000/hello.html)，如果你在Emscripten 控制臺看到“Hello world!”,那么恭喜你已經(jīng)成功的編譯webAssembly!
## 一點思考
對于辦公來說，首選的時Windows或OSX，但OSX太貴了，所以Windows用的還是挺多的，我遇到好多的工具在Windows下的使用都依賴Visual Studio，但是Visual Studio實在是太笨重了，我特別厭惡，之后遇到了WSL 即Windows子系統(tǒng)，在里面可以安裝好幾種Linux系統(tǒng)，用起來特別流暢，比虛擬機好用多了，我覺得這個微軟的這個功能特別贊。
WebAssembly文件加載常會碰都WebAssembly因為MIME 不是 wasm類型而無法編譯問題，可以查看自己的服務器軟件里有么有 Application/wasm類型。
## nginx配置 MIME類型
找到nginx的配置文件所在目錄，我的在`/etc/nginx/`下，里面有個mime.types文件，為了不弄亂排序結(jié)構(gòu)，找到 application/v**** 和 application/x****的配置項中間加一行 `application/wasm? wasm;`,保存后重啟nginx `systemctl restart nginx`
```
// 配置后的一部分內(nèi)容
..................
application/vnd.google-earth.kmz? kmz;
application/wasm? ? ? ? ? ? ? ? ? wasm;
application/x-7z-compressed? ? ? ? 7z;
....................
```
使用 `curl -I url`查看服務器響應的頭部信息。
