1 環境安裝
1、安裝Rust工具鏈,可以參考https://www。rust-lang。org/tools/install
為了很好的使用Rust和WebAssembly,我們需要Rust 1。3以上的穩定版。
2、安裝wasm-pack
3、安裝cargo-generate
4、安裝npm
2 再寫hello world
2。1重新寫hello world
1、下載模板
2、編譯
3、將wasm放入網頁
開啟package。json,新增如下程式碼:
修改index。js如下:
安裝:
4、啟動測試
開啟瀏覽器輸入http://localhost:8080
2。2 專案解釋
上一節我們重新寫了我們的helloworld,這一節我們就來解釋一下專案中對應的檔案。
2。2。1 Rust相關部分
此部分內容,之前學過Rust的小夥伴,會發現很熟悉。
wasm-game-of-life/Cargo。toml
該檔案中主要是Cargo相關的配置,編譯的依賴等。
wasm-game-of-life/src/lib。rs
具體的程式碼,可以發現和我們前一節的例子中的程式碼差不多。
wasm-game-of-life/src/utils。rs
提供公用的工具,便於我們更方便的編譯Rust到WebAssembly。
2。2。2 編譯後的包
編譯後生成Pkg目錄,使用如下命令顯示:
輸出如下:
wasm_game_of_life_bg。wasm
。wasm檔案是由Rust編譯器生成的WebAssembly位元組檔案,裡面就包含greet函式。
wasm_game_of_life。js
js檔案是由wasm bindgen生成的,用於將DOM和JavaScript函式匯入Rust,並將一個API暴露給JavaScript的WebAssembly函式。
*。d。ts
*。d。ts包含對JavaScript的相關的宣告。
package。json
package。json檔案包含有關生成的JavaScript和WebAssembly包的元資料。npm和JavaScript捆綁包使用它來確定包、包名、版本和其它內容之間的依賴關係。它幫助我們與JavaScript工具整合,並允許我們將包釋出到npm。