開發(fā)工具【免費(fèi)下載鏈接】wasm-bindgenFacilitating high-level interactions between Wasm modules and JavaScript項(xiàng)目地址https://gitcode.com/gh_mirrors/wa/wasm-bindgen點(diǎn)擊查看免費(fèi)下載wasm-bindgen倉庫的 guide/src/examples/index.md 是官方示例子章節(jié)的入口文檔它并不講解某個單一 API而是系統(tǒng)性地介紹wasm-bindgen、js-sys、web-sys三大 crate 的示例集合示例在哪里、如何運(yùn)行、如何構(gòu)建、以及如何將 Rust WebAssembly 產(chǎn)物部署到不同環(huán)境。本文以該文檔為主體骨架結(jié)合倉庫中 examples 目錄下的真實(shí)工程源碼、package.json、webpack 配置與 部署指南把「閱讀示例 → 本地運(yùn)行 → 理解構(gòu)建目標(biāo) → 選擇部署方案」這條完整鏈路講透幫助讀者快速上手并動手修改自己的示例工程。示例集合是什么三大 crate 的實(shí)戰(zhàn)用法倉庫中wasm-bindgen、js-sys和web-sys三個 crate 分別承擔(dān)不同職責(zé)wasm-bindgen提供#[wasm_bindgen]屬性宏、wasm_bindgen::prelude、JsValue等核心設(shè)施負(fù)責(zé) Rust 類型與 JavaScript 類型之間的橋接js-sys封裝 ECMAScript 標(biāo)準(zhǔn)庫對象Array、Promise、Date、JSON等web-sys封裝 Web APIDOM、Canvas、WebGL、WebRTC、Web Audio 等倉庫 web-sys/src 下即包含上千個按 WebIDL 生成的綁定模塊。官方文檔明確指出每個示例都應(yīng)附帶關(guān)于它具體做了什么的信息這正是 examples 目錄中每個子工程自帶 README 的原因——例如 hello_world 示例的 README 會說明構(gòu)建命令和訪問地址。示例覆蓋了add、canvas、char、closures、console_log、dom、fetch、julia_set、paint、performance、todomvc、webaudio、webgl、webrtc_datachannel、websockets、webxr、nodejs-threads、wasm-in-wasm、without-a-bundler等數(shù)十個場景從「最小 Hello World」到「并行光線追蹤raytrace-parallel」「顯式資源管理explicit-resource-management」「JSPIjspi、jspi-fetch-streams、jspi-opfs」均有覆蓋是學(xué)習(xí) wasm-bindgen 各能力點(diǎn)的第一手資料。閱讀示例的前置條件官方文檔明確要求讀者具備三樣工具的知識若還不熟悉應(yīng)先閱讀入門教程wasm-bindgen了解#[wasm_bindgen]宏的導(dǎo)入extern C與導(dǎo)出pub fn機(jī)制wasm-pack了解如何把 Rust 工程打包成 Wasm JS 膠水代碼Rust WebAssembly 項(xiàng)目的構(gòu)建方式了解wasm32-unknown-unknown目標(biāo)與 Cargo 的基本工作流。如果你對這些還不熟悉文檔建議先完成Game of Life 教程Rust 官方 RustWasm 書籍或wasm-pack 官方教程再回來閱讀示例會順暢得多。獲取與運(yùn)行所有示例所有示例的源碼都托管在倉庫中可以下載到本地直接運(yùn)行。文檔給出的建議是測試之前優(yōu)先切換到最新的 release 版本以保證示例與已發(fā)布 API 的兼容性。注意倉庫是只讀鏡像本文只介紹查看、運(yùn)行與配置方式不涉及修改倉庫內(nèi)容?；?Webpack 的示例pnpm run serve大多數(shù)示例都配置了 Webpack wasm-pack可以用pnpm run serve一鍵構(gòu)建并啟動開發(fā)服務(wù)器。這一工作流在倉庫中有明確支撐根級 examples/package.json 定義了buildpnpm run -r build、serveserve、pretest構(gòu)建 wasm-bindgen CLI等腳本examples/pnpm-workspace.yaml 聲明packages: - *即所有子目錄都是 pnpm workspace 成員并把wasm-tool/wasm-pack-plugin、webpack、webpack-cli、webpack-dev-server等依賴統(tǒng)一鎖定在catalog中。以 hello_world 示例 為例其 README 明確寫著$ npm run serve然后瀏覽器訪問http://localhost:8080即可看到運(yùn)行效果。其工程結(jié)構(gòu)正是標(biāo)準(zhǔn)「Webpack wasm-pack」模式examples/hello_world/src/lib.rs用#[wasm_bindgen]導(dǎo)入alert并導(dǎo)出greet函數(shù)examples/hello_world/index.jsimport { greet } from ./pkg后調(diào)用examples/hello_world/webpack.config.js通過WasmPackPlugin指定crateDirectory: __dirname自動執(zhí)行 wasm-pack 構(gòu)建輸出到../dist/hello_world并開啟experiments.asyncWebAssembly。如果你在倉庫根目錄執(zhí)行對應(yīng)命令即pnpm run serve由 examples/package.json 中serve腳本serve提供靜態(tài)服務(wù)。注意hello_world 的 README 寫成npm run serve是因?yàn)樗缙谑褂?npm當(dāng)前倉庫統(tǒng)一采用 pnpm workspace實(shí)際執(zhí)行應(yīng)以倉庫根級腳本為準(zhǔn)。不使用 Webpack 的示例獨(dú)立構(gòu)建說明或build.sh文檔特別提到不是所有示例都用 Webpack。不使用 Webpack 的示例會自帶構(gòu)建說明或build.sh腳本例如examples/without-a-bundlerREADME 給出wasm-pack build --target web的構(gòu)建命令然后用任意靜態(tài)服務(wù)器http、python2 -m SimpleHTTPServer、python3 -m http.server托管目錄后訪問index.htmlexamples/nodejs_and_denopackage.json 中分別提供build:nodejs--target nodejs、build:deno--target deno、build:experimental-nodejs-module、build:esm-integration等多套構(gòu)建腳本examples/synchronous-instantiation展示不使用 ES 模塊的同步實(shí)例化方式。此外根級 examples/cp-dist.mjs 是一個極簡的跨平臺拷貝工具被 without-a-bundler 的 postbuild 等腳本用來把index.html復(fù)制進(jìn)dist目錄這也是非 Webpack 示例常用的發(fā)布手段之一。深入理解為什么大多數(shù)示例用 Webpack但并非必須文檔明確指出大多數(shù)示例目前使用 Webpack 來組裝最終產(chǎn)物但這并非強(qiáng)制要求。原因在于wasm-bindgen的默認(rèn)輸出即--target bundler把 Wasm 模塊視為原生 ES 模塊來生成而目前沒有任何 JS 運(yùn)行時原生實(shí)現(xiàn)這一模型因此默認(rèn)輸出必須借助某種打包器才能消費(fèi)。這個默認(rèn)選擇是為了順應(yīng) JS 生態(tài)的趨勢——雖然當(dāng)下只有 bundler 支持把 Wasm 文件當(dāng)作原生 ES 模塊但未來各工具大概率都會支持。目前文檔確認(rèn)的、與wasm-bindgen完全兼容的打包器是webpack。倉庫絕大多數(shù)示例都使用 webpack并配以wasm-tool/wasm-pack-plugin見 examples/pnpm-workspace.yaml 的 catalog 版本鎖定詳細(xì)的 webpack 配置可以直接參考 hello_world 的 webpack.config.jsconst WasmPackPlugin require(wasm-tool/wasm-pack-plugin); module.exports { entry: ./index.js, output: { path: path.resolve(__dirname, .., dist, hello_world), filename: index.js, }, plugins: [ new HtmlWebpackPlugin(), new WasmPackPlugin({ crateDirectory: __dirname }), ], mode: development, experiments: { asyncWebAssembly: true } };部署方案總覽--target決定一切示例的運(yùn)行方式與部署方式高度耦合而部署方法的核心就是wasm-bindgen的--target標(biāo)志。下表完整列出了 部署指南 中定義的七種目標(biāo)及其適用場景--target值說明bundler適合在 Webpack 等打包器中加載默認(rèn)值web可在瀏覽器中直接加載ES 模塊nodejs通過require作為 Node.js CommonJS 模塊加載deno通過 Deno 模塊導(dǎo)入加載no-modules類似web但更古老不使用 ES 模塊experimental-nodejs-module通過import作為 Node.js ESM 模塊加載module使用新的 source phase imports 語法獲取編譯后的 Wasm 模塊--target bundler默認(rèn)輸出必須配打包器默認(rèn)輸出假設(shè)「Wasm 模塊本身是原生 ES 模塊」但該模型尚未在任何 JS 實(shí)現(xiàn)中原生支持所以必須使用打包器消費(fèi)。目前唯一被確認(rèn)完全兼容的打包器是 webpackexamples 中絕大多數(shù)示例如 hello_world都采用此方案。--target web與--target no-modules無打包器瀏覽器直跑如果你不使用打包器但仍在瀏覽器中運(yùn)行使用--target web其要點(diǎn)是編譯時向wasm-bindgen傳--target web輸出可原生包含在網(wǎng)頁中無需任何后處理以 ES 模塊形式引入web模式無法使用 NPM 依賴需要查閱 瀏覽器支持要求因?yàn)椴粫腥魏?polyfill 可用。對應(yīng)的完整示例見 without-a-bundler 示例構(gòu)建命令為wasm-pack build --target web之后用靜態(tài)服務(wù)器托管即可。--target no-modules與web類似同樣要求手動初始化 wasm、可直接嵌入網(wǎng)頁且無需后處理但不使用 ES 模塊屬于較老的目標(biāo)示例同樣參考 without-a-bundler。--target nodejs與--target experimental-nodejs-moduleNode.js 部署--target nodejs將 Wasm 部署進(jìn) Node.js可作為原生模塊的替代。與「無打包器」方案一樣無需任何后處理生成的 JS shim 可以像普通 Node 模塊一樣被require——甚至*_bg的 Wasm 文件也有對應(yīng)的 JS shim可以直接require。要求 Node.js 8 及以上具備 WebAssembly 支持。--target experimental-nodejs-module以 ES 模塊方式部署進(jìn) Node.js生成的 shim 可像普通模塊一樣import。要求 Node.js 12 及以上具備 WebAssembly 與模塊支持。當(dāng)前仍處于實(shí)驗(yàn)階段正式穩(wěn)定前目標(biāo)名可能變更。倉庫中 nodejs_and_deno 示例 的build:nodejs與build:experimental-nodejs-module腳本正是這兩種目標(biāo)的具體落地方案此外還有面向 Node.js 多線程的 nodejs-threads 示例提供test.js與test-esm.mjs兩類測試。--target denoDeno 部署對 Deno 部署使用--target deno然后在 Deno 中導(dǎo)入模塊// deno-types./out/crate_name.d.ts import { yourFunction } from ./out/crate_name.js;deno-types注釋讓 Deno 使用生成的.d.ts類型聲明。倉庫 nodejs_and_deno 示例 的build:deno腳本wasm-pack build --target deno與之對應(yīng)其test.js通過deno run --allow-read test.js deno驗(yàn)證 Deno 下的運(yùn)行。--target modulesource phase imports跨工具鏈 ES 模塊目標(biāo)這是較新的目標(biāo)默認(rèn)使用source phase imports 語法獲取未實(shí)例化的 WebAssembly 模塊。source phase imports 允許借助 Wasm ESM Integration導(dǎo)入「編譯后的 Wasm 模塊而非其實(shí)例」import source wasmModule from ./module.wasm; // 示例性用法 const instance new WebAssembly.Instance(wasmModule, imports); export function foo () { instance.doFoo(); }該方案取代了此前需要compileStreaming以及各平臺各自實(shí)現(xiàn)的 Wasm 加載路徑。部署指南同時注明source phase imports 目前僅 ESBuild 和 Node.js 24 支持使用時務(wù)必確認(rèn)運(yùn)行環(huán)境版本滿足要求。發(fā)布到 NPM交給wasm-pack如果你想把編譯好的 WebAssembly 發(fā)布到 NPM文檔推薦的工具是wasm-pack其配套書籍提供了詳細(xì)流程。實(shí)戰(zhàn)路線圖從示例到自己的工程綜合文檔與倉庫內(nèi)容一條完整的上手路徑是挑選示例在 examples 目錄中按場景挑選hello_world入門、dom/canvas/webgl看 Web API、nodejs_and_deno看多目標(biāo)部署、raytrace-parallel看 Worker 并行、jspi看 JSPI 新特性閱讀示例 README每個示例自帶說明如 hello_world 的 README先看它的構(gòu)建命令與訪問方式構(gòu)建運(yùn)行Webpack 類示例在倉庫根目錄執(zhí)行pnpm run serve非 Webpack 類示例按各自 README 或 package.json 腳本如wasm-pack build --target web構(gòu)建再用靜態(tài)服務(wù)器托管理解輸出目標(biāo)結(jié)合 部署指南 的--target表格判斷產(chǎn)物適合 bundler / 瀏覽器 / Node.js / Deno 中的哪種環(huán)境對照源碼修改例如把 hello_world/src/lib.rs 的greet換成自己的函數(shù)或把 without-a-bundler 的--target web換成--target nodejs觀察膠水代碼差異——這正是理解 wasm-bindgen 橋接機(jī)制最直接的方式。延伸閱讀官方示例文檔入口guide/src/examples/index.md全部示例源碼examples/部署與集成指南guide/src/reference/deployment.md瀏覽器兼容性要求guide/src/reference/browser-support.md贊分享開發(fā)工具【免費(fèi)下載鏈接】wasm-bindgenFacilitating high-level interactions between Wasm modules and JavaScript項(xiàng)目地址https://gitcode.com/gh_mirrors/wa/wasm-bindgen點(diǎn)擊查看免費(fèi)下載相關(guān)推薦在 Wasm 里跑 Wasm基于 wasm-bindgen 與 js-sys 實(shí)現(xiàn)模塊嵌套實(shí)例化在 Wasm 里跑 Wasm基于 wasm bindgen 與 js sys 實(shí)現(xiàn)模塊嵌套實(shí)例化 導(dǎo)讀 本文講解 wasm bindgen 倉庫中 examp開發(fā)工具基于 wasm-bindgen 與 web-sys 打造 Canvas 畫板Paint 示例全解析基于 wasm bindgen 與 web sys 打造 Canvas 畫板Paint 示例全解析 Paint 是 wasm bindgen 倉庫中一個典型的開發(fā)工具在瀏覽器中為 Rust 代碼計時wasm-bindgen 的 web-sys performance.now 實(shí)戰(zhàn)示例在瀏覽器中為 Rust 代碼計時wasm bindgen 的 web sys performance.now 實(shí)戰(zhàn)示例 導(dǎo)讀 本文以 wasm bindgen開發(fā)工具上一篇PyTorch-FCN數(shù)據(jù)集完全攻略VOC、NYUD、SIFT Flow實(shí)戰(zhàn)教程下一篇為什么選擇lazymc6大優(yōu)勢讓你的Minecraft服務(wù)器更高效創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考