开发工具【免费下载链接】wasm-bindgenFacilitating high-level interactions between Wasm modules and JavaScript项目地址https://gitcode.com/gh_mirrors/wa/wasm-bindgen点击查看免费下载本文以 wasm-bindgen 仓库的 console_log 示例核心源码、Cargo.toml、package.json、webpack.config.js为主体系统讲解在 Rust 编译为 WebAssembly 后如何向浏览器控制台输出日志从手写#[wasm_bindgen]绑定console.log到用macro_rules!实现println!风格的日志宏再到直接使用web-sys提供的现成 API。读完本文你将掌握三种方案的完整写法、各自的适用场景以及底层js_namespace/js_name属性与web-sys重载机制的工作原理。运行方式进入示例目录后执行npm run serve浏览器访问 http://localhost:8080 即可看到日志输出示例已通过#[wasm_bindgen(start)]在模块加载时自动运行src/lib.rs。示例的整体结构一个入口三种日志方案console_log示例的核心逻辑非常紧凑入口函数被标记为#[wasm_bindgen(start)]意味着 Wasm 模块实例化完成后会自动执行无需从 JavaScript 侧手动调用src/lib.rsuse wasm_bindgen::prelude::*; #[wasm_bindgen(start)] fn run() { bare_bones(); using_a_macro(); using_web_sys(); }三个函数分别演示三种思路函数方案说明bare_bones()手写extern C绑定console.log不依赖任何额外 crate但需要自己保证注解正确using_a_macro()macro_rules!封装成console_log!宏类似println!的格式化日志弥补println!在 Wasm 目标上不可用的缺陷using_web_sys()直接使用web-sys的console模块官方 Web API 绑定支持多参数重载与任意JsValue这三种方案的演进逻辑在源码注释中交代得很清楚先“手动写绑定”再“用宏提升开发体验”最后“发现 web-sys 早就帮你做好了”。下文逐一展开。方案一手写#[wasm_bindgen]绑定 console.log在不引入任何额外 crate 的前提下可以通过extern C块把 JavaScript 函数直接声明为 Rust 可调用函数src/lib.rs#[wasm_bindgen] extern C { // 用 js_namespace 绑定 console.log(..)而不是裸的 log(..) #[wasm_bindgen(js_namespace console)] fn log(s: str); // console.log 是高度多态的可以用多个签名绑定同一个 JS 函数 // 此时必须用 js_name 保证始终调用 JS 中的 log #[wasm_bindgen(js_namespace console, js_name log)] fn log_u32(a: u32); // 多参数同样可行 #[wasm_bindgen(js_namespace console, js_name log)] fn log_many(a: str, b: str); } fn bare_bones() { log(Hello from Rust!); log_u32(42); log_many(Logging, many values!); }三个关键点值得展开js_namespace console指定被调用的 JS 名字位于哪个命名空间下。没有它生成的代码会调用裸的log(...)加上后生成的是console.log(...)。该属性的完整语义在 js_namespace 属性文档中有详细说明它可以作用于任意导入函数或类型还可以接受字符串数组表示嵌套命名空间例如#[wasm_bindgen(js_namespace [window, document])] fn write(...)会调用window.document.write。js_namespace可以写在单个 item 上也可以整块提升到extern C外层但两者不能同时出现。js_name logRust 侧的函数名可以自由命名如log_u32、log_many通过js_name把它们都映射回 JS 侧的同一个console.log。这正是“一个 JS 函数、多个 Rust 签名”的实现基础。多态绑定console.log接受任意类型与任意数量的参数因此示例用str、u32、两个str三种签名分别声明编译后分别对应console.log的不同调用形态。方案二用 macro_rules! 实现 println! 风格的日志宏第二个函数using_a_macro()演示了宏封装src/lib.rsmacro_rules! console_log { // 复用了 bare_bones 里导入的 log 函数 ($($t:tt)*) (log(format_args!($($t)*).to_string())) } fn using_a_macro() { console_log!(Hello {}!, world); console_log!(Lets print some numbers...); console_log!(1 3 {}, 1 3); }宏的原理是把任意 token 序列交给format_args!完成格式化支持{}占位符、表达式求值等println!的语法再.to_string()成str传给方案一导入的log函数。为什么需要这样一个宏源码注释给出了明确原因println!在 Wasm 目标上并不真正可用——标准库当前会把输出“吞掉”因此想要println!式的调试体验就得自己造一个类似的宏。这个宏恰好复用了方案一里导入的log说明两种方案是层层递进、可组合的关系。方案三直接用 web-sys 的 console 模块第三种方案最省事web-syscrate 已经把console的所有方法都绑定好了src/lib.rsfn using_web_sys() { use web_sys::console; console::log_1(Hello using web-sys.into()); let js: JsValue 4.into(); console::log_2(Logging arbitrary values looks like.into(), js); }这里用到了web-sys的按参数个数重载约定log_1接收 1 个参数log_2接收 2 个参数。查看web-sys的生成源码可以看到完整的重载族gen_console.rspub fn log_0(); pub fn log_1(data_1: ::wasm_bindgen::JsValue); pub fn log_2(data_1: ::wasm_bindgen::JsValue, data_2: ::wasm_bindgen::JsValue); pub fn log_3(/* ... */); // ... 一直到 log_7这些函数在生成的extern C块中同样由#[wasm_bindgen(js_namespace console, js_name log)]标注gen_console.rs与方案一的手写方式底层机制完全一致只是由 webidl 代码生成器替你写好了。需要特别注意的是web-sys的所有 API 都按 feature 开关编译。console方法必须显式启用consolefeature示例的 Cargo.toml 中即为[dependencies] wasm-bindgen { path ../../ } web-sys { path ../../crates/web-sys, features [console] }之所以需要 feature 开关是因为web-sys生成的 Web API 绑定体量巨大仓库中 crates/web-sys/src 下有上千个.rs文件按需编译才能控制体积与编译时间。参数类型转换str / 数字如何变成 JsValue方案三中的.into()值得单独解释log_1、log_2的参数类型是JsValue所以传入的strHello using web-sys和数字4) 都要先转换成JsValue。Rust 侧的str在转换后是 JS 字符串数字4变成 JS Number日志输出效果与直接调用console.log(..., 4)一致。这种转换能力来自wasm-bindgen的IntoJsValue实现体系——基础类型、str、String、数值类型、bool等都实现了到JsValue的转换相关实现可查阅 convert/impls.rs。这也解释了为什么方案一里可以直接传str/u32#[wasm_bindgen]会在 ABI 层面自动完成 Rust 类型与 JS 值之间的翻译。工程配置Cargo.toml 与 webpack 打包示例的工程配置同样值得一提Cargo.tomlexamples/console_log/Cargo.toml[lib] crate-type [cdylib] [dependencies] wasm-bindgen { path ../../ } web-sys { path ../../crates/web-sys, features [console] }crate-type [cdylib]是 wasm-bindgen 项目的标准配置告诉编译器生成可供 Web 加载的动态库形态 Wasm 产物wasm-bindgen与web-sys均以仓库内相对路径引用这是本仓库示例目录的通用做法。webpack 配置webpack.config.jsconst WasmPackPlugin require(wasm-tool/wasm-pack-plugin); module.exports { entry: ./index.js, output: { path: path.resolve(__dirname, .., dist, console_log), filename: index.js, }, plugins: [ new HtmlWebpackPlugin(), new WasmPackPlugin({ crateDirectory: __dirname }), ], mode: development, experiments: { asyncWebAssembly: true } };核心机制WasmPackPlugin在 webpack 构建时自动调用wasm-pack把当前目录crateDirectory: __dirname即console_log的 Rust crate编译成pkg/目录下的 Wasm 产物experiments.asyncWebAssembly: true启用 webpack 5 的异步 WebAssembly 支持让import(./pkg)按需异步加载 Wasm 模块入口 index.js 极为精简——import(./pkg).catch(console.error)加载成功与否都交给控制台日志来体现加载失败打印console.error加载成功则由 Rust 侧run()输出三条日志与示例主题完美呼应。构建与运行示例 README 给出的运行方式只有一条命令README.md$ npm run serve对应 package.json 中的脚本serve: webpack serve构建脚本为build: webpack。执行后访问 http://localhost:8080打开浏览器开发者工具的控制台即可看到日志输出。由于#[wasm_bindgen(start)]入口在模块加载时自动运行无需任何额外交互。运行前需要确保环境具备Rust 工具链含wasm32-unknown-unknown目标与wasm-pack、Node.js 与 npm/pnpm。依赖wasm-tool/wasm-pack-plugin、webpack、webpack-dev-server等通过仓库根目录的 pnpm workspace 统一管理版本pnpm-workspace.yaml在示例目录执行npm install或pnpm install即可安装。三种方案的取舍与典型应用场景结合示例本身与web-sys的实现可以给出如下选型建议方案优点局限适用场景手写extern C绑定零依赖、完全可控需手写js_namespace/js_name签名与 JS 侧一致性全靠自己保证只用到一两个 JS 函数的小项目、学习 wasm-bindgen 绑定原理console_log!宏提供println!式格式化语法调试体验好底层仍依赖手写的log绑定无类型重载需要在 Wasm 里频繁打印格式化调试信息web-sys的console覆盖全部console.*方法、重载完备、官方维护需要额外依赖并开启consolefeature编译体积略增生产项目、需要console::time/assert/warn等更多 API 的场景从源码结构看web-sys的console模块并不止log一族——gen_console.rs 中同样包含assert、count、debug、error、info、time、warn等全套 console API如assert_with_condition_and_data一族且同样遵循按参数个数与类型拆分的重载命名规则。因此一旦项目引入了web-sys建议直接使用方案三并配合console_log!这类宏获得格式化语法二者互补。小结console_log示例虽然短小却完整覆盖了 wasm-bindgen 调用 JS 函数的三种典型姿势手写绑定js_namespacejs_name、macro_rules!宏封装、以及直接复用web-sys的官方绑定按参数个数的重载族 feature 开关。理解这个示例也就理解了 wasm-bindgen 一切 JS 导入绑定的底层骨架。想继续深入可以对照阅读 js_namespace 属性文档、web-sys 使用指南以及同目录下的 hello_world 示例。赞分享开发工具【免费下载链接】wasm-bindgenFacilitating high-level interactions between Wasm modules and JavaScript项目地址https://gitcode.com/gh_mirrors/wa/wasm-bindgen点击查看免费下载相关推荐wasm-bindgen 实战从 console.log 手动绑定到 println! 风格日志宏的完整指南wasm bindgen 实战从 console.log 手动绑定到 println! 风格日志宏的完整指南 本指南围绕 wasm bindgen 官方示例开发工具wasm-bindgen 官方示例全览基于 wasm-bindgen、js-sys 与 web-sys 的实战入门指南wasm bindgen 官方示例全览基于 wasm bindgen 、 js sys 与 web sys 的实战入门指南 wasm bindgen 仓库的开发工具wasm-bindgen 实战用 web-sys 实现 requestAnimationFrame 循环wasm bindgen 实战用 web sys 实现 requestAnimationFrame 循环 requestAnimationFrame 是浏览器开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考