【51CTO.com快译】我们在前一篇文章《WebAssmbly是什么?您为什么需要它?》中讨论了WebAssmbly是什么以及使用WebAssembly的主要好处。
一旦您读完那篇文章，第一个问题可能是“我如何开始使用WebAssembly?”这正是本文要探讨的问题。我将演示如何开始使用这项技术。我会在Ubuntu Linux 20.04上进行操作，并向您介绍如何运行总是有用的“Hello, World!”应用程序。这个简单的示例让您可以轻松开始使用WebAssembly。
不妨介绍接触您的第一个WebAssembly 应用程序的几个步骤。
安装必要的依赖项
幸好，没有太多的依赖项要操心。但是在我们为WebAssembly安装必要的组件之前，需要使用以下命令来安装 git：
- sudo apt-get install git -y
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
文件下载完成后，使用以下命令切换到新创建的目录：
- cd emsdk
接下来，我们将确保使用以下命令更新我们的源代码：
- git pull
现在，我们可以使用以下命令安装最新版本的 Emscripten：
- ./emsdk install latest
这将需要一些时间(因为它必须为您的系统安装诸多工具)。这部分完成大概需要30分钟。安装完成后，您可以使用以下命令激活最新版本：
- ./emsdk activate latest
最后，我们将使用以下命令设置各个环境变量：
- source ./emsdk_env.sh
创建您的Hello, World!源代码
我们现在准备好最终创建Hello, World!应用程序。我们将使用C语言编写这个应用程序，所以对于许多人来说，这可能是老生常谈了。使用以下命令创建新文件：
- nano hello_world.c
在该文件中，粘贴以下代码：
- #include <stdio.h>
- int main(int argc, char ** argv) {
- printf("Hello, New Stack!\n");
- }
请注意，“Hello, World!”上出现的变化。
使用键盘快捷键 [Ctrl]+[x]保存并关闭文件。
编译源代码
我们现在要做的是使用emcc编译器将C代码转换成WebAssembly (WASM) HTML文件。我们将使用以下命令执行此操作：
- emcc hello_world.c -s WASM=1 -o hello_world.html
在我们实际启动代码之前，仍需要安装Web服务器，然后将代码转移到服务器文档根目录。您也可以通过以下命令使用Emscripten的内置 HTTP服务器来避免这番操作：
- emrun --no_browser --port 8080 hello_world.html
然而，要使用上述命令，您必须使用以下命令重新编译代码：
- emcc --emrun hello_world.c -s WASM=1 -o hello_world.html
不妨以正确的方式做这一步。使用以下命令安装Apache Web服务器：
- sudo apt-get install apache2 -y
一旦安装完成，使用以下命令启动并启用Apache Web服务器服务：
- sudo systemctl start apache2
- sudo systemctl enable apache2
接下来，使用以下命令将emsdk文件夹移到Apache文档根目录：
- sudo mv emsdk /var/www/html
现在，将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
一旦完成了这一步，您可以使用以下命令切换到文档根目录：
- cd /var/www/html/
使用以下命令删除emsdk文件夹(如果您已将其移至文档根目录)：
- rm -rf emsdk
然后从头开始，返回命令：
- sudo git clone https://github.com/emscripten-core/emsdk.git
再次阅读操作方法，您应该能够编译Apache文档根目录中的代码，然后从Web浏览器来运行它。
这就是如何在Emscripten的帮助下使用WebAssembly将C代码编译成HTML的要点。
原文标题：How to Compile C code into WebAssembly with Emscripten，作者：Jack Wallen
【51CTO译稿，合作站点转载请注明原文译者和出处为51CTO.com】
