Back
Clang & Wasm 教學

環境安裝與設定指南

本課程的開發環境將使用 Clang、WASM(WebAssembly)、WASI SDK，並透過 Wasmer 來運行 WebAssembly 應用。請按照以下步驟安裝與配置環境。

1. 安裝 C 語言開發環境(Clang + MinGW)

目標：安裝 Clang 編譯器，使學生能夠在 Windows 上編譯 C 語言程式碼。

安裝步驟

  1. 訪問 LLVM MinGW 下載頁面，選擇適合的版本下載。

    • 本課程範例版本：llvm-mingw-20250114-ucrt-x86_64.zip

  2. 解壓縮至指定目錄(建議)：

    C:\clang_dev_tool\llvm-mingw-20250114-ucrt-x86_64

  3. 設定環境變數：

    • 在 Windows 搜尋 「環境變數」，開啟 「編輯系統環境變數」。
    • 在「系統變數」中找到 Path，點擊「編輯」，新增：
      C:\clang_dev_tool\llvm-mingw-20250114-ucrt-x86_64\bin

  4. 驗證安裝：

    • 開啟 PowerShell 或 cmd，輸入：
      clang --version
    • 若成功安裝，應該會顯示 Clang 版本資訊。

2. 安裝 WebAssembly 開發環境(Emscripten)

目標：安裝 Emscripten (emcc)，讓 C 程式碼能夠編譯成跨平台的 WebAssembly (WASM)。

安裝步驟

  1. 訪問 Emscripten SDK (emsdk) 下載頁面，下載最新版。

  2. 解壓縮至：

    C:\clang_dev_tool\emsdk-main

  3. 開啟 PowerShell，進入 Emscripten 目錄：

    cd C:\clang_dev_tool\emsdk-main

  4. 依序執行以下命令：

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

  5. 根據 activate 指令的輸出，設定環境變數：

    • 在「系統變數」中找到 Path，點擊「編輯」，新增：
      • C:\clang_dev_tool\emsdk-main emsdk
      • C:\clang_dev_tool\emsdk-main\node\20.18.0_64bit\bin nodejs
      • C:\clang_dev_tool\emsdk-main\upstream\emscripten emcc
      • C:\clang_dev_tool\emsdk-main\upstream\bin clang

  6. 驗證安裝：

    emcc -v
    • 若成功，會顯示 Emscripten 版本資訊。

3. 下載 wasi-sdk 靜態函式庫 並解壓縮到指定目錄

目標：安裝 wasi-sdk 靜態函式庫與標頭檔(include)。

安裝 wasi-sdk 靜態函式庫

  1. 訪問 wasi-sdk，並下載libclang_rt.builtins-wasm32-wasi-25.0.tar.gz

  2. 解壓縮，並且將 libclang_rt.builtins-wasm32.a 重新命名為 libclang_rt.builtins.a

  3. 將libclang_rt.builtins.a 移動到C:\clang_dev_tool\emsdk-main\upstream\lib\clang\21\lib\wasm32-unknown-wasi。注意: (lib\wasm32-unknown-wasi 這個目錄需要自己新增)

安裝 wasi-sdk 標頭檔(include)

  1. 訪問 wasi-sdk，並下載wasi-sysroot-25.0.tar.gz

  2. 解壓縮至：

    C:\clang_dev_tool\

4. 安裝 Wasmer(WebAssembly 執行環境)

Wasmer 是一個高效能的 WebAssembly(Wasm)執行環境，支援：

  • ✅ WASI(適用於 wasm32-wasi)
  • ✅ Emscripten(適用於 wasm32-unknown-emscripten)
  • ✅ JIT & AOT(可將 .wasm 轉為 .exe)

方法 1：使用 Winget 安裝(推薦 ✅)

Windows 11 內建 Winget，直接執行：

winget install Wasmer.Wasmer

安裝完成後，確認 Wasmer 是否成功安裝：

wasmer --version

如果正確安裝，會顯示類似：

wasmer 4.2.3

方法 2：使用官方安裝腳本

如果 winget 無法安裝，你可以使用官方提供的腳本：

iwr https://get.wasmer.io -useb | iex

這將自動下載並安裝 Wasmer，然後你可以測試：

wasmer --version

🎯 總結

本節課的環境安裝包含：

  1. Clang + MinGW (C 語言編譯器)
  2. Emscripten (emcc) (C → WebAssembly 編譯工具)
  3. wasi sdk 靜態函式庫 (WASI 靜態函式庫)
  4. Wasmer (WebAssembly 執行環境)

✅ 快速檢查所有環境是否成功安裝

clang --version
emcc -v
wasi-sdk-clang --version
wasmer --version

如果以上指令都能正確執行，表示你的開發環境已經準備就緒！🚀

補充內容

解壓縮 .tar.gz 檔案

tar -xvzf file.tar.gz

參數說明：

  • -x：解壓縮（extract）。
  • -v：顯示解壓縮過程（verbose，可省略）。
  • -z：處理 gzip 壓縮格式。
  • -f：指定檔案名稱。

指定解壓縮目標資料夾

tar -xvzf file.tar.gz -C /path/to/directory

這樣 .tar.gz 內容會解壓縮到 /path/to/directory 內。

僅查看 .tar.gz 內的檔案

tar -tzf file.tar.gz

這樣可以先確認檔案內容，不會真的解壓縮。

解壓縮 .tar（未壓縮的 tar 封裝檔）

如果你的檔案是 .tar 而不是 .tar.gz，則使用：

tar -xvf file.tar

這時候不需要 -z，因為沒有 gzip 壓縮。

這樣你就可以順利解壓縮 .tar.gz 檔案了！🎯

SNPQ © 2025