我們?cè)谇耙黄恼隆禬ebAssmbly是什么?您為什么需要它?》中討論了WebAssmbly是什么以及使用WebAssembly的主要好處。

創(chuàng)新互聯(lián)專注于舒蘭企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),商城網(wǎng)站建設(shè)。舒蘭網(wǎng)站建設(shè)公司,為舒蘭等地區(qū)提供建站服務(wù)。全流程按需求定制設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

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

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

安裝必要的依賴項(xiàng)

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

 
 
 
 

  
  
  
  
sudo apt-get install git -y 
 
 
 
 

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

安裝Emscripten

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

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

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

 
 
 
 

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

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

 
 
 
 

  
  
  
  
cd emsdk 
 
 
 
 

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

 
 
 
 

  
  
  
  
git pull 
 
 
 
 

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

 
 
 
 

  
  
  
  
./emsdk install latest 
 
 
 
 

這將需要一些時(shí)間(因?yàn)樗仨殲槟南到y(tǒng)安裝諸多工具)。這部分完成大概需要30分鐘。安裝完成后，您可以使用以下命令激活最新版本：

 
 
 
 

  
  
  
  
./emsdk activate latest 
 
 
 
 

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

 
 
 
 

  
  
  
  
source ./emsdk_env.sh 
 
 
 
 

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

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

 
 
 
 

  
  
  
  
nano hello_world.c 
 
 
 
 

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

 
 
 
 

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

請(qǐng)注意，“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 
 
 
 
 

在我們實(shí)際啟動(dòng)代碼之前，仍需要安裝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 
 
 
 
 

一旦安裝完成，使用以下命令啟動(dòng)并啟用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)該會(huì)看到Hello, New Stack!顯示出來(圖 1)。

圖 1：Hello, New Stack!

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

不過要注意的是，一旦將emsdk文件夾移到文檔根目錄中，您無法將新代碼編譯成 WebAssembly，因?yàn)榄h(huán)境變量將發(fā)生變化。因此，您需要重新開始該過程，只是這次使用sudo(因?yàn)槟臉?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瀏覽器來運(yùn)行它。

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

本文題目：如何使用Emscripten將C代碼編譯成WebAssembly？
文章分享：http://uogjgqi.cn/article/cojeioi.html