手動設定

⚠️ 這不是開始 wasm-pack 專案的建議方法！如果您不小心來到這裡，請查看我們的建議專案開始方式。

步驟 1：建立新的 Rust 函式庫專案

您可以使用以下指令建立一個名為 my-lib 的新 Rust 專案。

cargo new --lib my-lib

--lib 旗標指定該專案是一個函式庫，這很重要，因為我們將從 JavaScript 呼叫此程式碼。

步驟 2：編輯您的 `Cargo.toml` 檔案

新增 `wasm-bindgen` 依賴項

您需要在 dependencies 區段的 Cargo.toml 中新增 wasm-bindgen。wasm-bindgen 是一個促進 wasm 模組和 JavaScript 之間互通性的工具。

⚠️ 如果您來自 JavaScript，您可能會注意到當我們新增依賴項時，沒有 ^ 或 ~ 符號 - 看起來我們鎖定在 0.2 版本。但是，情況並非如此！在 Rust 中，^ 是隱含的。

新增 `crate-type`

接下來，新增一個 [lib] 區段，其中包含一個名為 crate-type 的新欄位，設定為 "cdylib"。這指定該函式庫是一個 C 相容的動態函式庫，這有助於 cargo 在目標為 wasm32 時將正確的旗標傳遞給 Rust 編譯器。

進行這些更改後，您的 Cargo.toml 檔案應如下所示

[package]
name = "hello-wasm"
version = "0.1.0"
authors = ["Ashley Williams <ashley666ashley@gmail.com>"]
description = "babby's first wasm package"
license = "MIT OR Apache-2.0"
repository = "https://github.com/ashleygwilliams/hello-wasm"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen="0.2"

步驟 3：撰寫一些 Rust 程式碼！

現在您的 crate 已在 Cargo.toml 檔案中正確設定，設定專案的唯一剩餘步驟是在 src/lib.rs 檔案中加入一些 Rust 程式碼。

瀏覽器範例

我們提供的範本為您提供了一個快速的「Hello, World」專案，用於編譯成您可以在瀏覽器中使用的 WebAssembly 函式庫

#![allow(unused)]
fn main() {
extern crate wasm_bindgen;

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
    fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet() {
    alert("Hello, World!");
}
}

就這樣！我們將在範本深入探討中討論這段程式碼的作用，您現在都已設定好。祝您 wasm-pack 順利！

Hello wasm-pack!