wasm-pack is a tool for assembling and packaging Rust crates that target WebAssembly. These packages can be published to the npm Registry and used alongside other packages. This means you can use them side-by-side with JS and other packages, and in many kind of applications, be it a Node.js server side app, a client-side application bundled by Webpack, or any other sort of application that uses npm dependencies. You can find
wasm-pack on crates.io and GitHub.
💁 What it does today
wasm-pack walks you through four basic steps to prepare your Rust code to be published as a WebAssembly package to the npm registry:
1. Compile to WebAssembly
wasm-pack will add the appropriate WebAssembly compilation target using
rustup and will compile your Rust to Web Assembly in release mode.
To do this,
- Add the
wasm32-unknown-unknowncompilation target, if needed
- Compile your Rust project for release using the wasm target
wasm-pack wraps the CLI portion of the
wasm-bindgen tool and runs it for you! This does things like wrapping your WebAssembly module in JS wrappers which make it easier for people to interact with your module.
wasm-bindgen supports both ES6 modules and CommonJS and you can use
wasm-pack to produce either type of package!
To do this,
- If needed, install and/or update
wasm-bindgen, generating a new
.wasmfile and a
- Moves the generated files to a new
wasm-pack reads your
Cargo.toml and generates the
package.json file necessary to publish your package to the npm registry. It will:
To do this,
- Copy over your project
- Link to your Rust project’s
fileskey. This ensures that those files, and only those files, are included in your npm package. This is particularly important for ensuring good performance if you intend to use this package, or a bundle including this package, in the browser!
wasm-pack will copy your Rust project’s
README.md to the npm package it produces. We’ve got a lot of great ideas about extending this further to support the Rust ecosystem’s documentation feature,
rustdoc– more on the in the next section!
🔮 Future Plans
The crates.io team surveyed developers, and learned that good documentation was the number one feature that developers looked for when evaluating the use of crate. Contributor Yoshua Wuyts introduced the brilliant idea of generating further
README.md content by integrating
wasm-pack with the Rust API documentation tool,
rustdoc. The Rust-wasm team is committed to making Rust a first class way to write WebAssembly. Offering documentation for Rust-generated WebAssembly packages that’s both easy to write and easy to discover aligns neatly with our goals. Read more about the team’s thoughts in this issue and join in the discussion!
Manage and Optimize your Rust and JS dependency graphs
The next large piece of development work on
The preliminary work for this feature has already landed in
wasm-bindgen, so the next step will be integrating it into
wasm-pack. The naive integration won’t be too tricky- but we’re excited to explore the opportunities we have to streamline and optimize Rust dependency trees that contain npm dependencies on several levels! This work will be similar to the optimizations that bundlers like webpack deliver, but on the level of Rust dependencies.
There’s a lot of questions we still have to answer and there’s going be a lot of neat engineering work to do. In a few weeks there will be a full post on this topic, so keep an eye out!
Grow Node.js toolchain in Rust
The largest and most ambitious goal of this project is to rewrite the required
npm pack and
wasm-pack. However, Rust developers still need to install Node.js and npm to publish with
wasm-pack, we’re excited to change that by writing a npm package publisher in Rust- and who knows, perhaps we can eventually integrate some Rust elements (perhaps compiled to WebAssembly!) into the npm client!
Further collaboration with npm and bundlers
We’re always communicating with the npm CLI team members Kat Marchan and Rebecca Turner, as well as the folks who work on webpack and Parcel– we’re excited to keep working with them to make it easy for developers to release and use WebAssembly code!
🛠 Start using it today!
wasm-pack is currently a command line tool distributed via Cargo. To install it, setup a Rust development environment, and then run:
cargo install wasm-pack
If you aren’t sure where to start, we have a tutorial for you! This tutorial, by Michael Gattozzi and the Rust-wasm working group, walks you through:
- writing a small Rust library
- compiling it to WebAssembly, packaging, and publishing with
- bundling with webpack to produce a small website
The key to all excellent developer tooling is a short feedback cycle between developers of the tool and developers using the tool in their day to day workflows. In order to be successful with
wasm-pack, and all of our WebAssembly developer tooling, we need developers of all skill levels and backgrounds to get involved!
Take a look at our Contributor Guidelines and our Issue Tracker (we regularly label things as “good first issue” and provide mentors and mentoring instructions!)- we’re excited to work with you!
About Ashley Williams