DOCSEARCHbyAlgolia
Submit Docs

Rslib

website·Indexed 35 days ago

https://lib.rsbuild.dev/

A library development tool based on Rsbuild that provides a simple way to create JavaScript libraries for browser and Node.js targets. It supports TypeScript, various output formats (ESM, CJS, UMD), and integrates with frameworks like React, Vue, Svelte, Solid, and ReactLynx. Rslib includes features for handling third-party dependencies, declaration files, CSS processing, and WebAssembly, and offers migration paths from tsup and tsc.

Tokens
49.3K
Snippets
264
Records
412
Agent score
63%

What's inside Rslib

  1. Overview of Rslib for library development

    Rslib is a library development tool based on Rsbuild, designed for building JavaScript libraries such as utility libraries, UI component libraries, CLIs, and agent applications. It leverages the Rspack and webpack ecosystems, allowing developers to use Rsbuild plugins and loaders. Key capabilities include a unified build pipeline for compiling JavaScript, transforming framework syntax, generating declarations, and processing static assets in a single pass.

  2. Overview of Rslib for library development

    Rslib is a library development tool based on Rsbuild and Rspack. It is designed to simplify the creation of JavaScript and UI component libraries by providing integrated tooling for building, debugging, documentation, and testing.

    Key advantages include:

    • High-Quality ESM Output: Optimizes webpack's ESM output to reduce redundant runtime code and improve tree-shaking for consumers.
    • Performance: Powered by Rspack and integrates Rust-based tools like SWC and Lightning CSS for fast build speeds.
    • Ecosystem Compatibility: Supports Rsbuild, Rspack, and webpack plugins.
    • Framework Agnostic: Supports React, Vue, Svelte, Solid, and other frameworks via plugins.
    • Flexible Distribution: Provides configurable build outputs for different runtimes and distribution methods.

  3. Overview of Rslib for library development

    Rslib is a library development tool based on Rspack and Rsbuild, developed by the ByteDance Web Infra Team. It is designed to unify library building with application building configurations, allowing developers to reuse the Rspack/Rsbuild ecosystem while addressing common library-specific pain points such as multi-format output, declaration file bundling, and style processing.

  5. Overview of the Rstack JavaScript toolchain

    Rstack is a fast, unified JavaScript toolchain designed for developers and AI agents. It consists of several Rust-based tools aimed at improving build performance and developer experience:

  6. Understand Rslib configuration structure

    Rslib configuration is divided into two types of options:

    1. Lib configurations: Define library outputs, including output formats, structures, and syntax targets.
    2. Rsbuild configurations: Control underlying compilation and build behavior, such as module resolution and source processing.

    The lib field is an optional array of objects. Each object represents a specific output. Configurations placed inside a lib item apply only to that output, while configurations placed outside the lib field are top-level and shared across all outputs. Rslib merges top-level configurations with each lib item.

    export default {
  // Top-level: shared across all outputs
  syntax: 'es2021',
  lib: [
    {
      format: 'esm',
      // This output inherits syntax: 'es2021'
    },
    {
      format: 'cjs',
      syntax: 'es2020', // Overrides top-level for this output only
    },
  ],
};

  7. Default third-party dependency handling in Rslib

    By default, Rslib does not bundle third-party dependencies listed under dependencies, optionalDependencies, and peerDependencies in package.json when generating CJS or ESM outputs. This reduces the package size since these dependencies are expected to be installed by the end-user. To force a dependency to be bundled, move it from dependencies to devDependencies.

  8. Configure basic executable generation with experiments.exe

    Setting experiments.exe to true enables executable generation using the current host's platform, architecture, and Node.js version as the template. The executable is output to the current JavaScript output directory.
    export default {
  lib: [
    {
      experiments: {
        exe: true,
      },
    },
  ],
};

  11. Configure Node.js SEA options via experiments.exe.seaOptions

    The seaOptions object is passed directly to the Node.js SEA configuration.

    Constraints:

    • useSnapshot cannot be used with format: 'esm'.
    • If a target differs from the host platform/architecture, Rslib automatically disables useSnapshot and useCodeCache for compatibility.

    Available Options:

    • disableExperimentalSEAWarning (boolean, default: true)
    • useSnapshot (boolean, default: false)
    • useCodeCache (boolean, default: false)
    • execArgv (string[])
    • execArgvExtension ('none' | 'env' | 'cli', default: 'env')
    • assets (Record<string, string>)
    export default {
  lib: [
    {
      experiments: {
        exe: {
          seaOptions: {
            useCodeCache: true,
            execArgv: ['--no-warnings'],
          },
        },
      },
    },
  ],
};

  12. Use Lightning CSS for transformation

    Rslib uses Rspack's built-in lightningcss-loader to transform CSS. It automatically reads the project's syntax configuration to convert modern CSS features into syntax compatible with the target browsers.