在文章WebAssembly 开发入门 3：使用 C 语言开发​中，使用 C 语言进行 WebAssembly 开发，需要在控制台中使用 emsdk_env.bat 激活开发环境，然后使用 emcc 命令将 C 源文件编译为 WebAssembly 的模块 (.js 和 .wasm)。如果项目中有很多源文件和其他依赖库，使用 emcc 编译项目就会非常麻烦。

CMake 通常用来管理 C/C++ 项目，也可以用于使用 C/C++ 语言开发 WebAssembly 模块的管理。下面就来看一下在 VS Code 中如何使用 CMake 来编译 WebAssembly 模块。

安装好最新版的 VS Code、CMake，Ninja 软件，VS Code 中需要安装 "CMake Tools" 和 "C/C++" 扩展。Visual Studio 的 MSVC 编译器也需要安装。

打开 VS Code，新建一个 CMake 项目，在项目文件夹中新建配置文件 .vscode/settings.json，内容如下：

{
    "cmake.configureSettings": {
        "CMAKE_TOOLCHAIN_FILE": "${env:EMSDK}/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake"
    },
    "cmake.generator": "Ninja"
}

配置项 cmake.configureSettings 告诉 CMake 插件使用 emsdk 的 cmake 设置，包括激活 emsdk 环境变量以及将编译命令设置为 emcc 等等。环境变量 EMSDK 是 emsdk 的安装目录。cmake.generator 需要设置为 Ninja 生成器，因为 emscripten 不支持 Windows 系统中默认的 Visual Studio 生成器。

CMake 项目配置文件 CMakeLists.txt 的内容如下：

cmake_minimum_required(VERSION 3.10.0)
project(mathmodule VERSION 0.1.0 LANGUAGES C)

# 添加可执行文件
add_executable(${PROJECT_NAME} mathmodule.c)

# 设置 emcc 编译参数
set_target_properties(${PROJECT_NAME} PROPERTIES LINK_FLAGS "-O3 \
    -s EXPORTED_RUNTIME_METHODS=['HEAPF32'] \
    -s EXPORTED_FUNCTIONS=['_malloc','_free'] \   
    -s EXPORT_NAME='MathModule' \
    -s MODULARIZE=1")

开发 WebAssembly 的 CMakeLists.txt 配置文件跟一般的 C/C++ 项目的配置文件差异不大，就是多了一个 set_target_properties 用于设置 emcc 的编译参数 LINK_FLAGS。编译参数的说明可以参考WebAssembly 开发入门 3：使用 C 语言开发​。

C 语言源代码文件 mathmodule.c 内容为：

#include "emscripten.h"

// 导出函数，使其在 JavaScript 中可见
EMSCRIPTEN_KEEPALIVE int add(int a, int b) {
    return a + b;
}

// ...

直接点击 VS Code 左下角的 "Build" 就可以编译项目了，编译完成之后在 build 文件夹中会多出两个 WebAssembly 模块文件: mathmodule.js 和 mathmodule.wasm。

#WebAssembly#​ #Wasm#​ #CMake#​ #Emscripten#​ #vscode#​ #Ninja#​ #C#​ #emcc#​ #emsdk#​

（完）