這是 wasm-pack未發布文件,已發布的文件可在 Rust 和 WebAssembly 的主要文件網站 上找到。這裡記錄的功能可能在 wasm-pack 的已發布版本中無法使用。

從 npm 執行程式碼

本教學的這一部分將協助你建立一個 Webpack JavaScript 專案,它將在瀏覽器中執行你的 WebAssembly 程式碼。

建立 JavaScript 專案

為了建立一個可以使用我們新套件的專案,我們將使用一個名為 create-wasm-app 的 npm 範本。要在一個與你的 Rust 專案不同的目錄中使用它,請執行以下指令

npm init wasm-app my-new-wasm-app

你可以選擇一個不同於 my-new-wasm-app 的專案名稱。該工具將建立一個具有該名稱的目錄。

如果我們查看該目錄,我們將看到以下內容

  • .gitignore:忽略 node_modules
  • LICENSE-APACHELICENSE-MIT:大多數 Rust 專案都以這種方式授權,因此這些檔案已包含在內
  • README.md:你正在閱讀的檔案!
  • index.html:一個包含 webpack 捆綁包的基本 html 文件
  • index.js:範例 js 檔案,其中包含一個註釋,顯示如何匯入和使用 wasm 套件
  • package.jsonpackage-lock.json
  • webpack.config.js:使用 webpack 捆綁你的 js 的設定檔

新增你的 npm 套件

建立的專案在你的 package.json 中包含一個範例 WebAssembly 套件 hello-wasm-pack。進入 package.json 檔案,新增你的套件,並從 "dependencies" 區段中移除 hello-wasm-pack 依賴項。

現在,打開 index.js 檔案。將第一行中的 hello-wasm-pack 替換為你的套件名稱

import * as wasm from "<your package name>";

wasm.greet();

執行專案

在我們執行專案之前,我們需要確保安裝了依賴項

npm install

我們現在應該可以執行我們的專案了!要執行我們的專案,我們將執行

npm start

然後在網路瀏覽器中導航到 https://127.0.0.1:8080,你應該會看到一個顯示「Hello World!」的警告框。

如果你成功了,恭喜你已成功將你的第一個 wasm 程式碼上傳到 npm 並正確使用它!