# wasm-pack — Build Rust WebAssembly Packages for npm

> One-command tool that compiles Rust code to WebAssembly and generates npm-ready packages with TypeScript type definitions.

## Install

Save in your project root:

# wasm-pack — Build Rust WebAssembly Packages for npm

## Quick Use
```bash
cargo install wasm-pack
wasm-pack new my-wasm-lib
cd my-wasm-lib
wasm-pack build --target web
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-97b38062
Author: AI Open Source