002 安裝Rust和WebAssembly工具鏈和helloworld

linghuyichong發表於2021-08-23
RustWeb

影片地址：www.bilibili.com/video/BV1eg411g7c...
相關原始碼：github.com/anonymousGiga/Rust-and-...

1、安裝Rust工具鏈，可以參考www.rust-lang.org/tools/install

為了很好的使用Rust和WebAssembly，我們需要Rust 1.3以上的穩定版。

2、安裝wasm-pack

curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

3、安裝cargo-generate

cargo install cargo-generate

4、安裝npm

npm install npm@latest -g

2.1重新寫hello world

之前我們有寫過一個簡單的使用webassembly的例子，今天我們繼續寫一個helloworld的例子。如果說之前的例子是腳踏車的話，那麼今天的例子就是一輛小汽車，要高階一點，下面我們就正式開始。

1、下載模板

cargo generate --git https://github.com/rustwasm/wasm-pack-template

2、編譯

wasm-pack build

3、將wasm放入網頁

npm init wasm-app www
cd www
npm install

開啟package.json，新增如下程式碼：

{
  // ...
  "dependencies": {                     // Add this three lines block!
    "wasm-game-of-life": "file:../pkg"
  },
  "devDependencies": {
    //...
  }
}

修改index.js如下：

//import * as wasm from "hello-wasm-pack";

import * as wasm from "wasm-game-of-life";
wasm.greet();

安裝：

npm install

4、啟動測試

npm run start

開啟瀏覽器輸入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目錄，使用如下命令顯示：

tree -l

輸出如下：

pkg/
├── package.json
├── README.md
├── wasm_game_of_life_bg.js
├── wasm_game_of_life_bg.wasm
├── wasm_game_of_life_bg.wasm.d.ts
├── wasm_game_of_life.d.ts
└── wasm_game_of_life.js
  • 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。

本作品採用《CC 協議》，轉載必須註明作者和本文連結
令狐一衝

相關文章