開發(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倉(cāng)庫(kù)的 guide/src/examples/index.md 是官方示例子章節(jié)的入口文檔它并不講解某個(gè)單一 API而是系統(tǒng)性地介紹wasm-bindgen、js-sys、web-sys三大 crate 的示例集合示例在哪里、如何運(yùn)行、如何構(gòu)建、以及如何將 Rust WebAssembly 產(chǎn)物部署到不同環(huán)境。本文以該文檔為主體骨架結(jié)合倉(cāng)庫(kù)中 examples 目錄下的真實(shí)工程源碼、package.json、webpack 配置與 部署指南把「閱讀示例 → 本地運(yùn)行 → 理解構(gòu)建目標(biāo) → 選擇部署方案」這條完整鏈路講透幫助讀者快速上手并動(dòng)手修改自己的示例工程。示例集合是什么三大 crate 的實(shí)戰(zhàn)用法倉(cāng)庫(kù)中wasm-bindgen、js-sys和web-sys三個(gè) crate 分別承擔(dān)不同職責(zé)wasm-bindgen提供#[wasm_bindgen]屬性宏、wasm_bindgen::prelude、JsValue等核心設(shè)施負(fù)責(zé) Rust 類型與 JavaScript 類型之間的橋接js-sys封裝 ECMAScript 標(biāo)準(zhǔn)庫(kù)對(duì)象Array、Promise、Date、JSON等web-sys封裝 Web APIDOM、Canvas、WebGL、WebRTC、Web Audio 等倉(cāng)庫(kù) web-sys/src 下即包含上千個(gè)按 WebIDL 生成的綁定模塊。官方文檔明確指出每個(gè)示例都應(yīng)附帶關(guān)于它具體做了什么的信息這正是 examples 目錄中每個(gè)子工程自帶 README 的原因——例如 hello_world 示例的 README 會(huì)說明構(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ù)十個(gè)場(chǎng)景從「最小 Hello World」到「并行光線追蹤raytrace-parallel」「顯式資源管理explicit-resource-management」「JSPIjspi、jspi-fetch-streams、jspi-opfs」均有覆蓋是學(xué)習(xí) wasm-bindgen 各能力點(diǎn)的第一手資料。閱讀示例的前置條件官方文檔明確要求讀者具備三樣工具的知識(shí)若還不熟悉應(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 的基本工作流。如果你對(duì)這些還不熟悉文檔建議先完成Game of Life 教程Rust 官方 RustWasm 書籍或wasm-pack 官方教程再回來閱讀示例會(huì)順暢得多。獲取與運(yùn)行所有示例所有示例的源碼都托管在倉(cāng)庫(kù)中可以下載到本地直接運(yùn)行。文檔給出的建議是測(cè)試之前優(yōu)先切換到最新的 release 版本以保證示例與已發(fā)布 API 的兼容性。注意倉(cāng)庫(kù)是只讀鏡像本文只介紹查看、運(yùn)行與配置方式不涉及修改倉(cāng)庫(kù)內(nèi)容?；?Webpack 的示例pnpm run serve大多數(shù)示例都配置了 Webpack wasm-pack可以用pnpm run serve一鍵構(gòu)建并啟動(dòng)開發(fā)服務(wù)器。這一工作流在倉(cāng)庫(kù)中有明確支撐根級(jí) 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自動(dòng)執(zhí)行 wasm-pack 構(gòu)建輸出到../dist/hello_world并開啟experiments.asyncWebAssembly。如果你在倉(cāng)庫(kù)根目錄執(zhí)行對(duì)應(yīng)命令即pnpm run serve由 examples/package.json 中serve腳本serve提供靜態(tài)服務(wù)。注意hello_world 的 README 寫成npm run serve是因?yàn)樗缙谑褂?npm當(dāng)前倉(cāng)庫(kù)統(tǒng)一采用 pnpm workspace實(shí)際執(zhí)行應(yīng)以倉(cāng)庫(kù)根級(jí)腳本為準(zhǔn)。不使用 Webpack 的示例獨(dú)立構(gòu)建說明或build.sh文檔特別提到不是所有示例都用 Webpack。不使用 Webpack 的示例會(huì)自帶構(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í)例化方式。此外根級(jí) examples/cp-dist.mjs 是一個(gè)極簡(jiǎn)的跨平臺(tái)拷貝工具被 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í)原生實(shí)現(xiàn)這一模型因此默認(rèn)輸出必須借助某種打包器才能消費(fèi)。這個(gè)默認(rèn)選擇是為了順應(yīng) JS 生態(tài)的趨勢(shì)——雖然當(dāng)下只有 bundler 支持把 Wasm 文件當(dāng)作原生 ES 模塊但未來各工具大概率都會(huì)支持。目前文檔確認(rèn)的、與wasm-bindgen完全兼容的打包器是webpack。倉(cāng)庫(kù)絕大多數(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)及其適用場(chǎng)景--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)是編譯時(shí)向wasm-bindgen傳--target web輸出可原生包含在網(wǎng)頁(yè)中無需任何后處理以 ES 模塊形式引入web模式無法使用 NPM 依賴需要查閱 瀏覽器支持要求因?yàn)椴粫?huì)有任何 polyfill 可用。對(duì)應(yīng)的完整示例見 without-a-bundler 示例構(gòu)建命令為wasm-pack build --target web之后用靜態(tài)服務(wù)器托管即可。--target no-modules與web類似同樣要求手動(dòng)初始化 wasm、可直接嵌入網(wǎng)頁(yè)且無需后處理但不使用 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 文件也有對(duì)應(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)名可能變更。倉(cāng)庫(kù)中 nodejs_and_deno 示例 的build:nodejs與build:experimental-nodejs-module腳本正是這兩種目標(biāo)的具體落地方案此外還有面向 Node.js 多線程的 nodejs-threads 示例提供test.js與test-esm.mjs兩類測(cè)試。--target denoDeno 部署對(duì) 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類型聲明。倉(cāng)庫(kù) nodejs_and_deno 示例 的build:deno腳本wasm-pack build --target deno與之對(duì)應(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以及各平臺(tái)各自實(shí)現(xiàn)的 Wasm 加載路徑。部署指南同時(shí)注明source phase imports 目前僅 ESBuild 和 Node.js 24 支持使用時(shí)務(wù)必確認(rèn)運(yùn)行環(huán)境版本滿足要求。發(fā)布到 NPM交給wasm-pack如果你想把編譯好的 WebAssembly 發(fā)布到 NPM文檔推薦的工具是wasm-pack其配套書籍提供了詳細(xì)流程。實(shí)戰(zhàn)路線圖從示例到自己的工程綜合文檔與倉(cāng)庫(kù)內(nèi)容一條完整的上手路徑是挑選示例在 examples 目錄中按場(chǎng)景挑選hello_world入門、dom/canvas/webgl看 Web API、nodejs_and_deno看多目標(biāo)部署、raytrace-parallel看 Worker 并行、jspi看 JSPI 新特性閱讀示例 README每個(gè)示例自帶說明如 hello_world 的 README先看它的構(gòu)建命令與訪問方式構(gòu)建運(yùn)行Webpack 類示例在倉(cāng)庫(kù)根目錄執(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)境對(duì)照源碼修改例如把 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 倉(cāng)庫(kù)中 examp開發(fā)工具基于 wasm-bindgen 與 web-sys 打造 Canvas 畫板Paint 示例全解析基于 wasm bindgen 與 web sys 打造 Canvas 畫板Paint 示例全解析 Paint 是 wasm bindgen 倉(cāng)庫(kù)中一個(gè)典型的開發(fā)工具在瀏覽器中為 Rust 代碼計(jì)時(shí)wasm-bindgen 的 web-sys performance.now 實(shí)戰(zhàn)示例在瀏覽器中為 Rust 代碼計(jì)時(shí)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)勢(shì)讓你的Minecraft服務(wù)器更高效創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考