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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

现在，将Web浏览器指向，您应该会看到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用户：

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

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

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

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

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

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

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

【编辑推荐】

来源：51CTO布加迪