C++如何将项目编译成WebAssembly？Emscripten C++ to WASM教程【Web开发】

用Emscripten编译C++为WebAssembly需替换g++为em++，安装官方emsdk并配置环境变量，验证emcc/em++版本后即可编译单文件生成WASM及JS胶水代码。

用 Emscripten 把 C++ 项目编译成 WebAssembly 很直接，核心是把 g++ 换成 em++，并注意输出目标和 JS 胶水代码的配合。

安装并配置 Emscripten

Emscripten 是官方推荐的 C/C++ 到 WebAssembly 的工具链。别用 npm 安装的简化版（如 emscripten 包），它不完整。正确方式是：

• 从 emscripten.org 下载 SDK（推荐使用 emsdk）
• 运行 ./emsdk install latest 和 ./emsdk activate latest
• 执行 source ./emsdk_env.sh（Linux/macOS）或 emsdk_env.bat（Windows）把工具加入环境变量
• 验证：运行 emcc --version 和 em++ --version 确保正常

编译单个 C++ 文件为 WASM

最简场景：一个 main.cpp，含 int main()：

#include 
int main() {
    std::cout << "Hello from WebAssembly!\n";
    return 0;
}

运行以下命令：

em++ main.cpp -o hello.html --no-entry

• -o hello.html：生成 HTML + JS + WASM 三件套（也可用 .js 只输出 JS 胶水）
• --no-entry：避免自动生成 main() 入口调用（适合后续手动控制执行）
• 默认启用 -O2 优化；加 -g 可保留调试信息

生成的 hello.html 可直接用浏览器打开（需本地起服务，如 npx http-server，不能双击打开）。

处理依赖与 CMake 项目

已有 CMake 项目的，只需切换编译器：

• 设置 EMSCRIPTEN 环境变量指向 SDK 根目录（自动识别）

• 运行：
  emcmake cmake -B build -S . -DCMAKE_BUILD_TYPE=Release
cmake --build build
• emcmake 是封装脚本，会自动配置 CMAKE_CXX_COMPILER 为 em++，并传入必要 flags
• 第三方库（如 SDL2、GLM）建议用 conan 或 vcpkg 配合 Emscripten toolchain，或直接用 Emscripten 自带的 port（如 -s USE_SDL=2）

导出函数供 JavaScript 调用

默认 C++ 函数不会暴露给 JS。要用 EMSCRIPTEN_BINDINGS 或 C 风格导出：

extern "C" {
    int add(int a, int b) {
        return a + b;
    }
}

编译时加：
em++ math.cpp -o math.js -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall","cwrap"]'

• EXPORTED_FUNCTIONS 列出要导出的函数名（带下划线前缀）
• EXPORTED_RUNTIME_METHODS 启用 JS 辅助方法，如 ccall 可直接调用
• 在 HTML 中：
  

基本上就这些。Emscripten 编译流程和原生 g++ 接近，关键在环境、入口控制和 JS 交互设计。不复杂但容易忽略服务托管和符号导出细节。