[WASM Rust] Create and Publish a NPM Package Containing Rust Generated WebAssembly using wasm-pack

wasm-pack is a tool that seeks to be a one-stop shop for building and working with Rust generated WebAssembly that you would like to interop with JavaScript. This includes ability to publish modules so that you can share your Rust generated WebAssembly code with others.

In this lesson we create a npm package and export a Rust function that will log to the console in the browser. We publish the module to NPM and afterwards use a rust-webpack-template to install and use the newly published package.

 

Create a new wasm lib:

cargo new my-wasm-lib --lib

 

Update Cargo.toml:

[package]
name = "my-wasm-lib"
version = "0.1.0"
authors = []
edition = "2018"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

 

lib.rs:

extern crate wasm_bindgen;

use wasm_bindgen::prelude:;*;

#[wasm_bindgen]
extern {
  #[wasm_bindgen(js_namespace = console)]
  fn log(msg: &str);
}

#[wasm_bindgen]
pub fn greet(name: &str) {
  log(&format!("Hello {}!", name));
}

 

Run:

wasm-pack build

This creates a package directory. In previous lessons, I mentioned that it contains a WASM and a Javascript file. What I haven't mentioned yet is that it also creates a package.json based on our Cargo.toml.

 

Publish:

wasm-pack publish

 

Then inside another wasm project:

Install:

npm install --save my-wasm-lib1215  # package name

 

Open index.js:

import("my-wasm-lib1215").then(module => {
  module.greet("World!@");
})

Run:

npm start

In the broswer console, you can see the msg:

Hello World!@!