VS2015 + emsdk + vs-tool

目的:

      VS2015 IDE內部嵌入Emscripten編譯器,這樣我們就可以使用VS強大的編輯功能,代碼提示,一鍵編譯(build),工程配置,工程結構明朗易懂易管理等。但目前emcc編譯器的調試功能難以掌握,需要使用web進行調試,暫時不做深究。建議在寫代碼時,使用printf打印提示信息,這樣可以在web端查看打印信息,從另一個角度輔助我們的調試。

 

Windows環境搭建步驟如下:

      1、安裝好VS2015 IDE任何一個版本都可以。

      2、安裝emsdk,安裝步驟如下:

            <1>、下載python2.7版本以上的任意一個版本,安裝到系統,最後使用python --version檢查安裝是否成功。

            <2>、下載git,安裝到系統,git --version 檢查是否安裝成功。

            <3>、創建一個空目錄,在該目錄下打開cmd命令行工具,輸入git clone https://github.com/emscripten-core/emsdk  等待克隆完成。

            <4>、cd emsdk 切換到該目錄下。

            <5>、emsdk update 該命令會拉取所有最新文件,如果沒有最新文件添加,會直接提示你git pull,走下一步即可。

            <6>、 git pull 等待更新到最新版本。

            <7>、emsdk install latest 等待安裝完成,這一步會比較慢,建議安裝一個vpn工具。

            <8>、emsdk activate latest 激活版本,這一步在此後要重新使用emsdk時需要先使用,纔可以使用emcc編譯代碼。

            <9>、emcc -v 會顯示最新版本號,說明安裝成功。

    3、下載 vs-tool 工具:https://github.com/crosire/vs-toolsets

    4、將vs-toolsets-master目錄下的所有內容拷貝到 C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V140 目錄下粘貼即可。 注意:因爲vs-toolsets-master這個工具只是針對VS2015寫的規則文件, 

         所以拷貝目錄就是VS2015平臺所在目錄。該工具還支持VS2013,但是沒試驗過,理論上應該沒問題。其他VS版本不支持,除非我們仿造該工具專門爲VS2015之後的版本寫規則文件,同樣拷貝到相應的平 臺目錄下。

    5、添加emsdk目錄下的emscripten目錄路徑到系統環境變量Path中。並且增加EMSCRIPTEN 變量,變量值也是emscripten目錄路徑。 注意:請查找emsdk目錄下,包括子目錄,找到

         emscripten目錄,將該目錄路徑拷貝到Path中。例如:我的emscripten目錄路徑爲 D:\WebAssembly\emsdk\upstream\emscripten 將該路徑添加到Path,增加EMSCRIPTEN變量與值。

    6、打開VS2015,新建一個console工程,選擇配置管理器,增加新的平臺Emscripten。 在工程屬性中 配置屬性->通用→平臺工具集 選擇Emscripten。 最後編譯即可得到 html,js,wasm文件   

 

編譯錯誤解決方案:

    a.編譯可能會出現emcc.xml找不到,這時候查看VS中的$(LangID)值是多少,就將該目錄(C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V140\Platforms\Emscripten\PlatformToolsets\emcc\1033)名字改爲LangID的值。 我的clang ID 是2052,於是最終要修改爲C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V140\Platforms\Emscripten\PlatformToolsets\emcc\2052

  b. 編譯出現找不到 clang++.exe,這是系統環境變量中的EMSCRIPTEN 值沒有與vs-tool裏面配置的路徑一致,需要將EMSCRIPTEN 的值改爲你當前emscripten目錄所在路徑。

  

具體操作步驟如下圖:

 

 

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章