跳至正文

WebAssembly笔记(3)-编译和运行HelloWorld

本文演示把一个C/C++代码编译成WebAssembly格式文件,并在浏览器上运行。以 MacOS 12.3.1为例,步骤如下:

一 前置条件

  • Git。Mac系统默认已经安装;
  • CMake。Mac中使用 brew install cmake 安装;
  • 系统编译工具。Mac中安装 XCode 即可;
  • Python。安装 Python 2.7.x 或 Python 3.x 都可以,我的是 Python 3.8.9;

安装完成后,确认以下命令可以使用。

git --version
cmake --version
python3 --version

二 安装 Emscripten

通过 Emscripten SDK 来自动构建 Emscripten,命令如下。

git clone https://github.com/juj/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest

安装完成后,将环境变量配置到当前命令行窗口下。

source ./emsdk_env.sh

确认以下命令可以使用。

emcc -v

三 编译并运行HelloWorld

创建一个 hello.c 文件,内容如下。

#include <stdio.h>

int main() {
  printf("Hello WASM\n");
  return 0;
}

使用以下命令编译它。

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

编译后将会生成以下3个文件。

  • hello.wasm。WASM格式的二进制文件;
  • hello.js。用来加载WASM的胶水JS代码;
  • hello.html。可查看运行结果的网页文件;

如果使用 emcc 命令时,不带 -s WASM=1 参数,则将会编译成 asm.js。输出文件加上 .html 后缀,将会自动生成 HTML 页面。

然后使用 emrun 命令创建一个 web server 来展示网页。

emrun --no_browser --port 8080 .

最后在浏览器中打开 http://localhost:8080/hello.html ,就能看到 Hello WASM 了,说明 WebAssembly 程序编译并运行成功了。

整个流程如下图所示:

发表回复

您的电子邮箱地址不会被公开。