如何使用Emscripten将C代码编译成WebAssembly?

科技发展
8阅读

我们在前一篇文章《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!"); }

请注意,“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的要点。

来源:搜狐

the end
免责声明:本文不代表本站的观点和立场,如有侵权请联系本站删除!本站仅提供信息存储空间服务。

精选推荐

随机推荐