2.3 KiB
Manual Setup
⚠️ This is not the recommended way to start a wasm-pack project! If you ended up
here by mistake, go check out our recommended project start.
Step 1: Create a New Rust Library Project
You can create a new Rust project named my-lib using this command.
cargo new --lib my-lib
The --lib flag specifies that the project is a library, which is important
because we will be calling this code from JavaScript.
Step 2: Edit your Cargo.toml File
Add the wasm-bindgen dependency
You will need to add wasm-bindgen to your Cargo.toml in the dependencies
section. wasm-bindgen is a tool that facilitates interoperability between
wasm modules and JavaScript.
⚠️ If you are coming from JavaScript, you might note that when we add the dependency
there is no ^ or ~ symbol- it looks like we're locking to the 0.2 version.
However, that's not the case! In Rust, the ^ is implied.
Add crate-type
Next, add a [lib] section, with a new field named crate-type set to
"cdylib". This specifies that the library is a C compatible dynamic library,
which helps cargo pass the correct flags to the Rust compiler when targeting
wasm32.
After making these changes, your Cargo.toml file should look something like
this:
[package]
name = "hello-wasm"
version = "0.1.0"
authors = ["Ashley Williams <ashley666ashley@gmail.com>"]
description = "babby's first wasm package"
license = "MIT/Apache-2.0"
repository = "https://github.com/ashleygwilliams/hello-wasm"
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen="0.2"
Step 3: Write some Rust!
Now that your crate is correctly configured in your Cargo.toml file, the only step
left to setup your project is to have some Rust code in your src/lib.rs file.
Browser Example
The template we have gives you a quick "Hello, World" project to use for compiling into a WebAssembly library that you can use in the browser:
extern crate wasm_bindgen;
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
extern {
fn alert(s: &str);
}
#[wasm_bindgen]
pub fn greet() {
alert("Hello, World!");
}
And that's it! We'll talk about what this code does in the template deep dive, which you are all
setup for now. Happy wasm-packing!