在Windows10搭建WebAssembly開發環境

最近研究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盤路徑，卸載時環境變量一塊兒被自動清除了。

一、依據官網步驟，首先安裝Git（我很早已經安裝了），略過。

二、在電腦的其餘盤，個人在D盤，建立一個目錄D:\devEnv\webAssembly。

三、在webAssembly目錄下cmd窗口執行下面命令：

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

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

四、進入下載好的emsdk目錄，繼續cmd安裝最新版本（這一步就是從谷歌的一個地址下載文件，我嘗試了不少遍，一開始執行emsdk install  latest報沒法鏈接服務器，1060等錯誤，試了半天都不行，最後用下面這行命令終於成功了）

emsdk install --global latest

五、當安裝完成配置好後執行激活：

emsdk activate latest

六、配置激活後須要應用環境變量（該步操做在每次打開新的cmd窗口時都須要執行emsdk_env.bat，至關於臨時配置。手動永久配置到系統的環境變量裏我還沒嘗試）

emsdk_env.bat

七、驗證是否安裝成功

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/