Zwitterion WebAssembly在浏览器里写Rust、C、C的完整教程【免费下载链接】zwitterionA web dev server that lets you import anything*项目地址: https://gitcode.com/gh_mirrors/zw/zwitterionZwitterion是一个「什么都能 import」的 Web 开发服务器你的 Rust、C、C 源码会被服务端自动编译成WebAssemblyWasm在浏览器里直接运行同时它还兼容 JavaScript、TypeScript、JSON、JSX、TSX、AssemblyScript 和 WAT。本教程带你用最少的配置在浏览器里跑通 Rust、C 和 C 三种语言。为什么选 ZwitterionZwitterion 的理念是回到 Web 开发的「上古黄金时代」⚡不是打包器bundler它就是一个静态文件服务器只是在响应文件前做了一次「内存编译」——请求一个.rs文件它先用rustc编译出 Wasm再包成一段标准 ES Module 返回给浏览器零配置导入import xxx from ./add.rs就能用和导入.js文件体验完全一致SPA 开箱即用未命中的路由默认返回index.html单页应用路由零成本各语言支持一览语言扩展名需要的本地工具链Rust.rsRustrustcC.cEmscriptenemccC.cpp/.ccEmscriptenemccAssemblyScript.as无需内置编译WAT / Wasm.wat/.wasm无需JS / TS / JSON / JSX / TSX—无需一键安装 Zwitterion 开发服务器在你的项目目录中安装本地或全局均可npm install zwitterion # 或者全局安装 npm install -g zwitterion然后运行zwitterion浏览器打开提示的地址即可。也可以从仓库克隆后直接体验完整示例git clone https://gitcode.com/gh_mirrors/zw/zwitterion有两个小前提项目约定入口文件必须是index.html引用模块的script标签必须加typemoduleZwitterion 依赖浏览器的原生 ES Module 能力script typemodule srcapp.ts/script浏览器里写 Rust 的最快方法前提是本地已安装 Rust 工具链。Zwitterion 的 Rust 插件会在服务端执行rustc --targetwasm32-unknown-unknown把.rs文件编译为 Wasm具体逻辑见 rust.ts。新建add.rs注意#[no_mangle]用于保留导出函数名#![no_main] #[no_mangle] pub fn add(x: i32, y: i32) - i32 { return x y; }在 JS/TS 里导入入口模块的默认导出是一个返回 Promise 的初始化函数await后即可调用导出的函数import rustModuleInit from ./add.rs; const rustModule await rustModuleInit(); console.log(rustModule.add(5, 5)); // 10用 Emscripten 在浏览器里运行 C 与 CC / C 依赖 Emscripten 工具链。插件内部执行emcc file -Os -s WASM1 -s SIDE_MODULE1生成 Wasm见 c.tsC 文件直接复用同一套编译流程见 c.ts。add.cint add(int x, int y) { return x y; }add.cpp跨语言导出需要extern C包裹extern C { int add(int x, int y) { return x y; } }导入方式与 Rust 完全相同import cModuleInit from ./add.c; import cppModuleInit from ./add.cpp; console.log((await cModuleInit()).add(5, 5)); // 10 console.log((await cppModuleInit()).add(5, 5)); // 10一个页面同时导入 7 种语言项目自带的示例工程展示了「混合编程」的完整玩法同一个页面同时导入 TypeScript、AssemblyScript、Rust、C、C、WAT 和 Wasm 七种实现调用同一个add函数。完整代码见 examples/basic/index.js各语言源码分别在同目录的 index.rs、index.c、index.cpp 中。运行后控制台输出类似TypeScript add 0 AssemblyScript add 1 Rust add 2 C add 3 CPP add 4 Wat add 5 Wasm add 6这就是 Zwitterion 的核心卖点一套 import 语法横跨七种语言全部在浏览器里执行。Zwitterion 生产环境静态构建与部署生产部署推荐生成静态构建而不是长期运行开发服务器。执行zwitterion --build-static所有相关文件会被编译处理并复制到dist目录可整体上传至 CDN 或任意静态托管服务。 注意托管方需要为.ts、.as、.rs、.wasm、.wat等文件配置application/javascript的 MIME 类型。常见问题 FAQ为什么导入后要awaitWasm 需要异步实例化WebAssembly.instantiate所以 Zwitterion 把每个原生模块的默认导出设计成初始化函数await后返回的是导出对象。编译报错会怎样以 Rust 为例编译失败时 Zwitterion 会把rustc的 stderr 包装成一段抛出异常的 JS 返回浏览器控制台能直接看到错误信息无需额外配置。没有 Rust / Emscripten 环境能用吗Rust、C、C 目前需要本地工具链自动安装工具链是官方 roadmap 中的功能。AssemblyScript、WAT、Wasm、TS/JS 则开箱即用无需任何额外依赖。它打包吗不打包、不做 tree shaking这是有意为之的简化设计。官方计划在后续版本中通过 HTTP2 等方式优化性能追求极致体积的项目可自行评估。小结Zwitterion WebAssembly 的组合让「在浏览器里写 Rust、C、C」变成了一条import语句的事。装上它写好index.html剩下的交给工具链——把时间花在业务逻辑上吧。【免费下载链接】zwitterionA web dev server that lets you import anything*项目地址: https://gitcode.com/gh_mirrors/zw/zwitterion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Zwitterion + WebAssembly：在浏览器里写Rust、C、C++的完整教程
Zwitterion WebAssembly在浏览器里写Rust、C、C的完整教程【免费下载链接】zwitterionA web dev server that lets you import anything*项目地址: https://gitcode.com/gh_mirrors/zw/zwitterionZwitterion是一个「什么都能 import」的 Web 开发服务器你的 Rust、C、C 源码会被服务端自动编译成WebAssemblyWasm在浏览器里直接运行同时它还兼容 JavaScript、TypeScript、JSON、JSX、TSX、AssemblyScript 和 WAT。本教程带你用最少的配置在浏览器里跑通 Rust、C 和 C 三种语言。为什么选 ZwitterionZwitterion 的理念是回到 Web 开发的「上古黄金时代」⚡不是打包器bundler它就是一个静态文件服务器只是在响应文件前做了一次「内存编译」——请求一个.rs文件它先用rustc编译出 Wasm再包成一段标准 ES Module 返回给浏览器零配置导入import xxx from ./add.rs就能用和导入.js文件体验完全一致SPA 开箱即用未命中的路由默认返回index.html单页应用路由零成本各语言支持一览语言扩展名需要的本地工具链Rust.rsRustrustcC.cEmscriptenemccC.cpp/.ccEmscriptenemccAssemblyScript.as无需内置编译WAT / Wasm.wat/.wasm无需JS / TS / JSON / JSX / TSX—无需一键安装 Zwitterion 开发服务器在你的项目目录中安装本地或全局均可npm install zwitterion # 或者全局安装 npm install -g zwitterion然后运行zwitterion浏览器打开提示的地址即可。也可以从仓库克隆后直接体验完整示例git clone https://gitcode.com/gh_mirrors/zw/zwitterion有两个小前提项目约定入口文件必须是index.html引用模块的script标签必须加typemoduleZwitterion 依赖浏览器的原生 ES Module 能力script typemodule srcapp.ts/script浏览器里写 Rust 的最快方法前提是本地已安装 Rust 工具链。Zwitterion 的 Rust 插件会在服务端执行rustc --targetwasm32-unknown-unknown把.rs文件编译为 Wasm具体逻辑见 rust.ts。新建add.rs注意#[no_mangle]用于保留导出函数名#![no_main] #[no_mangle] pub fn add(x: i32, y: i32) - i32 { return x y; }在 JS/TS 里导入入口模块的默认导出是一个返回 Promise 的初始化函数await后即可调用导出的函数import rustModuleInit from ./add.rs; const rustModule await rustModuleInit(); console.log(rustModule.add(5, 5)); // 10用 Emscripten 在浏览器里运行 C 与 CC / C 依赖 Emscripten 工具链。插件内部执行emcc file -Os -s WASM1 -s SIDE_MODULE1生成 Wasm见 c.tsC 文件直接复用同一套编译流程见 c.ts。add.cint add(int x, int y) { return x y; }add.cpp跨语言导出需要extern C包裹extern C { int add(int x, int y) { return x y; } }导入方式与 Rust 完全相同import cModuleInit from ./add.c; import cppModuleInit from ./add.cpp; console.log((await cModuleInit()).add(5, 5)); // 10 console.log((await cppModuleInit()).add(5, 5)); // 10一个页面同时导入 7 种语言项目自带的示例工程展示了「混合编程」的完整玩法同一个页面同时导入 TypeScript、AssemblyScript、Rust、C、C、WAT 和 Wasm 七种实现调用同一个add函数。完整代码见 examples/basic/index.js各语言源码分别在同目录的 index.rs、index.c、index.cpp 中。运行后控制台输出类似TypeScript add 0 AssemblyScript add 1 Rust add 2 C add 3 CPP add 4 Wat add 5 Wasm add 6这就是 Zwitterion 的核心卖点一套 import 语法横跨七种语言全部在浏览器里执行。Zwitterion 生产环境静态构建与部署生产部署推荐生成静态构建而不是长期运行开发服务器。执行zwitterion --build-static所有相关文件会被编译处理并复制到dist目录可整体上传至 CDN 或任意静态托管服务。 注意托管方需要为.ts、.as、.rs、.wasm、.wat等文件配置application/javascript的 MIME 类型。常见问题 FAQ为什么导入后要awaitWasm 需要异步实例化WebAssembly.instantiate所以 Zwitterion 把每个原生模块的默认导出设计成初始化函数await后返回的是导出对象。编译报错会怎样以 Rust 为例编译失败时 Zwitterion 会把rustc的 stderr 包装成一段抛出异常的 JS 返回浏览器控制台能直接看到错误信息无需额外配置。没有 Rust / Emscripten 环境能用吗Rust、C、C 目前需要本地工具链自动安装工具链是官方 roadmap 中的功能。AssemblyScript、WAT、Wasm、TS/JS 则开箱即用无需任何额外依赖。它打包吗不打包、不做 tree shaking这是有意为之的简化设计。官方计划在后续版本中通过 HTTP2 等方式优化性能追求极致体积的项目可自行评估。小结Zwitterion WebAssembly 的组合让「在浏览器里写 Rust、C、C」变成了一条import语句的事。装上它写好index.html剩下的交给工具链——把时间花在业务逻辑上吧。【免费下载链接】zwitterionA web dev server that lets you import anything*项目地址: https://gitcode.com/gh_mirrors/zw/zwitterion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考