Rslib

Rslib is a library development tool that leverages the well-designed configurations and plugins of Rsbuild.

Guide

• Introduction: Discover Rslib features, its integration with Rsbuild and Rspack, supported output formats, and the wider Rstack ecosystem.
• Quick start: Set up a runtime, create a project with create-rslib, choose templates, tools, and skills, and start using Rslib quickly.
• Glossary: Browse key Rslib terms such as bundleless, externals, shims, output formats, and other library build concepts.
• Packages: Browse the official Rslib npm packages, including @rslib/core, create-rslib, and related plugins maintained by the team.
• AI: Use agent skills, llms.txt, Markdown docs, and AGENTS.md to help AI understand and work with Rslib more effectively.
• Overview: Explore Rslib solutions for browser libraries, Node.js packages, and component libraries across frameworks.
• Node.js: Build Node.js libraries with Rslib using the right runtime targets, ESM or CJS output, and package setup.
• React: Build React component libraries with Rslib using JSX support, style handling, asset imports, and common tooling.
• Vue: Build Vue component libraries with Rslib using SFC support, style handling, asset imports, and package output.
• Svelte: Build Svelte component libraries with Rslib using compiled ESM output, declaration generation, style handling, and package output.
• CLI: Use the Rslib CLI for build, inspect, watch mode, config selection, and common command-line options.
• Configure Rslib: Configure Rslib with lib options, shared Rsbuild settings, config files, and defineConfig.
• Use TypeScript: Use TypeScript with Rslib, including .ts and .tsx support, tsconfig settings, and declaration output.
• Output format: Choose Rslib output formats for library builds, including ESM, CJS, UMD, Module Federation, and IIFE.
• Output structure: Understand Rslib output structure, including bundle and bundleless mode, dist layout, and generated files.
• Upgrade Rslib: Upgrade Rslib dependencies safely by checking breaking changes, syncing related packages, and validating the migration.
• Handle third-party dependencies: Handle third-party dependencies in Rslib bundle mode with externals, autoExternal, and related packaging strategies.
• Output compatibility: Control Rslib output compatibility with syntax targets, browsers, Node.js versions, and platform settings.
• Declaration files: Choose declaration generation methods in Rslib, and use TypeScript Compiler API, tsgo, isolatedDeclarations, and API Extractor to generate and bundle declaration files.
• CSS: Use CSS in Rslib with CSS Modules, preprocessors, PostCSS, Lightning CSS, and output configuration.
• Static assets: Handle images, fonts, audio, video, and other static assets in Rslib builds, from imports to output.
• SVGR: Import SVG files with SVGR in Rslib and choose between React components and static asset handling.
• JSON: Import JSON, YAML, and TOML in Rslib with typed data access, module imports, and related configuration.
• Module Federation: Build Module Federation libraries with Rslib using the right configuration, local dev server, and debugging flow.
• Use Rspress: Use Rspress with Rslib for component documentation, demos, API pages, and documentation site generation.
• Use Storybook: Use Storybook with Rslib for isolated component development, preview debugging, examples, and documentation workflows.
• Use Rstest: Use Rstest with Rslib for unit tests, component tests, debugging, and ecosystem-aligned testing workflows.
• Use Rsdoctor: Analyze Rslib builds with Rsdoctor to inspect bundle size, dependency relationships, and performance bottlenecks.
• tsup: Migrate from tsup to Rslib with equivalent config options, plugin choices, and output behavior changes.
• tsc: Migrate from TypeScript Compiler to Rslib with config mapping, declaration file handling, and output behavior changes.
• Modern.js Module: Migrate from Modern.js Module to Rslib with guidance on config differences, output behavior, and common replacements.
• Features FAQ: Check the Rslib feature FAQ for bundleless style handling, static assets, minification, and declaration file generation.

Config

• Config overview: Browse the Rslib configuration overview, including lib options, inherited Rsbuild settings, and links to every reference page.
• Overview: Browse the Rslib lib configuration overview for output formats, syntax targets, declaration files, and bundle modes.
• lib.autoExtension: Configure lib.autoExtension to derive output file extensions from the selected library format and output mode.
• lib.autoExternal: Configure lib.autoExternal to automatically externalize dependencies when building libraries in bundle mode.
• lib.banner: Configure lib.banner to inject banner content at the top of JavaScript, CSS, and declaration output files.
• lib.bundle: Configure lib.bundle to choose bundle or bundleless mode and set the right entry strategy for each output.
• lib.dts: Configure lib.dts to choose declaration generation methods, bundle declaration files, and customize Rslib type output.
• lib.experiments: Configure lib.experiments to enable experimental features and try new build capabilities in Rslib.
• lib.externalHelpers: Configure lib.externalHelpers to import SWC helpers from @swc/helpers instead of inlining them in output.
• lib.footer: Configure lib.footer to inject footer content into JavaScript, CSS, and declaration output files.
• lib.format: Configure lib.format to choose Rslib output formats such as ESM, CJS, UMD, Module Federation, and IIFE.
• lib.id: Configure lib.id to assign library IDs for selective builds in the CLI and JavaScript API.
• lib.outBase: Configure lib.outBase to control how source directory structure is preserved in bundleless output directories.
• lib.redirect: Configure lib.redirect to rewrite bundleless import paths for JavaScript, styles, and static assets.
• lib.shims: Configure lib.shims to enable the CommonJS and ESM shims required by specific library output targets.
• lib.syntax: Configure lib.syntax to set JavaScript syntax targets and compatibility levels for generated library output.
• lib.umdName: Configure lib.umdName to set the global export name used by UMD library bundles at runtime.
• Overview: Browse the Rsbuild options available in Rslib, including shared application-build settings that also work in library projects.
• logLevel: Configure logLevel in Rslib to control CLI and build log verbosity in development, debugging, and production builds.
• resolve: Configure Rsbuild resolve options in Rslib, including aliases, extensions, package resolution, and condition names.
• source: Configure Rsbuild source options in Rslib, including entries, defines, decorators, aliases, and source transforms.
• output: Configure Rsbuild output options in Rslib, including asset prefixes, dist paths, externals, filenames, and CSS emission.
• tools: Configure Rsbuild tools in Rslib to customize lower-level bundler, CSS, HTML, and developer tooling behavior.
• performance: Configure Rsbuild performance options in Rslib, including cache, chunking, preloading, and related build optimizations.
• plugins: Configure Rsbuild plugins in Rslib to register extensions and customize build behavior with plugin-based integration.

API

• JavaScript API: Get started with the Rslib JavaScript API in Node.js, Deno, or Bun using createRslib and instance methods.
• Rslib core: Use Rslib core APIs such as createRslib, loadConfig, defineConfig, and environment loading in JavaScript workflows.
• Rslib instance: Use the Rslib instance API for builds, Module Federation dev servers, config inspection, and lifecycle control.
• Rslib types: Reference the TypeScript types exported by Rslib for configs, APIs, instance methods, plugins, and Rsbuild or Rspack types.

Blog

• Overview: Browse Rslib release announcements, project updates, and articles about library development with Rspack and Rsbuild.
• Rslib: Build library with Rspack: Learn why Rslib was built on Rspack and Rsbuild, and how it delivers multiple output formats, ecosystem reuse, and performance.