Now that we've installed all of our tools and setup our npm account we can actually start coding! We'll be writing up a small crate that adds two numbers and outputs the numbers. While this will be a simple example, we're really trying to focus on how to use wasm-pack. You'll be provided links to other resources so you can make more complicated code to package and ship them to npm!
Let's get started then! First off run this command to create our project:
$ cargo new --lib wasm-add
This will create a new Rust project in a directory called
wasm-add. We've also specified that
we're building a library, since we'll be calling this code from JS.
$ cd wasm-add
You'll find everything in here ready to get started. First though we'll need to add a dependency to
our code and make a few small changes. Open up your
Cargo.toml file. You should see something like
[package] name = "wasm-add" version = "0.1.0" authors = ["Michael Gattozzi <email@example.com>"] [dependencies]
This configuration file sets up everything we need to get started but we'll need a few extra fields and settings to get this to work for wasm and be ready for npm
[package] name = "wasm-add" version = "0.1.0" authors = ["Michael Gattozzi <firstname.lastname@example.org>"] description = "Code used to demonstrate how to use wasm-pack" license = "MIT/Apache-2.0" repository = "https://github.com/mgattozzi/wasm-add" [lib] crate-type = ["cdylib"] [dependencies] wasm-bindgen = "0.2"
First off lets look at the last three fields added to the package section
repository. npm requires this metadata and so
wasm-pack won't package your code up until you
have them set. There are more fields that you can add that are more specific to
crates.io that you
can find here but for the sake of this
tutorial that's all you need for that section.
You'll also notice we add a new section titled
[lib]. In here we added this line:
crate-type = ["cdylib"]
Normally Rust compiles the code for the library in a format meant for other Rust packages. We want
our code to work with wasm though! We specify that it's a dynamic library that's C compatible. This
sounds a bit weird but the
wasm32 target will know to interpret this option and instead produce
a wasm binary properly. This is meant to get
cargo to pass the right parameters to the compiler!
Alright the last thing we added was this to the
wasm-bindgen = "0.2"
This is the
wasm-bindgen crate. We'll be using it very shortly to make our functions work nicely
with wasm and not have to worry about a lot of nitty gritty details.
We've got our package's metadata all set up, so let's actually write some code!