Zephyr Cloud Docs

    Rslib

    Deploy your JavaScript/TypeScript libraries to Zephyr Cloud using Rslib. Built on Rsbuild, Rslib provides a fast and flexible library building solution with excellent TypeScript support and multiple output formats.

    Prerequisites
    Quick Setup with Codemod
    npm
    yarn
    pnpm
    bun
    npx with-zephyr

    This detects your bundler and configures Zephyr automatically. Learn more →

    For manual setup, continue below.

    Installation

    Install the Rsbuild plugin in your Rslib project:

    npm
    yarn
    pnpm
    bun
    npm install --save-dev zephyr-rsbuild-plugin

    Configuration

    Add the Zephyr plugin to your Rslib configuration:

    // rslib.config.ts
import { defineConfig } from '@rslib/core';
import { withZephyr } from 'zephyr-rsbuild-plugin';

export default defineConfig({
  plugins: [withZephyr()],
  source: {
    entry: {
      index: 'src/index.ts',
    },
  },
  lib: [
    {
      format: 'esm',
      output: {
        distPath: {
          root: 'dist',
        },
      },
    },
  ],
});

    Multiple Output Formats

    Rslib supports building your library in multiple formats:

    // rslib.config.ts
import { defineConfig } from '@rslib/core';
import { withZephyr } from 'zephyr-rsbuild-plugin';

export default defineConfig({
  plugins: [withZephyr()],
  source: {
    entry: {
      index: 'src/index.ts',
    },
  },
  lib: [
    // ESM build
    {
      format: 'esm',
      output: {
        distPath: {
          root: 'dist/esm',
        },
      },
    },
    // CommonJS build
    {
      format: 'cjs',
      output: {
        distPath: {
          root: 'dist/cjs',
        },
      },
    },
    // UMD build
    {
      format: 'umd',
      umdName: 'MyLibrary',
      output: {
        distPath: {
          root: 'dist/umd',
        },
      },
    },
  ],
});

    Project Structure

    A typical Rslib library structure:

    my-library/
├── src/
│   ├── index.ts         # Main entry point
│   ├── components/      # Library components
│   └── utils/           # Utility functions
├── dist/                # Built output
├── rslib.config.ts      # Rslib configuration
├── package.json
└── tsconfig.json       # TypeScript configuration

    Development Workflow

    Start development mode with watch:

    npm
    yarn
    pnpm
    bun
    deno
    npm dev

    Build for production:

    npm
    yarn
    pnpm
    bun
    deno
    npm build

    TypeScript Support

    Rslib provides excellent TypeScript support with automatic declaration generation:

    // rslib.config.ts
export default defineConfig({
  plugins: [withZephyr()],
  source: {
    entry: {
      index: 'src/index.ts',
    },
  },
  lib: [
    {
      format: 'esm',
      dts: true, // Generate TypeScript declarations
      output: {
        distPath: {
          root: 'dist',
        },
      },
    },
  ],
});

    Advanced Configuration

    Customize bundling behavior with additional options:

    // rslib.config.ts
export default defineConfig({
  plugins: [withZephyr()],
  source: {
    entry: {
      index: 'src/index.ts',
    },
  },
  lib: [
    {
      format: 'esm',
      dts: true,
      autoExternal: false, // Bundle dependencies
      bundle: true, // Enable bundling
      minify: true, // Minify output
      output: {
        distPath: {
          root: 'dist',
        },
      },
    },
  ],
});