Emscripten 入门 – 将 C/C++ 转译为 JavaScript / HTML5

Dave_Voyles

5.00/5 (4投票s)

2015年11月13日

CPOL

10分钟阅读

17673

本文将重点介绍如何创建自己的 Web 项目，充分利用 Emscripten 的功能，从而让你能够将 C/C++ 代码在浏览器中运行。

为多个平台编写代码可能非常耗时。如果需要为每个平台完全重写一遍，那将更加耗时。如果你用 C++ 编写了一个应用程序，但想在浏览器中显示它，该怎么办？现在，有了 Emscripten 这个工具，这一切都成为可能。

Emscripten 是一个基于 LLVM 的项目，它将 C 和 C++ 编译成高度优化的 JavaScript（asm.js 格式）。简而言之：使用 C 和 C++，在浏览器中获得接近原生速度的性能。更棒的是，Emscripten 将桌面图形 API OpenGL 转换为 WebGL，这是该 API 的 Web 版本。

我之前写过一篇博文，说明了 Emscripten 是什么，以及它如何与我最喜欢的游戏开发工具：Unreal Engine 4 和 Unity 相关联。因此，我在这里不会详细介绍它的工作原理，而是想重点介绍如何创建自己的 Web 项目，充分利用 Emscripten 的功能，让你能够将 C/C++ 代码在浏览器中运行。

平台

我使用的是 Windows 10，但对于类 Unix 平台、OS X 和 Linux，过程是相同的。此时唯一需要进行的实际更改是输入代码到命令行/终端的方式。在 Windows 上，我只需输入 emcc。在类 Unix 环境中，你必须在命令前加上 ./，所以你的命令会是：./emcc。

安装过程

我最初曾考虑不写这篇教程，但在安装过程中遇到了许多问题，我认为这将对他人有所帮助。我查看了 Epic Games 推荐的从 UE4 导出项目的方法，他们建议使用 SDK Web 安装程序。这让我陷入了困境。我曾希望安装过程会很顺利，但在成功之前，我在让 Emscripten 在我的机器上正常工作方面花费了近两天时间。该团队在官网上提供了非常棒的入门指南，但如果你选择了错误的安装程序，可能会遇到一些麻烦。

我的第一个问题是我选择了 Web 安装程序。这不是你要找的安装程序。 相反，请使用SDK 离线安装程序，这样你就会一路顺畅，并且只需要几分钟时间。

Web 安装程序存在许多 bug，尤其是在你安装的各种 Visual Studio 版本之间。这是一个已知问题，但正在得到纠正。我认为这与 Emscripten 在后台进行的并行优化有关，我发现 Cmake 指向了我安装的最新版本 Visual Studio（2015 Community），而不是 Emscripten 所需的 VS 2010。

你可以在 Visual Studio 中使用 Emscripten，但我发现从 Emscripten CLI 进行构建更容易。如果你确实想使用 Visual Studio，说明在这里，尽管目前只支持 VS 2010 和 2013。

“Emscripten SDK 以一个易于安装的包提供了整个 Emscripten 工具链（Clang、Python、Node.js 和 Visual Studio 集成），并支持更新到更新的 SDK。”
–Emscripten 入门指南

入门

运行Emscripten 命令提示符即可开始。我通常按下 win + ems 即可找到它。

你将看到 CLI 界面，并且会从 Emscripten 的安装位置开始。

导航到你的emsdk 根目录。我通过更改目录到 emscripten\tag-1.34.1 来实现这一点，因为你可以看到上面图片中设置的 emscripten 路径是

EMSCRIPTEN = C:\Program Files\Emscripten\emscripten\tag-1.341

提示： 随时可以在 CLI 中输入 'explorer .' 来打开资源管理器文件夹，更好地可视化你正在查看的内容。对于包含几十个项目的文件夹，这通常比输入 'ls' 列出目录中的所有内容更容易。

运行 'emcc -v' 是你的“ sanity check”，以验证你正在运行的版本中的所有内容都正常工作。你应该会看到类似如下的内容

既然你已经可以将 C/C++ 代码编译成 JavaScript，让我们来运行第一个示例，直接来自 Emscripten 文档。我们以 hello_world.c 为例，将其转换为 JavaScript。C 代码如下所示

#include<stdio.h>
int main() {
   printf("hello, world!\n");
   return 0;
 }

我们将从 tests 文件夹运行它，该文件夹比当前目录低一级。要构建代码，请输入

emcc tests/hello_world.c

如果一切顺利，你的 CLI 应该会暂停片刻，然后返回到相同的位置。这里发生了什么？编译器并没有很详细地提供任何反馈，所以我们现在添加它，以便更好地理解后台发生的事情。

我们将 '-v' 参数添加到命令中，让编译器输出更详细的信息。

emcc tests/hello_world.c -v

这样就好多了

这只是将我们的应用程序编译成了 C，并在当前目录中创建了一个 a.out.js 文件。如果你更喜欢使用 C++，可以使用 'em++' 而不是 'emcc'。

这个 a.out.js 是关键，因为它包含了基于 asm.js 规范的 JavaScript 代码。如果我们用 node 执行它，你将在 CLI 中看到 'hello, world'。请输入此命令

node a.out.js

这很棒，但我希望在浏览器中看到它。

生成 HTML

首先，检查你的 Web 平台状态，了解支持 asm.js 的浏览器。实际上，我们可以使用 Emscripten 的 –o 参数生成几种不同类型的扩展。根据文档
-o <target>

目标文件名扩展定义了要生成的输出类型

<name> .js：JavaScript。

<name> .html：HTML + 独立的 JavaScript 文件（<name>.js）。拥有独立的 JavaScript 文件可以提高页面加载时间。

<name> .bc：LLVM 位码（默认）。

<name> .o：LLVM 位码（与 .bc 相同）。

在这种情况下，我们需要 HTML 才能在浏览器中查看。请输入此命令来指定一个 HTML 文档

Emcc tests/hello_world./c -o hello.html

我们告诉 Emscripten 使用 C 编译器在 tests 文件夹中查找 hello_world.c 文件，然后将其输出为 hello.html。在你位于 C:\Program Files \Emscripten\emscripten\tag-1.34.1 文件夹中，你应该会看到 hello.html。

用浏览器打开它，你就可以看到它作为一个网页了

但我们再进一步。我想从文件读取并提供一些内容。

从文件读取

由于浏览器在沙箱环境中运行 JavaScript，我们无法直接访问本地文件系统。为了解决这个问题，Emscripten 创建了一个模拟文件系统，以便我们可以使用libc stdio API 来访问编译后的 C/C++ 代码。诀窍在于，虚拟文件系统要求这些文件嵌入或预加载。

在教程的最后一部分，我们转向 hello_world_file.cpp 并从中读取文件，因为这将涵盖我想要讨论的几个部分，包括如何提供内容。

该文件的代码如下所示

#include <stdio.h>
 int main() {
   FILE *file = fopen("tests/hello_world_file.txt", "rb");
   if (!file) {
     printf("cannot open file\n");
     return 1;
   }
   while (!feof(file)) {
     char c = fgetc(file);
     if (c != EOF) {
       putchar(c);
     }
   }
   fclose (file);
   return 0;
 }

如果你有 Web 开发背景，并且不习惯使用强类型语言，你可能在想：“feof 是什么意思？” 这也让我陷入了困境，但这个 Stack Overflow 问题为我解开了不少困惑。

“现在我们来处理 EOF。EOF 是您从尝试的 I/O 操作中获得的响应。它表示您正在尝试读取或写入某些内容，但在执行此操作时，未能读取或写入任何数据，而是遇到了输入或输出的末尾。对于几乎所有的 I/O API 来说，无论是 C 标准库、C++ iostreams 还是其他库，都是如此。只要 I/O 操作成功，您就无法知道后续的、未来的操作是否会成功。您必须始终先尝试操作，然后对成功或失败做出响应。”

这将尝试从位于 tests/hello_world_file.txt 的文件中读取。要做到这一点，我们需要运行此命令

Emcc tests/hello_world_file.cpp -o hello.html –preload-file tests/hello_world_file.txt

现在再次尝试打开同一个 hello.html 文件，看看会发生什么。

在 FireFox 中，一切正常