選單

002 安裝Rust和WebAssembly工具鏈和helloworld

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。