Compile Rust to WebAssembly with wasm-pack

Advanced15 minTrending

Build Rust libraries as WebAssembly modules for use in browsers and Node.js with wasm-pack and wasm-bindgen.

Prerequisites

-Rust toolchain installed via rustup
-wasm-pack installed
-Node.js installed (for testing)

Steps

Install wasm-pack

Install the tool that builds, tests, and publishes Rust-generated WebAssembly.

$ cargo install wasm-pack

Create a new wasm library project

Initialize a library crate configured for WebAssembly output.

$ cargo new --lib my-wasm-lib && cd my-wasm-lib && cargo add wasm-bindgen

Configure the crate type

Set the crate type to cdylib in Cargo.toml for WebAssembly compilation.

$ cat >> Cargo.toml << 'EOF' [lib] crate-type = ["cdylib", "rlib"] EOF

Write a wasm-bindgen function

Create an exported function that can be called from JavaScript.

$ cat > src/lib.rs << 'EOF' use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn greet(name: &str) -> String { format!("Hello, {}!", name) } #[wasm_bindgen] pub fn fibonacci(n: u32) -> u64 { match n { 0 => 0, 1 => 1, _ => { let mut a: u64 = 0; let mut b: u64 = 1; for _ in 2..=n { let temp = b; b = a + b; a = temp; } b } } } EOF

Build the WebAssembly package

Compile the library to WebAssembly and generate JavaScript bindings.

$ wasm-pack build --target web

Use --target bundler for webpack/Vite projects, --target nodejs for Node.js, or --target web for direct browser use.

Full Script

full-script.sh

#!/bin/bash
# Rust to WebAssembly Build
set -euo pipefail

TARGET=${1:-"web"}

echo "=== Checking wasm-pack ==="
wasm-pack --version || { echo "Install with: cargo install wasm-pack"; exit 1; }

echo ""
echo "=== Building for target: $TARGET ==="
wasm-pack build --target "$TARGET" --release

echo ""
echo "=== Output Files ==="
ls -lh pkg/

echo ""
echo "=== Package Contents ==="
ls pkg/*.wasm pkg/*.js pkg/*.ts 2>/dev/null || true

echo ""
echo "=== wasm-pack Commands ==="
echo "Build (web):     wasm-pack build --target web"
echo "Build (bundler): wasm-pack build --target bundler"
echo "Build (node):    wasm-pack build --target nodejs"
echo "Test (browser):  wasm-pack test --chrome --headless"
echo "Test (node):     wasm-pack test --node"
echo "Publish:         wasm-pack publish"

FAQ

Discussion

Loading comments...

#!/bin/bash # Rust to WebAssembly Build set -euo pipefail TARGET=${1:-"web"} echo "=== Checking wasm-pack ===" wasm-pack --version || { echo "Install with: cargo install wasm-pack"; exit 1; } echo "" echo "=== Building for target: $TARGET ===" wasm-pack build --target "$TARGET" --release echo "" echo "=== Output Files ===" ls -lh pkg/ echo "" echo "=== Package Contents ===" ls pkg/*.wasm pkg/*.js pkg/*.ts 2>/dev/null || true echo "" echo "=== wasm-pack Commands ===" echo "Build (web): wasm-pack build --target web" echo "Build (bundler): wasm-pack build --target bundler" echo "Build (node): wasm-pack build --target nodejs" echo "Test (browser): wasm-pack test --chrome --headless" echo "Test (node): wasm-pack test --node" echo "Publish: wasm-pack publish"