# Rslib

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

## Guide

- [CSS](/guide/advanced/css.md): Rslib provides out-of-the-box support for CSS, including CSS Modules, CSS preprocessors, PostCSS, CSS inlining, Lightning CSS, and CSS compression. Rslib also provides several configurations to customize CSS file processing.
- [Declaration files](/guide/advanced/dts.md): This chapter introduces what TypeScript Declaration Files are and how to generate declaration files in Rslib.
- [JSON](/guide/advanced/json-files.md): Rslib supports importing JSON files in code, and also supports importing YAML and TOML files and converting them to JSON format.
- [Module Federation](/guide/advanced/module-federation.md): This chapter introduces how to build Module Federation output in Rslib.
- [Output compatibility](/guide/advanced/output-compatibility.md): This chapter introduces how to specify which target environment should be supported.
- [Use Rsdoctor](/guide/advanced/rsdoctor.md): Rsdoctor is a build analyzer tailored for the Rspack ecosystem. Rsdoctor aims to be a one-stop, intelligent build analyzer that makes the build process transparent, predictable, and optimizable through visualization and smart analysis, helping teams pinpoint bottlenecks, improve performance, and raise engineering quality. Use Rsdoctor to debug build outputs or the build process.
- [Use Rspress](/guide/advanced/rspress.md): Rspress is a Rspack-based static site generator, ideal for building demos and API docs for component libraries. With plugin-preview and plugin-api-docgen, you can reuse Rslib sources and typings to preview components and view APIs in one site.
- [Use Rstest](/guide/advanced/rstest.md): Rstest is a test framework based on Rspack that provides comprehensive, first-class support for the Rspack ecosystem, you can use the same set of configurations for both development and testing. Using Rstest will bring a seamless testing experience to your Rslib project.
- [Static assets](/guide/advanced/static-assets.md): Rslib supports import static assets, including images, fonts, audio and video.
- [Use Storybook](/guide/advanced/storybook.md): Storybook is a powerful tool for developing UI components in isolation for React, Vue, and other frameworks. It enables you to build and test components independently, which can accelerate both development and testing. storybook-rsbuild is the Rsbuild powered Storybook builder, and provided the framework integration for React, Vue3 and vanilla JavaScript. The coherent Rsbuild system could make Storybook use an unified configuration with Rslib.
- [SVGR](/guide/advanced/svgr-files.md): By default, Rslib treats SVG images as static assets. By adding the @rsbuild/plugin-svgr plugin, Rslib supports transforming SVG to React components via SVGR.
- [Handle third-party dependencies](/guide/advanced/third-party-deps.md): This section introduces how to handle third-party dependencies in bundle mode. Generally, third-party dependencies required by a project can be installed via the install command in the package manager. After the third-party dependencies are successfully installed, they will generally appear under dependencies and devDependencies in the project package.json. Dependencies under "dependencies" are generally required for the package in runtime, and if these third-party dependencies are declared under "devDependencies", then there will be missing dependencies in production runtime. In addition to "dependencies", "peerDependencies"can also declare dependencies that are needed in the production environment, but it puts more emphasis on the existence of these dependencies declared by "peerDependencies" in the project's runtime environment, similar to the plugin mechanism.
- [CLI](/guide/basic/cli.md): Rslib comes with a lightweight CLI that includes commands such as rslib build and rslib inspect.
- [Configure Rslib](/guide/basic/configure-rslib.md): Rslib's configuration is based on Rsbuild, which means that you can use all of Rsbuild configurations, as well as the lib configuration specific to Rslib.
- [Output format](/guide/basic/output-format.md): There are multiple supported output formats for the generated JavaScript files in Rslib: ESM, CJS, UMD, MF, and IIFE. In this chapter, we will introduce the differences between these formats and how to choose the right one for your library.
- [Output structure](/guide/basic/output-structure.md)
- [Use TypeScript](/guide/basic/typescript.md): Rslib supports TypeScript by default, allowing you to directly use .ts and .tsx files in your projects.
- [Upgrade Rslib](/guide/basic/upgrade-rslib.md): This section explains how to upgrade the project's Rslib dependencies to the latest version. {/* TODO /} {/ > Please see Releases to understand the Rsbuild release strategy. */}
- [Features FAQ](/guide/faq/features.md)
- [Modern.js Module](/guide/migration/modernjs-module.md): This section introduces how to migrate a project using Modern.js Module to Rslib.
- [tsc](/guide/migration/tsc.md): This section introduces how to migrate a project using tsc (TypeScript Compiler) to Rslib.
- [tsup](/guide/migration/tsup.md): This section introduces how to migrate a project using tsup to Rslib.
- [Overview](/guide/solution/index.md): In this chapter, we will introduce how to use Rslib to development libraries for browser and Node.js. We will also cover how to create libraries for different UI frameworks.
- [Node.js](/guide/solution/nodejs.md): In this document, you will learn how to build a Node.js library using Rslib. You can check out Node.js related example projects in Examples.
- [React](/guide/solution/react.md): In this document, you will learn how to build a React component library with Rslib. You can check out React related example projects in Examples.
- [Vue](/guide/solution/vue.md): In this document, you will learn how to build a Vue component library using Rslib. You can check out Vue related example projects in Examples.
- [AI](/guide/start/ai.md): To help AI better understand Rslib's features, configuration, and best practices so it can provide more accurate assistance during day-to-day development and troubleshooting, Rslib provides the following capabilities: Agent Skillsllms.txtMarkdown docsAGENTS.md
- [Glossary](/guide/start/glossary.md)
- [Introduction](/guide/start/index.md): Rslib is a library development tool that leverages the well-designed configurations and plugins of Rsbuild, empowering library developers to take advantage of the extensive knowledge and ecosystem of webpack and Rspack. Rslib provides a comprehensive set of build features for library development, including: Compilation of diverse languages: TypeScript, JSX, Sass, Less, CSS Modules, Wasm, and more.Flexible build modes: Bundle and bundleless options to meet varying needs.Multiple output formats: ESM, CJS, and UMD for maximum compatibility.Declaration file generation: Including isolated declarations.Advanced features: Module Federation, asset compression, PostCSS, Lightning CSS, and more.
- [Packages](/guide/start/npm-packages.md): This document showcases all the npm package information maintained by Rslib team.
- [Quick start](/guide/start/quick-start.md)

## Config

- [Config overview](/config/index.md): This page lists all the configurations for Rslib. See Configure Rslib for detail.
- [lib.autoExtension](/config/lib/auto-extension.md): Type: booleanDefault: trueCLI: --auto-extension / --no-auto-extension Whether to automatically set the file extension based on the format option in the JavaScript output files.
- [lib.autoExternal](/config/lib/auto-external.md): Type: Default:true when format is cjs or esmfalse when format is umd or mfCLI: --auto-external / --no-auto-external Whether to automatically externalize dependencies of different dependency types and do not bundle them.
- [lib.banner](/config/lib/banner.md): Type: Default: {} Inject content into the top of each JavaScript, CSS or declaration output file.
- [lib.bundle](/config/lib/bundle.md): Type: booleanDefault: trueCLI: --bundle / --no-bundle Specify whether to bundle the library, which is known as bundle mode when bundle is set to true, and bundleless mode when set to false. See bundle / bundleless for more details.
- [lib.dts](/config/lib/dts.md): Type: Default: undefinedCLI: --dts / --no-dts Configure the generation of the TypeScript declaration files.
- [lib.experiments](/config/lib/experiments.md): Used to enable some Rslib experimental features.
- [lib.externalHelpers](/config/lib/external-helpers.md): Type: booleanDefault: false Whether to import SWC helper functions from @swc/helpers instead of inlining them. By default, the output JavaScript file may depend on helper functions to support the target environment or output format, and these helper functions will be inlined in the file that requires it. When externalHelpers set to true, the output JavaScript will import helper functions from the external module @swc/helpers. This helps reduce duplicate helper code in the final bundles, and reduces the bundle size.
- [lib.footer](/config/lib/footer.md): Type: Default: {} Inject content into the bottom of each JavaScript, CSS or declaration file.
- [lib.format](/config/lib/format.md): Type: 'esm' | 'cjs' | 'umd' | 'mf' | 'iife'Default: 'esm'CLI: --format <format> (e.g. --format umd) Specify the output format for the generated JavaScript output files. For different output formats, Rslib uses the following default value of output.library.type provided by Rspack: esm：modern-modulecjs：commonjs-staticumd：umdiife: module with output.iife enabled. See Output Format and Module Federation for more details.
- [lib.id](/config/lib/id.md): Type: stringDefault: undefined Specify the library ID. The ID identifies the library and is useful when using the --lib CLI option or the JavaScript API's lib option to build specific libraries with a meaningful id.
- [Overview](/config/lib/index.md): Type: Default: undefinedRequired: true The lib configuration is an array of objects, each representing a distinct set of configurations. These include all Rsbuild configurations as well as Rslib-specific configurations, designed to generate different outputs.
- [lib.outBase](/config/lib/out-base.md): Type: stringDefault Value: undefined When building a project where source files exist across multiple directories with bundleless mode, the output directory structure will be replicated relative to the outBase directory in the output directory. If no base output directory is specified, the lowest common ancestor of all input entry points is used by default. Configuring outBase will change the path of the base output directory. outBase can be either a relative path from the current process directory or an absolute path. For example, we have the following directory structure: If the output base directory is not specified, the lowest common ancestor of all input entry point paths, i.e. ./src/utils, is used by default, and the final file output structure is: When outBase is configured as ./src, the output directory structure is:
- [lib.redirect](/config/lib/redirect.md): Type: Default: Configure the redirect for import paths in output files. In bundleless mode, there are often needs such as using aliases or automatically appending suffixes for ESM outputs. The redirect configuration is designed to address these issues.
- [lib.shims](/config/lib/shims.md): Type: Default: Configure the shims for CommonJS and ESM output.
- [lib.syntax](/config/lib/syntax.md): Type: Default: 'esnext'CLI: --syntax <value> (repeatable, e.g. --syntax es2018 or --syntax="node 14" --syntax="Chrome 103") Configure the syntax to which JavaScript and CSS will be downgraded. See Output Compatibility - Syntax Downgrade for more details.
- [lib.umdName](/config/lib/umd-name.md): Type: string | string[] | { amd?: string, commonjs?: string, root?: string | string[] }Default: undefined The export name of the UMD bundle.
- [Overview](/config/rsbuild/index.md): Rslib inherits its configuration from Rsbuild, so you can also configure the <RsbuildDocBadge path="/config" text="config" /> options from Rsbuild. This chapter introduces some common configuration items and explains how to use them in Rslib. logLevel: Specify the log level.resolve: Options for module resolution.source: Options for input source code.output: Options for build outputs.tools: Options for low-level tools.performance: Options for performance.plugins: Configure Rsbuild plugins.
- [logLevel](/config/rsbuild/log-level.md): Type: 'info' | 'warn' | 'error' | 'silent'Default: 'info' Specify the log level, the default value is info.
- [output](/config/rsbuild/output.md): Options for build outputs.
- [performance](/config/rsbuild/performance.md): Options for performance.
- [plugins](/config/rsbuild/plugins.md): plugins is used to register Rsbuild plugins. Rslib and Rsbuild share the same plugin system, so you can use Rsbuild plugins in Rslib.
- [resolve](/config/rsbuild/resolve.md): Options for module resolution.
- [source](/config/rsbuild/source.md): Options for input source code.
- [tools](/config/rsbuild/tools.md): Options for low-level tools.

## API

- [Rslib core](/api/javascript-api/core.md): This chapter introduces some of the core methods provided by Rslib.
- [Rslib instance](/api/javascript-api/instance.md): This section describes all the properties and methods on the Rslib instance object.
- [Rslib types](/api/javascript-api/types.md): This section describes some of the type definitions provided by the Rslib.
- [JavaScript API](/api/start/index.md): Rslib provides a comprehensive JavaScript API for developers to directly use Rslib's capabilities in JavaScript or TypeScript code. Rslib's JavaScript API can be used in Node.js, Deno, or Bun.

## Blog

- [Overview](/blog/index.md): Check here for the latest articles and release announcements about Rslib.
- [Rslib: Build library with Rspack](/blog/introducing-rslib.md): We are excited to introduce Rslib — a library development tool based on Rspack. Developed by ByteDance Web Infra Team, Rslib helps developers create JavaScript libraries and UI component libraries in a simple and intuitive way while enjoying the ultimate development experience brought by Rspack and Rsbuild. Repo：https://github.com/web-infra-dev/rslib