rsbuild-plugin-wasmpack

rsbuild-plugin-wasmpack is a plugin for rsbuild that enables you to compile and build Rust crates into WebAssembly (Wasm) using wasm-pack.

This plugin simplifies the integration of Rust to WebAssembly in your projects, allowing you to easily compile and bundle your Rust code for use in web applications.

Table of Contents

• rsbuild-plugin-wasmpack
  • Table of Contents
  • Demo
  • Prerequisites
  • Installation
    • npm
    • bun
    • pnpm
    • yarn
  • Usage
    • Example rsbuild.config.js
    • Example usage
    • Configuration Options

Demo

This demo shows the hot-reloading feature of the rsbuild-plugin-wasmpack in action. As you make changes to your Rust code, the plugin automatically rebuilds the WebAssembly package and updates the web application without requiring a full page reload.

Prerequisites

Before using the plugin, make sure you have:

• wasm-pack installed:

  cargo install wasm-pack

• rsbuild set up in your project.

Installation

You can add rsbuild-plugin-wasmpack as a development dependency using your preferred package manager:

npm

npm install --save-dev rsbuild-plugin-wasmpack

bun

bun add -d rsbuild-plugin-wasmpack

pnpm

pnpm add -D rsbuild-plugin-wasmpack

yarn

yarn add -D rsbuild-plugin-wasmpack

Usage

Once installed, you can add the plugin to your rsbuild configuration. Here’s an example configuration for compiling a Rust crate to WebAssembly:

Example rsbuild.config.js

import { defineConfig } from "@rsbuild/core";
import { pluginWasmPack } from "rsbuild-plugin-wasmpack";

export default defineConfig({
  plugins: [
    pluginWasmPack({
      crates: [
          {
            path:   "rust1", // The path to your Rust crate
            target: "web",   // The target environment (e.g., 'web', 'nodejs')
          },
          {
            path:   "rust2",
            target: "web",
            profileOnDev: "profiling", // Optional: The profile to use when building the crate in development mode (default: 'dev')
            profileOnProd: "release",   // Optional: The profile to use when building the crate in production mode (default: 'release')
          },
        ],
      },
      wasmpackPath: "path/to/wasm-pack", // Optional: The path to the wasm-pack executable (default: '~/.cargo/bin/wasm-pack')
    ),
  ],
});

Example usage

import initializeRust1 from "rust1"; // Note that the package name is the specified name in the `Cargo.toml` file
import initializeRust2 from "rust2";

initializeRust1().then((rust1) => {
  rust1.greet("World1"); // Call the exported function from the Rust crate
});

initializeRust2().then((rust2) => {
  rust2.greet("World2");
});

Configuration Options

• crates (array): An array of objects representing the Rust crates you want to compile. Each object should have the following properties:

  • path (string): The path to your Rust crate or project. This is typically the folder containing Cargo.toml.

  • target (string): The WebAssembly target. See all supported targets in the wasm-pack documentation.

  • profileOnDev ("dev"| "profiling" | "release"): The profile to use when building the crate in development mode. This is optional and defaults to dev.

  • profileOnProd ("dev"| "profiling" | "release"): The profile to use when building the crate in production mode. This is optional and defaults to dev.

• wasmpackPath (string): The path to the wasm-pack executable. This is optional and defaults to ~/.cargo/bin/wasm-pack.