46 lines
1.4 KiB
HTML
46 lines
1.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Wasmer Clang in Browser</title>
|
|
</head>
|
|
<body>
|
|
<h1>浏览器里直接编译 C → WASM</h1>
|
|
<textarea id="code" rows="10" cols="80">#include <stdio.h>
|
|
int main() {
|
|
printf("Hello from Clang in WASM!\n");
|
|
return 0;
|
|
}</textarea>
|
|
<br>
|
|
<button onclick="compileC()">编译并运行</button>
|
|
<pre id="output"></pre>
|
|
|
|
<script type="module">
|
|
import { init, Wasmer, Directory } from "https://unpkg.com/@wasmer/sdk@latest/dist/index.mjs";
|
|
|
|
async function compileC() {
|
|
await init(); // 加载 Wasmer SDK
|
|
const clang = await Wasmer.fromRegistry("clang/clang");
|
|
const project = new Directory();
|
|
|
|
const source = document.getElementById("code").value;
|
|
await project.writeFile("hello.c", source);
|
|
|
|
// 调用 Clang 编译成 WASM
|
|
const compileResult = await clang.entrypoint.run({
|
|
args: ["hello.c", "-o", "hello.wasm"],
|
|
mount: { "/project": project },
|
|
});
|
|
await compileResult.wait();
|
|
|
|
// 读取生成的 WASM 并运行
|
|
const wasmBytes = await project.readFile("hello.wasm");
|
|
const instance = await Wasmer.fromFile(wasmBytes);
|
|
const runResult = await instance.entrypoint.run();
|
|
const output = await runResult.wait();
|
|
|
|
document.getElementById("output").textContent = output.stdout || "编译成功！";
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |