【51CTO.com快译】我们在前一篇文章《WebAssmbly是什么?您为什么需要它?》中讨论了WebAssmbly是什么以及使用WebAssembly的主要好处。

一旦您读完那篇文章，第一个问题可能是“我如何开始使用WebAssembly?”这正是本文要探讨的问题。我将演示如何开始使用这项技术。我会在Ubuntu Linux 20.04上进行操作，并向您介绍如何运行总是有用的“Hello, World!”应用程序。这个简单的示例让您可以轻松开始使用WebAssembly。

不妨介绍接触您的第一个WebAssembly 应用程序的几个步骤。

安装必要的依赖项

幸好，没有太多的依赖项要操心。但是在我们为WebAssembly安装必要的组件之前，需要使用以下命令来安装 git：

sudo apt-get install git -y 
1.

git安装完毕后，您可以准备WebAssembly环境了。

安装Emscripten

下一步是使用Emscripten，这个开源软件可以将用C或C++(或任何使用LLVM的语言)编写的项目编译成浏览器、Node.js或wasm运行时环境。Emscripten SDK分析了所有必要的工具(比如Clang、Python和Node.js)，以及经过更新的机制，以便迁移到第一时间发布的较新版本的工具链。

我们要做的是先编译用户主目录中的代码。接下来，我们将通过使其可在Apache文档根目录中运行，让它更有用一点。

要下载Empscripten SDK，请执行命令(从用户的主目录中执行)：

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

文件下载完成后，使用以下命令切换到新创建的目录：

cd emsdk 
1.

接下来，我们将确保使用以下命令更新我们的源代码：

git pull 
1.

现在，我们可以使用以下命令安装最新版本的 Emscripten：

./emsdk install latest 
1.

这将需要一些时间(因为它必须为您的系统安装诸多工具)。这部分完成大概需要30分钟。安装完成后，您可以使用以下命令激活最新版本：

./emsdk activate latest 
1.

最后，我们将使用以下命令设置各个环境变量：

source ./emsdk_env.sh 
1.

创建您的Hello, World!源代码

我们现在准备好最终创建Hello, World!应用程序。我们将使用C语言编写这个应用程序，所以对于许多人来说，这可能是老生常谈了。使用以下命令创建新文件：

nano hello_world.c 
1.

在该文件中，粘贴以下代码：

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

请注意，“Hello, World!”上出现的变化。

使用键盘快捷键 [Ctrl]+[x]保存并关闭文件。

编译源代码

我们现在要做的是使用emcc编译器将C代码转换成WebAssembly (WASM) HTML文件。我们将使用以下命令执行此操作：

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

在我们实际启动代码之前，仍需要安装Web服务器，然后将代码转移到服务器文档根目录。您也可以通过以下命令使用Emscripten的内置 HTTP服务器来避免这番操作：

emrun --no_browser --port 8080 hello_world.html 
1.

然而，要使用上述命令，您必须使用以下命令重新编译代码：

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

不妨以正确的方式做这一步。使用以下命令安装Apache Web服务器：

sudo apt-get install apache2 -y 
1.

一旦安装完成，使用以下命令启动并启用Apache Web服务器服务：

sudo systemctl start apache2 
sudo systemctl enable apache2 
1.
2.

接下来，使用以下命令将emsdk文件夹移到Apache文档根目录：

sudo mv emsdk /var/www/html 
1.

现在，将Web浏览器指向http://localhost/emsdk/hello_world.html，您应该会看到Hello, New Stack!显示出来(图 1)。

图 1：Hello, New Stack!

如果您在服务器上安装了Emscripten(没有GUI)，可以将Web浏览器指向 http://SERVER/emsdk/hello_world.html(其中Server是服务器的IP地址或域)，您会看到相同的结果。

不过要注意的是，一旦将emsdk文件夹移到文档根目录中，您无法将新代码编译成 WebAssembly，因为环境变量将发生变化。因此，您需要重新开始该过程，只是这次使用sudo(因为您的标准用户没有权限在/var/www/html/目录中安装)。为此，您可以使用以下命令更改为root用户：

sudo -s 
1.

一旦完成了这一步，您可以使用以下命令切换到文档根目录：

cd /var/www/html/ 
1.

使用以下命令删除emsdk文件夹(如果您已将其移至文档根目录)：

rm -rf emsdk 
1.

然后从头开始，返回命令：

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

再次阅读操作方法，您应该能够编译Apache文档根目录中的代码，然后从Web浏览器来运行它。

这就是如何在Emscripten的帮助下使用WebAssembly将C代码编译成HTML的要点。

原文标题：How to Compile C code into WebAssembly with Emscripten，作者：Jack Wallen

【51CTO译稿，合作站点转载请注明原文译者和出处为51CTO.com】