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