Hello Wasm NPM

How to publish wasm to npm and use via web.

🚥 We will use no-bundler style.

You have 2 options here

  • bundler (default, support webpack)
  • no-bundler (init before use).

We use vite which is still has Wasm bundle issue so we tend to use no-bundler in the meantime to avoid its and to keep it simple (bundler free).

💡 For bundler via webpack go here

1️⃣ Prerequisites

2️⃣ Build/Deploy

# Get example
git clone https://github.com/rustwasm/wasm-bindgen/tree/main/examples/hello_world
cd hello_world

# Build lib `@foo/bar` target `web`.
# Change `foo` and `bar` as you desire.
wasm-pack build --scope foo --target nodejs

# Or maybe no organize by remove `--scope foo` and target web.
wasm-pack build --target web

# Login to npm.
wasm-pack login

# Publish pkg folder.
wasm-pack publish --access=public

Optional: no wasm-pack

# Build
cargo build --target wasm32-unknown-unknown --release
wasm-bindgen target/wasm32-unknown-unknown/release/hello_world.wasm --out-dir pkg --nodejs

# Release
npm publish pkg --access=public

3️⃣ Use wasm

via web.

import init, { greet } from '@foo/bar'
init().then({
  greet('World!');
}).catch(console.error);

via nodejs.

import { greet } from '@foo/bar'
greet('World!');