【51CTO.com快譯】我們在前一篇文章《WebAssmbly是什么?您為什么需要它?》中討論了WebAssmbly是什么以及使用WebAssembly的主要好處。

一旦您讀完那篇文章，第一個問題可能是“我如何開始使用WebAssembly?”這正是本文要探討的問題。我將演示如何開始使用這項技術(shù)。我會在Ubuntu Linux 20.04上進(jìn)行操作，并向您介紹如何運行總是有用的“Hello, World!”應(yīng)用程序。這個簡單的示例讓您可以輕松開始使用WebAssembly。

不妨介紹接觸您的第一個WebAssembly 應(yīng)用程序的幾個步驟。

安裝必要的依賴項

幸好，沒有太多的依賴項要操心。但是在我們?yōu)閃ebAssembly安裝必要的組件之前，需要使用以下命令來安裝 git：

sudo apt-get install git -y 

git安裝完畢后，您可以準(zhǔn)備WebAssembly環(huán)境了。

安裝Emscripten

下一步是使用Emscripten，這個開源軟件可以將用C或C++(或任何使用LLVM的語言)編寫的項目編譯成瀏覽器、Node.js或wasm運行時環(huán)境。Emscripten SDK分析了所有必要的工具(比如Clang、Python和Node.js)，以及經(jīng)過更新的機制，以便遷移到第一時間發(fā)布的較新版本的工具鏈。

我們要做的是先編譯用戶主目錄中的代碼。接下來，我們將通過使其可在Apache文檔根目錄中運行，讓它更有用一點。

要下載Empscripten SDK，請執(zhí)行命令(從用戶的主目錄中執(zhí)行)：

git clone https://github.com/emscripten-core/emsdk.git 

文件下載完成后，使用以下命令切換到新創(chuàng)建的目錄：

cd emsdk 

接下來，我們將確保使用以下命令更新我們的源代碼：

git pull 

現(xiàn)在，我們可以使用以下命令安裝最新版本的 Emscripten：

./emsdk install latest 

這將需要一些時間(因為它必須為您的系統(tǒng)安裝諸多工具)。這部分完成大概需要30分鐘。安裝完成后，您可以使用以下命令激活最新版本：

./emsdk activate latest 

最后，我們將使用以下命令設(shè)置各個環(huán)境變量：

source ./emsdk_env.sh 

創(chuàng)建您的Hello, World!源代碼

我們現(xiàn)在準(zhǔn)備好最終創(chuàng)建Hello, World!應(yīng)用程序。我們將使用C語言編寫這個應(yīng)用程序，所以對于許多人來說，這可能是老生常談了。使用以下命令創(chuàng)建新文件：

nano hello_world.c 

在該文件中，粘貼以下代碼：

#include <stdio.h> 
int main(int argc, char ** argv) { 
  printf("Hello, New Stack!\n"); 
} 

請注意，“Hello, World!”上出現(xiàn)的變化。

使用鍵盤快捷鍵 [Ctrl]+[x]保存并關(guān)閉文件。

編譯源代碼

我們現(xiàn)在要做的是使用emcc編譯器將C代碼轉(zhuǎn)換成WebAssembly (WASM) HTML文件。我們將使用以下命令執(zhí)行此操作：

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

在我們實際啟動代碼之前，仍需要安裝Web服務(wù)器，然后將代碼轉(zhuǎn)移到服務(wù)器文檔根目錄。您也可以通過以下命令使用Emscripten的內(nèi)置 HTTP服務(wù)器來避免這番操作：

emrun --no_browser --port 8080 hello_world.html 

然而，要使用上述命令，您必須使用以下命令重新編譯代碼：

emcc --emrun hello_world.c -s WASM=1 -o hello_world.html 

不妨以正確的方式做這一步。使用以下命令安裝Apache Web服務(wù)器：

sudo apt-get install apache2 -y 

一旦安裝完成，使用以下命令啟動并啟用Apache Web服務(wù)器服務(wù)：

sudo systemctl start apache2 
sudo systemctl enable apache2 

接下來，使用以下命令將emsdk文件夾移到Apache文檔根目錄：

sudo mv emsdk /var/www/html 

現(xiàn)在，將Web瀏覽器指向http://localhost/emsdk/hello_world.html，您應(yīng)該會看到Hello, New Stack!顯示出來(圖 1)。

圖 1：Hello, New Stack!

如果您在服務(wù)器上安裝了Emscripten(沒有GUI)，可以將Web瀏覽器指向 http://SERVER/emsdk/hello_world.html(其中Server是服務(wù)器的IP地址或域)，您會看到相同的結(jié)果。

不過要注意的是，一旦將emsdk文件夾移到文檔根目錄中，您無法將新代碼編譯成 WebAssembly，因為環(huán)境變量將發(fā)生變化。因此，您需要重新開始該過程，只是這次使用sudo(因為您的標(biāo)準(zhǔn)用戶沒有權(quán)限在/var/www/html/目錄中安裝)。為此，您可以使用以下命令更改為root用戶：

sudo -s 

一旦完成了這一步，您可以使用以下命令切換到文檔根目錄：

cd /var/www/html/ 

使用以下命令刪除emsdk文件夾(如果您已將其移至文檔根目錄)：

rm -rf emsdk 

然后從頭開始，返回命令：

sudo git clone https://github.com/emscripten-core/emsdk.git 

再次閱讀操作方法，您應(yīng)該能夠編譯Apache文檔根目錄中的代碼，然后從Web瀏覽器來運行它。

這就是如何在Emscripten的幫助下使用WebAssembly將C代碼編譯成HTML的要點。

原文標(biāo)題：How to Compile C code into WebAssembly with Emscripten，作者：Jack Wallen

【51CTO譯稿，合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】