WebAssembly入门基础教程

之前介绍了 WebAssembly 基础知识，如果有兴趣可以点击查阅。本文进行 WebAssembly 实战，介绍在浏览器如何使用 WebAssembly，如何把 C++ 编译成 WASM 模块。

Emscripten

Emscripten是一种开源 LLVM 编译器，可以将 C 和 C++ 代码编译为 asm.js 和 WebAssembly 字节码。通过以下步骤，安装Emscripten。

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

如果命令行等太久，可以直接通过github下载zip包

接下来进入安装SDK tools，如果是windows，./emsdk 替换为 emsdk.bat，source ./emsdk_env.sh 替换为 emsdk_env.bat

./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

windows安装用这个

./emsdk.bat install latest
./emsdk.bat activate latest
emsdk_env.bat

安装的时间比较长，先出去溜达一圈再回来看看。。。🤡 如果 PowerShell 提示下面错误，重新执行下命令 ./emsdk.bat activate latest --permanent 即可

emcc : 无法将“emcc”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。

开始编码

经过漫长的等待下载完成后，我们来编写一个如何级别的 C 代码，创建一个 hello.c 文件，输入以下代码。

#include <stdio.h>
int main() {
  printf("Hello WebAssembly!");
  return 0;
}

接下来通过 emcc 编译，输出到 html 。

emcc ./hello.c -s WASM=1 -s NO_EXIT_RUNTIME=0 -o hello.html

可以看到输出了 hello.html，hello.js，hello.wasm 等文件，启动 http 服务，通过ip访问 http://127.0.0.1/hello.html，可以看到控制台输出了 Hello WebAssembly 结果。

我们也通过 nodejs 直接运行 hello.js 文件，结果如下：

一个简单的 WebAssembly 入门例子已经完成了。