1. 程式人生 > >Windows10下WebAssembly C/C++編譯環境的搭建與Hello World嘗試

Windows10下WebAssembly C/C++編譯環境的搭建與Hello World嘗試

ref 5.0 har 新版 找不到 this www 完整 編譯環境

首先,不論是在Windows、Linux還是Mac上,Webassembly的編譯都是主要依賴於Emscripten SDK這個工具的。但是,在這裏必須要吐槽一下,不論是WebAssembly官網、WebAssembly中文網還是Emscriptem官網安裝文檔上給出的安裝方式基本都是這樣的(中文網主要是Windows上的安裝,更簡單一些):

1、準備好git,cmake(這個好像可以沒有)、python2.7這三樣

2、使用git從GitHub上clone下來一個48k的emsdk工程到本地、或者直接去下載壓縮包也行,地址在官網(三家居然不一樣,不過是同一個東西)

3、下載下來之後,在這個emsdk工程裏面遠程安裝真正的Emscripten工具鏈(install,active、env三步,看官網)

以上三步就完成了開發環境的搭建,看起來So easy,然而最好不要這麽做,說多了都是淚。一二兩步還沒什麽問題,但是第三步遠程下載由於是從國外的網址(亞馬遜)上下載資源,本來訪問這種國外網站速度就慢,並且這個上百M的資源好像被放在某個犄角旮旯裏,下載速度更是比蝸牛還慢,鏡像資源又無處去找,穩定的dns也沒有,然後在cmd黑窗口上下著下著,失敗了。。。又失敗了。。。又又失敗了。或者完成了兩步,又提示缺了個llvm,clang,python不識別等等依賴問題,簡直無fu可說,官網說的Win10的Ubuntu子系統上安裝更勝一籌。

所以,這種在線安裝步驟並不適合廣大的中國開發者。只好另尋它路,即下載離線安裝包到本地再安裝,雖然Emscripten官網上說不再推薦,然而也沒辦法,下載最新版emsdk-1.35.0-full-64bit.exe安裝包,一路next就好了,這個雖然下載起來也慢,但還是可以成功的,並且它是一個完整的full包,包含了clang、java、node、python等一堆東西,不會有依賴問題。這裏貼個我的網盤地址,提取碼:frte ,裏面有git2.2,python2.7、cmake3.11、emsdk1.35,有需要的可以直接下載(如果還能用的話)。

安裝好了之後運行emsdk_env.bat會自動配置相關的環境變量,註意這步操作可能會被殺毒軟件攔截,記得放行,或者手動配置也行,反正結果是這樣:

技術分享圖片

然後檢驗一下有沒有成功

技術分享圖片

安裝好了環境,就可以愉快的寫個Hello World嘗試一下了。

C代碼:

1 #include<stdio.h>
2 
3 int main(int argc, char ** argv){
4     printf("Hello, world!");
5 }

為了保險起見,安裝個開發C/C++環境的VS2017,然後直接用VsCode/VS2017等編輯器寫好保存為.c文件就可以了,按官網的echo寫法又報c頭文件找不到錯誤( ̄_ ̄|||)

然後按官網編譯命令,開始編譯:

emcc hello.c -s WASM=1 -o hello.html

時間可能有點長,並且又報了幾個警告,好在有驚無險的完成了,結果是這樣的:

技術分享圖片

一個hello world居然有480k,包含了那些沒用的東西,還需要研究一下。

然後按官網的啟動服務命令,起個http服務,就可以自己訪問一下了:

emrun --no_browser --port 8080 C:\Users\JiXiaoHua\Desktop\hellowasm\hello.html

註意後面要加參數為具體的hello.html文件路徑,不然用 http://localhost:8080/hello.html 訪問會404,資源找不到,默認會從桌面路徑去找。

啟動服務時報了個No module named win32api錯誤,解決方法:在Python中使用Win32api報錯的問題,No module named win32api。

服務啟動成功頁面:

技術分享圖片

然後 http://localhost:8080/hello.html 訪問結果是這樣的:

技術分享圖片

瀏覽器控制臺輸出

技術分享圖片

看起來好像把原本的hello.exe嵌入到了網頁中,很神奇有木有,這便是WebAssembly說的在Web端運行C/C++程序了。

然後後臺有條警告:

The html page you are running is not emrun-capable. Stdout, stderr and exit(returncode) capture will not work. Recompile the application with the --emrun linker flag to enable this, or pass --no_emrun_detect to emrun to hide this check.

您運行的html頁面不支持emrun。 stdout,stderr和exit(returncode)捕獲將無法正常工作。 使用--emrun鏈接器標誌重新編譯應用程序以啟用此功能,或者將--no_emrun_detect傳遞給emrun以隱藏此檢查。

好像並不影響,OK,到此結束。

Windows10下WebAssembly C/C++編譯環境的搭建與Hello World嘗試