wasm-pack — Build Rust WebAssembly Packages for npm

Introduction

wasm-pack is a tool for building, testing, and publishing Rust-generated WebAssembly packages. It takes a Rust crate that uses wasm-bindgen, compiles it to a .wasm binary, generates JavaScript glue code with TypeScript definitions, and produces a ready-to-publish npm package. wasm-pack bridges the gap between the Rust and JavaScript ecosystems, making it straightforward to use Rust performance in web and Node.js applications.

What wasm-pack Does

• Compiles Rust crates to optimized WebAssembly with a single command
• Generates JavaScript wrapper modules and TypeScript .d.ts type definitions
• Produces npm-compatible package.json for direct publishing to the npm registry
• Runs wasm-bindgen automatically to handle type conversions between Rust and JS
• Supports multiple targets: browser ESM, Node.js CommonJS, and bundler integration

Architecture Overview

wasm-pack orchestrates several tools behind its CLI. It invokes cargo build --target wasm32-unknown-unknown to compile Rust to WebAssembly, then runs wasm-bindgen to generate JS bindings from annotated Rust functions. Optionally, wasm-opt from Binaryen optimizes the .wasm binary for size. The output directory contains the wasm file, JS glue, TypeScript types, and a package.json configured for the chosen target environment. This pipeline turns a Rust library into an npm package in seconds.

Self-Hosting & Configuration

• Install with cargo install wasm-pack or download pre-built binaries
• Scaffold a new project with wasm-pack new <name>
• Build with wasm-pack build --target web for browser ESM or --target nodejs for Node.js
• Publish to npm with wasm-pack publish after logging in via npm login
• Configure optimization level and features in Cargo.toml under [package.metadata.wasm-pack]

Key Features

• Single command from Rust source to publishable npm package
• Automatic TypeScript type generation from Rust function signatures
• Supports wasm-opt size optimization out of the box
• Scaffolding template includes tests, CI configuration, and README
• Works with popular bundlers like Webpack, Vite, and Rollup

Comparison with Similar Tools

• wasm-bindgen — low-level binding generator; wasm-pack wraps it with build, test, and publish workflows
• trunk — Rust WASM app bundler with dev server; wasm-pack focuses on library packaging for npm
• cargo-component — targets the WASM Component Model; wasm-pack targets traditional WASM + JS glue
• Emscripten — compiles C/C++ to WASM; wasm-pack is Rust-specific with npm integration
• AssemblyScript — TypeScript-to-WASM compiler; wasm-pack brings Rust performance to the same ecosystem

FAQ

Q: Do I need Node.js installed to use wasm-pack? A: Node.js is needed for wasm-pack test (which uses wasm-pack's test runner) and npm publishing, but not for building.

Q: Can I use wasm-pack output in a Vite project? A: Yes. Build with --target web and import the generated module. Vite handles .wasm files natively.

Q: How large is a typical wasm-pack output? A: A minimal Rust function compiles to under 20 KB of gzipped WASM. Size grows with dependencies and can be reduced with wasm-opt.

Q: Does wasm-pack support Rust async functions? A: Yes, through wasm-bindgen-futures, which converts Rust Futures into JavaScript Promises.

Sources

• https://github.com/rustwasm/wasm-pack
• https://rustwasm.github.io/wasm-pack/