在Windows10搭建WebAssembly開發環境

kunger發表於2021-03-15

最近研究WebAssembly技術,準備用WebAssembly編譯C/C++程式碼供前端呼叫。網上看了很多文章,收穫很大,現在就遇到的問題做一個記錄。

官閘道器於windows開發環境搭建基本上幾句話,寫的太簡單,看來是把每個人都當資深程式設計師了。

https://emscripten.org/docs/getting_started/downloads.html

 

初學者估計會看的一臉懵。網上找了很多文章,都沒有特別詳細的操作步驟。由於命令列用的不熟,再加上有些文章說用命令安裝,資料來源來自谷歌,如果沒有代理的話可能會下載失敗。因此我一開始沒有使用官方推薦的方法,而是找了一篇文章,下載了文章中附件emsdk-1.35.0-full-64bit.exe的安裝包,安裝後的功能基本正常,編寫的一個Hello world的C檔案也成功編譯成了如下圖所列的檔案:

 

 直接雙擊開啟hello.html,能正常顯示:

 

 

由於我的目的是編譯C/C++生成wasm檔案,再引入到前端,用js呼叫C/C++裡面的方法,因此當我再編譯一個包含自定義方法的math.c的C檔案在前端呼叫時,程式碼一直報錯找不到這個wasm檔案,此時我就開始懷疑安裝的這個emsdk是否有問題。

因為官網上最新版本編譯hello.c檔案生成是這樣的:

 

 與我上面貼的自己生成的明顯不一樣。因此下定決心,把剛安裝的emsdk1.35.0解除安裝了,重新按照官網的步驟安裝最新版試試。

由於我第一次用安裝檔案安裝時,它會預設安裝在C盤,因此環境變數是自動配置的C盤路徑,解除安裝時環境變數一起被自動清除了。

1、依據官網步驟,首先安裝Git(我很早已經安裝了),略過。

2、在電腦的其他盤,我的在D盤,建立一個目錄D:\devEnv\webAssembly。

3、在webAssembly目錄下cmd視窗執行下面命令:

     git clone https://github.com/juj/emsdk.git

這個從github上下載很快,1分鐘搞定。

4、進入下載好的emsdk目錄,繼續cmd安裝最新版本(這一步就是從谷歌的一個地址下載檔案,我嘗試了很多遍,一開始執行emsdk install  latest報無法連線伺服器,1060等錯誤,試了半天都不行,最後用下面這行命令終於成功了)

emsdk install --global latest

5、當安裝完成配置好後執行啟用:

emsdk activate latest


6、配置啟用後需要應用環境變數(該步操作在每次開啟新的cmd視窗時都需要執行emsdk_env.bat,相當於臨時配置。手動永久配置到系統的環境變數裡我還沒嘗試)

emsdk_env.bat


7、驗證是否安裝成功

emcc -v 不會報錯
emcc --clear-cache 不會報錯


至此安裝完成。可以再嘗試編譯hello.c生成的檔案如下,和官網一致。開啟顯示正常。

繼續編譯math.c,在前端呼叫加法和乘法,成功!

 

 參考文章連結:

https://www.cnblogs.com/jixiaohua/p/10424941.html

https://blog.csdn.net/wangx893175022/article/details/106209322/

 

相關文章