執行程式碼

Rust Webpack 範本專為使用 Rust 生成的 WebAssembly 和 Webpack 建立 monorepo 風格的 Web 應用程式而設計，無需將您的 wasm 發佈到 NPM。本教學的這一部分將說明如何建置一個 Webpack JavaScript 專案，該專案將在瀏覽器中執行您的 WebAssembly 程式碼。

搭建 JavaScript 專案

為了產生新的 Rust Webpack 專案，我們使用了 rust-webpack npm 範本。

npm init rust-webpack your-package-name

將使用您提供的名稱建立一個新的專案資料夾。

如果我們查看專案，我們將看到以下內容

• .gitignore：忽略 node_modules
• LICENSE-APACHE 和 LICENSE-MIT：大多數 Rust 專案都以這種方式獲得許可，因此這些檔案已包含在內
• README.md：您現在正在閱讀的檔案！
• index.html：包含 webpack 套件的基本 html 文件
• js/index.js：範例 JS 檔案，其中包含顯示如何匯入和使用 wasm 套件的註解
• package.json 和 package-lock.json
  • 引入用於 webpack 的 devDependencies
    • webpack
    • webpack-cli
    • webpack-dev-server
  • 定義一個 start 腳本以執行 webpack-dev-server
• webpack.config.js：使用 webpack 捆綁 JS 的設定檔
• crate/src/lib.rs：您的 Rust crate 程式碼！

您的 Rust Crate

搭建的專案包含一個範例 Rust WebAssembly webpack crate。

在 crate/src/lib.rs 檔案中，我們看到一個可以從我們的 JS 檔案呼叫的 run 函式

#![allow(unused)]
fn main() {
// Called by our JS entry point to run the example.
#[wasm_bindgen]
pub fn run() -> Result<(), JsValue> {
    set_panic_hook();

    // ...
    let p: web_sys::Node = document.create_element("p")?.into();
    p.set_text_content(Some("Hello from Rust, WebAssembly, and Webpack!"));
    // ...

    Ok(())
}
}

現在，打開 js/index.js 檔案。我們看到我們的 Rust 生成的 wasm run 函式在我們的 JS 檔案中被呼叫。

import("../crate/pkg").then(module => {
  module.run();
});

執行專案

為了產生我們編譯為 wasm 程式碼的 Rust，在根目錄中我們執行

npm run build

這將在新的 dist 目錄中建立我們捆綁的 JavaScript 模組。

我們現在應該準備好執行我們的專案了！在根目錄中，我們將執行

npm start

然後在網路瀏覽器中導航到 https://127.0.0.1:8080，您應該會在頁面的主體中看到寫著「來自 Rust、WebAssembly 和 Webpack 的問候！」的文字。

如果您成功了，恭喜！您已經成功使用了 rust-webpack 範本！