Emscripten 指南：概念與使用

什么是 Emscripten？

Emscripten 是一個開源的編譯器工具鏈，用于將 C/C++ 代碼編譯成高效的 WebAssembly（Wasm）和 JavaScript。它基于 LLVM 編譯器架構，允許開發者：

• ? 將現有的 C/C++ 應用移植到 Web 環境
• ? 在瀏覽器中運行高性能計算模塊
• ? 復用成熟的 C/C++ 庫到 Web 項目

核心功能

1. 代碼轉換
   將 C/C++ 源碼 → WebAssembly（.wasm） + JavaScript 膠水代碼
2. 兼容性支持
   模擬文件系統（MEMFS）、OpenGL → WebGL 轉換
3. 優化能力
   通過 Closure Compiler 壓縮代碼，優化執行效率

---

安裝 Emscripten

前置要求

• Python 3.7+
• Git
• CMake（推薦）
• 系統編譯工具鏈（如 gcc、clang）

安裝步驟

# 克隆倉庫
git clone https://github.com/emscripten-core/emsdk.git
# 進入目錄
cd emsdk
# 安裝最新版工具鏈
./emsdk install latest
# 激活環境變量
./emsdk activate latest
source ./emsdk_env.sh
# 驗證安裝
emcc --version

---

基礎使用教程

示例：編譯 C 程序到 WebAssembly

1. 創建 C 文件 (hello.c)

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

2. 使用 emcc 編譯

emcc hello.c -o hello.html

3. 生成文件

• hello.wasm：WebAssembly 二進制
• hello.js：JavaScript 加載器
• hello.html：可直接運行的網頁

運行結果

啟動本地服務器查看：

python3 -m http.server 8000

訪問 http://localhost:8000/hello.html

進階用法

編譯選項說明

參數	作用
-O3	最高級別優化
-s WASM=1	強制生成 Wasm（默認啟用）
-s SINGLE_FILE=1	將 Wasm 內聯為 Base64 編碼
--preload-file	打包資源文件

調用 JavaScript 函數

在 C 代碼中使用 EM_JS 宏：

#include <emscripten.h>
EM_JS(void, js_alert, (const char* msg), {alert(UTF8ToString(msg));
});
int main() {js_alert("Called from C!");return 0;
}

集成到 Web 項目

<!-- 在 HTML 中加載 -->
<script src="hello.js"></script>
<script>Module.onRuntimeInitialized = () => {// 調用 C 中的 main() 函數Module._main();};
</script>

---

常見問題解決

1. 文件系統訪問
   使用 Emscripten 的虛擬文件系統：

   FILE *file = fopen("/data.txt", "r");
   

   通過 --preload-file data.txt 打包文件
2. 內存泄漏檢測
   編譯時添加：

   emcc -gsource-map -s INITIAL_MEMORY=64MB ...
   

3. 調試方法
   • 瀏覽器開發者工具 → Wasm 調試
   • 編譯時添加 -g4 保留調試符號
   • 使用 emrun --browser debug 啟動

---