開發者指導
本頁面提供一步一步的操作將一個簡單的程序編譯成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
查看服務器響應的頭部信息。