如何在浏览器中通过WASM使用Clang生成LLVM IR

问题描述 #

我知道可以用clang -S -emit-llvm foo.c命令生成包含LLVM IR的foo.ll文件。目前看到两个WASM项目：llvm-wasm和cib，但它们主要是在浏览器中运行WASM程序。我的需求很简单：在浏览器里生成LLVM IR文本并展示，想借助Clang来实现。

我之前没自己构建过.wasm文件和相关npm模块，但用过imagemagick-wasm。现在有几个疑问：

1. Clang这类大型库的JS API，是类似ffmpeg.wasm的exec命令行接口，还是基于C API封装的？
2. 怎么通过JS API直接拿到LLVM IR文本，是不是必须操作内存文件系统？
3. 能不能复用llvm-wasm或cib这两个项目，还是得用Emscripten自己编译LLVM/Clang的WASM版本？

核心需求：如何把Clang或LLVM库编译成WASM，从而在浏览器中生成LLVM IR？

解答 #

针对你的疑问逐一说明 #

1. JS API形式
   Clang的WASM版本API通常有两种实现路径：

   • 一种是类似ffmpeg.wasm的命令行模拟接口：通过Emscripten的内存文件系统模拟本地文件操作，直接调用Clang的命令行参数执行编译，这种方式对熟悉Clang命令的人友好，学习成本低。
   • 另一种是直接封装C API：通过Emscripten导出Clang/LLVM的核心C函数（比如创建编译实例、设置编译选项、获取IR输出等），这种方式更灵活，但需要熟悉LLVM的C API细节。
     大部分现成的WASM版本会优先提供命令行模拟接口，因为实现起来更直接。

2. 获取LLVM IR文本的方式
   两种常见实现方式：

   • 内存文件系统操作：这是最通用的方案。用Emscripten模拟的FS模块，先把输入的C代码写入内存中的foo.c，执行clang -S -emit-llvm foo.c生成foo.ll，再通过FS.readFile('foo.ll', 'utf8')读取内容。逻辑和本地操作完全一致，不需要改太多代码。
   • 直接从API捕获输出：如果封装了LLVM C API，可以在编译过程中直接捕获IR的内存缓冲区，不需要写入文件。比如调用clang_getIRForModule这类函数，直接把内存中的IR数据转换成JS字符串。但这种方式需要对LLVM API有一定了解，实现复杂度更高。

3. 现有项目复用性

   • llvm-wasm：这个项目主要是把LLVM核心库编译成WASM，侧重在浏览器中运行LLVM pass或处理IR，不一定直接封装了Clang的编译流程。如果要用来生成IR，需要自己基于它的LLVM API封装编译逻辑，门槛较高。
   • cib (Clang in Browser)：从名字看更贴近需求，但如果它的核心功能是运行WASM而非生成IR，复用价值有限。可以先查它的文档，看是否支持输出LLVM IR；如果不支持，可能需要修改构建配置，添加-emit-llvm相关编译选项。
     总的来说，现有项目大概率无法直接满足需求，最可靠的方式是自己用Emscripten编译Clang/LLVM的WASM版本。

核心问题解决方案：编译Clang/LLVM到WASM #

以下是关键步骤（基于Emscripten）：

1. 准备环境
   安装Emscripten SDK，确保emcc命令可用。

2. 配置LLVM/Clang编译选项
   LLVM支持交叉编译到WASM，需要设置这些关键参数：

   • 用cmake配置时，指定目标为wasm32-unknown-emscripten
   • 开启BUILD_CLANG选项，确保编译Clang
   • 关闭不需要的LLVM组件（比如后端代码生成器，因为只需要生成IR，不需要编译到机器码），减少WASM体积，比如清空LLVM_TARGETS_TO_BUILD
   • 添加Emscripten特有的选项，比如-s EXPORTED_FUNCTIONS导出需要的函数，或-s FILESYSTEM=1启用内存文件系统

3. 编译过程
   简化的命令示例：

# 创建构建目录
mkdir llvm-wasm-build && cd llvm-wasm-build
# 配置cmake
emcmake cmake ../llvm-project/llvm \
  -DLLVM_ENABLE_PROJECTS=clang \
  -DCMAKE_BUILD_TYPE=MinSizeRel \
  -DLLVM_TARGETS_TO_BUILD="" \ # 关闭后端目标，缩小体积
  -DCLANG_ENABLE_STATIC_ANALYZER=OFF \
  -DCLANG_ENABLE_ARCMT=OFF \
  -DLLVM_ENABLE_ASSERTIONS=OFF
# 编译
emmake make -j$(nproc) clang

编译完成后会得到clang.wasm和对应的JS胶水文件。

4. 在浏览器中调用

   • 如果是命令行接口：加载生成的JS文件后，通过Module.callMain(['-S', '-emit-llvm', 'foo.c'])模拟命令行调用，再用FS.readFile读取生成的IR文件。
   • 如果是封装C API：编译时导出clang_createTranslationUnit、clang_getIRForTranslationUnit等函数，直接在JS中调用这些API生成IR，避免文件操作。

5. 体积优化
   Clang/LLVM本身体积很大，编译出来的WASM可能达几十MB。可以通过这些方式优化：

   • 只编译必要组件，去掉所有后端目标、关闭调试信息、使用MinSizeRel构建类型
   • 用Emscripten的--strip、--llvm-lto选项进行代码压缩
   • 拆分功能，只保留生成IR所需的最小Clang/LLVM子集

内容的提问来源于stack exchange，提问作者Lance Pollard