Skip to main content
Version: 0.18.0

專案設定

Rust#

首先,你的電腦裡必須要安裝 Rust。請參考官網的教學安裝 Rust 與 cargo 這個套件管理工具。

Wasm 編譯工具#

我們需要額外的工具來增加 WebAssembly 與 JavaScript 的互操作性。此外,根據你選擇的工具,他們可以產生當你的應用程式運行在瀏覽器時, .wasm 檔案所需要的 JavaScript 程式碼,減少佈署與打包的麻煩。

wasm-pack#

一套 CLI 工具,由 Rust/Wasm Working Group 為了編譯並打包 WebAssembly 所開發的。最好與 Webpack 的 wasm-pack-plugin 搭配使用。

開始使用 wasm-pack

wasm-bindgen#

同時是套件,也是 CLI 工具,並由 Rust / Wasm Working Group 開發。他是一套較底層的工具(通常是 wasm-pack 內部使用),用以增加 JavaScript 與 WebAssembly 的互操作性。我們不建議直接使用 wasm-bindgen,因為你需要多寫一些 JavaScript 的程式碼來引入你的 WebAssembly 二進位檔案。雖然如此,你仍然可以使用 wasm-bindgen,更多資訊請參考 wasm-bindgen guide

開始使用 wasm-bindgen

cargo-web#

wasm-packwasm-bindgen 出來之前,這是我們的首選工具。在安裝與執行方面,他的速度仍是最快的,我們推薦你安裝他去執行我們的那些還沒有使用 wasm-pack 的範例。

開始使用 cargo-web

比較#

wasm-packwasm-bindgencargo-web
專案狀態持續由 Rust / Wasm Working Group 維護中持續由 Rust / Wasm Working Group 維護中GitHub Repo 已經六個月以上沒有動靜了
開發體驗還可以,需要搭配 Webpack太過底層,你需要寫一腳本來優化開發體驗可以動!另外無需外部套件支援
本地端的伺服器 (Local Server)搭配 webpack 插件不支援支援
當檔案被更動,自動重編譯搭配 webpack 插件不支援支援
無頭瀏覽器測試SupportedSupportedSupported
支援的目標程式碼
  • wasm32-unknown-unknown
  • wasm32-unknown-unknown
  • wasm32-unknown-unknown
  • wasm32-unknown-emscripten
  • asmjs-unknown-emscripten
web-sys相容相容不相容
stdweb相容相容相容
範例用法新手模板Yew 範例的編譯腳本Yew 範例的編譯腳本