# 1. 克隆 emsdk 仓库
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

# 2. 安装最新版本
./emsdk install latest
./emsdk activate latest

# 3. 配置环境变量（每开新终端需执行，或加入 shell 配置）
source ./emsdk_env.sh

# 4. 验证安装
emcc --version

# 在 ~/.bashrc 或 ~/.zshrc 中添加
source /path/to/emsdk/emsdk_env.sh > /dev/null 2>&1

// hello.c
#include <stdio.h>

int main() {
    printf("Hello, WebAssembly!\n");
    return 0;
}

# 编译为 Wasm
emcc hello.c -o hello.html

# 在浏览器中打开
# hello.html — 完整 HTML 页面
# hello.js    — JS 胶水代码
# hello.wasm  — Wasm 二进制

# 仅生成 .wasm + .js（无 HTML）
emcc hello.c -o hello.js

# 生成独立 Wasm（无 JS 胶水）
emcc hello.c -o hello.wasm -s STANDALONE_WASM

# Linux / macOS（一键安装脚本）
curl https://wasmtime.dev/install.sh -sSf | bash

# macOS (Homebrew)
brew install wasmtime

# 验证
wasmtime --version

# 运行一个简单的 .wasm 文件
wasmtime hello.wasm

# 传入命令行参数
wasmtime run --dir . hello.wasm -- arg1 arg2

# 预览 WASI 模块
echo '(module)' > empty.wat
wasmtime empty.wat

# wasmtime.toml
[module]
name = "my-module"
path = "target/wasm32-wasi/release/my_module.wasm"

[wasi]
args = ["arg1", "arg2"]
env = [["KEY", "VALUE"]]

# 安装 wasm-pack
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# 验证
wasm-pack --version

# 添加 wasm32-unknown-unknown 目标（浏览器）
rustup target add wasm32-unknown-unknown

# 添加 wasm32-wasi 目标（WASI）
rustup target add wasm32-wasi

# 使用 cargo-generate 模板
cargo install cargo-generate
cargo generate --git https://github.com/rustwasm/wasm-pack-template

# 或手动创建
mkdir my-wasm-lib && cd my-wasm-lib
cargo init --lib

# 构建（输出到 pkg/ 目录）
wasm-pack build

# 指定构建目标
wasm-pack build --target web      # 浏览器 ESM
wasm-pack build --target nodejs   # Node.js
wasm-pack build --target bundler  # Webpack/Vite 等
wasm-pack build --target no-modules  # 无模块系统

# 指定优化级别
wasm-pack build --release

# 使用 npm 安装
npm install -g assemblyscript

# 或在项目中安装
npm init wasm-app
cd wasm-app
npm install --save-dev assemblyscript

# 验证
npx asc --version

# 使用脚手架
npx create-assemblyscript my-project

# 手动创建
mkdir my-project && cd my-project
npm init -y
npm install --save-dev assemblyscript

// package.json
{
  "scripts": {
    "build": "asc assembly/index.ts --outFile build/module.wasm --optimize",
    "build:debug": "asc assembly/index.ts --outFile build/module.wasm --debug"
  }
}

// asconfig.json
{
  "extends": "assemblyscript/std/assembly.json",
  "entries": ["assembly/index.ts"],
  "options": {
    "optimizeLevel": 3,
    "shrinkLevel": 1,
    "noAssert": false
  }
}

// assembly/index.ts
export function add(a: i32, b: i32): i32 {
  return a + b;
}

export function fibonacci(n: i32): i32 {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

npx asc assembly/index.ts --outFile build/module.wasm --optimize

# 下载最新版本（以 wasi-sdk-24 为例）
export WASI_VERSION=24
export WASI_VERSION_FULL=${WASI_VERSION}.0
wget https://github.com/WebAssembly/wasi-sdk/releases/download/wasi-sdk-${WASI_VERSION}/wasi-sdk-${WASI_VERSION_FULL}-linux.tar.gz

# 解压
tar xvf wasi-sdk-${WASI_VERSION_FULL}-linux.tar.gz

# 设置环境变量
export WASI_SDK_PATH=$(pwd)/wasi-sdk-${WASI_VERSION_FULL}

# 验证
${WASI_SDK_PATH}/bin/clang --version

# 编译 C 程序
${WASI_SDK_PATH}/bin/clang \
  --target=wasm32-wasi \
  --sysroot=${WASI_SDK_PATH}/share/wasi-sysroot \
  -o hello.wasm \
  hello.c

# 使用 wasmtime 运行
wasmtime hello.wasm

# 安装 Wasmer（另一个流行的 Wasm 运行时）
curl https://get.wasmer.io -sSfL | sh

# 运行 Wasm 模块
wasmer run hello.wasm

# 使用 Wasmer 包管理器
wasmer run python/python  # 直接运行 Wasm 版 Python

# 提供 wabt 工具集：wat2wasm, wasm2wat, wasm-interp 等
# Ubuntu/Debian
sudo apt install wabt

# macOS
brew install wabt

# 验证
wat2wasm --version

# WebAssembly 优化工具集
# Ubuntu/Debian
sudo apt install binaryen

# macOS
brew install binaryen

# 优化 Wasm 文件
wasm-opt -O3 input.wasm -o output.wasm

# Rust 生态的 Wasm 工具集
cargo install wasm-tools

# 转换 WAT ↔ Wasm
wasm-tools parse hello.wat -o hello.wasm
wasm-tools print hello.wasm -o hello.wat

# 验证 Wasm 文件
wasm-tools validate hello.wasm

# 使用 Chrome DevTools 调试 Wasm
# 1. 打开 chrome://flags/#enable-webassembly-debug
# 2. 在 Sources 面板中可以直接查看 WAT 源码并设断点

# 使用 Wasmtime 调试
wasmtime -g hello.wasm   # 启用 DWARF 调试信息

# 使用 wasm-objdump 查看 Wasm 结构
wasm-objdump -x hello.wasm  # 查看段信息

#!/bin/bash
echo "=== WebAssembly 工具链检查 ==="

check() {
  if command -v $1 &> /dev/null; then
    echo "✅ $1: $(${@:2})"
  else
    echo "❌ $1: 未安装"
  fi
}

check emcc --version | head -1
check wasm-pack --version
check wasmtime --version
check wasmer --version
check wat2wasm --version
check wasm-opt --version
check wasm-tools --version
check rustc --version
check node --version
check npm --version