Emscripten編譯器安裝教程，親測成功編譯出第一個WebAssembly

klinson 發布于2019-08-22 16:02 / 2271人閱讀

摘要：如何判斷環境變量是否配置成功呢可以使用命令行工具在非目錄下，執行，看看結果是不是類似下面如果是，那么恭喜你已經安裝成功了。

javascript 這門語言的性能無法與原生的C/C++代碼相媲美，為了進一步提高網頁的性能，業界推出了WebAssembly技術：將C語言編譯成了瀏覽器可以執行的wasm文件。WebAssembly不僅提高了網頁的性能，而且還可以完成原來javascript無法實現的功能。

要想使用WebAssembly，就需要通過Emscripten編譯器將C語言編譯成wasm文件，但是官方安裝教程不夠細致，可能會讓開發者造成困惑而導致安裝失敗（本寶寶就失敗了好多次，所以覺得有必要寫本文）。

PS：本文是windows系統Emscripten編譯器安裝教程

步驟一：克隆emsdk倉庫

# 克隆emsdk倉庫，并執行安裝
git clone https://github.com/juj/emsdk.git

步驟二：安裝

# 定位到emsdk文件夾
cd emsdk

# 執行 update
emsdk update

# 安裝各種工具
emsdk install latest

在執行emsdk install latest會下載安裝很多東西，時間會有些久，最后一個需要下載的東西（emscripten-x.xx.xx.zip）是從github下載的，經常會下載失敗。

好在第一次執行 emsdk install latest 成功下載并安裝的東西，當你再次執行 emsdk install latest 的時候并不需要重新下載安裝，所以如果你發現emscripten-x.xx.xx.zip下載失敗，可以復制命令行中的下載地址，使用迅雷先下載好，按照命令行中的保存路徑，事先將.zip放到那個路徑下面，事情就解決了。

# 生成 ~/.emscripten 文件，激活配置
emsdk activate latest

最后，雙擊emsdk目錄下的emsdk_env.bat文件配置環境變量，不過我雖然雙擊了，但是環境變量并沒有被設置。如何判斷環境變量是否配置成功呢？可以使用命令行工具在非emsdk目錄下，執行emcc -v，看看結果是不是類似下面：

C:UsersAdministrator>emcc -v
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 1.37.36
clang version 5.0.0  (emscripten 1.37.36 : 1.37.36)
Target: x86_64-pc-windows-msvc
Thread model: posix
InstalledDir: D:Applicationemsdkclange1.37.36_64bit
INFO:root:(Emscripten: Running sanity checks)

C:UsersAdministrator>

如果是，那么恭喜你已經安裝成功了。可以忽略步驟三了。

步驟三：配置環境變量

打開剛才克隆下來的emsdk文件夾，雙擊執行emcmdprompt.bat文件，可以看到如下內容（我把emsdk克隆到了D:Application下，所以下面有很多D:Application，實際情況以你們克隆保存目錄為準）：

Adding directories to PATH:
PATH += D:Applicationemsdkclange1.37.36_64bit
PATH += D:Applicationemsdk
ode8.9.1_64bitin
PATH += D:Applicationemsdkpython2.7.13.1_64bitpython-2.7.13.amd64
PATH += D:Applicationemsdkjava8.152_64bitin
PATH += D:Applicationemsdkemscripten1.37.36

Setting environment variables:
EMSDK = D:/Application/emsdk
BINARYEN_ROOT = D:Applicationemsdkclange1.37.36_64bitinaryen
JAVA_HOME = D:Applicationemsdkjava8.152_64bit
EMSCRIPTEN = D:Applicationemsdkemscripten1.37.36

這堆東西用來讓你配置環境變量的，右鍵我的電腦 -> 屬性 -> 高級系統設置 -> 環境變量，在系統變量的Path值中添加：

D:Applicationemsdkclange1.37.36_64bit;D:Applicationemsdk
ode8.9.1_64bitin;D:Applicationemsdkpython2.7.13.1_64bitpython-2.7.13.amd64;D:Applicationemsdkjava8.152_64bitin;D:Applicationemsdkemscripten1.37.36

新建系統變量EMSDK，值設置為D:/Application/emsdk
新建系統變量BINARYEN_ROOT，值設置為D:Applicationemsdkclange1.37.36_64bitinaryen
新建系統變量JAVA_HOME，值設置為D:Applicationemsdkjava8.152_64bit
新建系統變量EMSCRIPTEN，值設置為D:Applicationemsdkemscripten1.37.36

點擊確定退出設置，嘗試在其他非emsdk目錄執行 emcc -v 檢查是否配置成功。

步驟四：編譯第一個wasm文件

在其他文件夾新建一個 index.c 文件（我參考了這篇文章中代碼：讓C代碼在瀏覽器中運行）：

#include 
#include 
#include 
#include 
// 一旦WASM模塊被加載，main()中的代碼就會執行
int main(int argc, char ** argv) {
    printf("WebAssembly module loaded
");
}
// 返回1-6之間的一隨機數
int EMSCRIPTEN_KEEPALIVE roll_dice() {
    srand ( time(NULL) );
    return rand() % 6 + 1;
}

然后用命令行工具定位到這個文件夾，執行：

emcc index.c -s WASM=1 -O3 -o index.js

等待片刻之后，你就能夠看見生成了兩個新文件：

index.js
index.wasm

你可以用html引入這個index.js試試（index.wasm必須和index.js在同一路徑下）

end.

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93993.html

WebAssembly和Emscripten工作整理

摘要：寫在前面之前做過一段時間的的研究，寫過幾個，并且閱讀并翻譯了很多篇官方文檔，今天對這些東西做一個總結。主要是以鏈接形式提供，并附上簡短的說明。歡迎加入和技術交流群，群聊號碼寫在前面之前做過一段時間的WebAssembly的研究，寫過幾個WebAssembly Demo，并且閱讀并翻譯了很多篇Emscripten官方文檔，今天對這些東西做一個總結。如果有需要對這塊知識了解的同學，就可...

qieangel2013 2019-08-21 18:46 評論0 收藏0
WebAssembly起步

摘要：解析下載后，需要引擎經過兩個階段轉換成，然后再轉換為瀏覽器需要的中間字節碼。未來所有支持編譯到字節碼的編程語言，理論上都可以輸出。了解WebAssembly原理 WebAssembly是一種可以在瀏覽器上運行的二進制可執行格式文件。它將成為瀏覽器進化史上又一次革命。自從瀏覽器問世以來，javascript就成為瀏覽器上執行程序的唯一標準，越來越多的應用程序通過javascript開...

shiina 2019-08-22 13:45 評論0 收藏0
WebAssembly應用到前端工程（上）—— webassembly模塊的編寫

摘要：本文以這個模塊的開發過程梳理如何應用到前端工程中。注使用完成開發至少需要基礎的編碼能力。具體其他信息可以參考上該模塊的。配置主要針對源碼文件，需要添加正確的進行處理。下一篇應用到前端工程下和前言 WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine...

Mr_houzi 2019-08-23 18:14 評論0 收藏0
Emscripten教程之入門指導

摘要：歡迎加入和技術交流群，群聊號碼。下面是正文如果只是想要入門的話，使用是非常簡單的。主要是通過來工作的。實際上，這塊區域不僅可以顯示文本。對于開發者來說，這是非常好的資源。翻譯：云荒杯傾本文是Emscripten-WebAssembly專欄系列文章之一，更多文章請查看專欄。也可以去作者的博客閱讀文章。歡迎加入Wasm和emscripten技術交流群，群聊號碼：939206522。下面...

jzzlee 2019-08-01 17:39 評論0 收藏0