DOCSEARCHbyAlgolia
Submit Docs

Rslib

website·Indexed 33 days ago

https://rslib.rs

A library development tool based on Rsbuild that provides a simple way to create JavaScript libraries. It supports multiple targets including Browser and Node.js, and offers first-class integration for React, Vue, Svelte, Solid, and ReactLynx. Rslib features built-in support for TypeScript, CSS, WebAssembly, and Module Federation, with flexible output formats such as ESM, CJS, and UMD.

Tokens
48.9K
Snippets
261
Records
393
Agent score
70%

What's inside Rslib

  1. 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 support to reduce redundant runtime code and improve tree-shaking for consumers.
    • Performance: Uses Rust-based tools like Rspack, 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 tailored to different runtimes and distribution methods.

  2. Overview of the Rstack JavaScript toolchain

    Rstack is a fast, unified JavaScript toolchain designed for developers and agents. It consists of several high-performance, Rust-based tools:

    • Rspack: A fast Rust-based bundler for the web with a modernized webpack API.
    • Rsbuild: A fast, extensible build tool for modern web development powered by Rspack.
    • Rslib: An Rsbuild-based library development tool for creating libraries and UI components.
    • Rspress: An Rsbuild-based static site generator for creating documentation sites.
    • Rsdoctor: An AI-friendly build analyzer that makes the build process transparent.
    • Rstest: A JavaScript testing framework powered by Rspack with a Jest-compatible API.
    • Rslint: A high-performance, ESLint-compatible linter for JavaScript and TypeScript.

  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 provide a unified toolchain for creating JavaScript and UI component libraries, bridging the gap between application bundling (typically webpack/Rspack) and library bundling (typically Rollup/esbuild). It leverages a Rust-based bundler for high performance and allows developers to reuse Rspack and Rsbuild plugins and configurations.

  4. Overview of Rslib library development tool

    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 share configurations and plugins between applications and libraries. It provides a unified pipeline for compiling JavaScript, transforming framework syntax, generating declarations, and processing static assets.

  6. Understand Rslib configuration structure

    Rslib configuration is split into two types of options:

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

    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. Configurations placed outside the lib field are top-level and shared across all outputs. Rslib merges top-level configurations with each lib item based on Rsbuild's merge rules.

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

  7. Build a Vue component library with Rslib

    Rslib supports building Vue component libraries. Note that only Vue 3 is supported; Vue 2 is not. Because Vue's declaration files are generated by vue-tsc, Rslib's specific DTS configuration options (such as lib.dts, lib.redirect.dts, lib.banner.dts, and lib.footer.dts) are not effective in Vue projects.

  8. 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.

  9. Module Federation (MF) output format

    The MF format implements Module Federation, an architectural pattern for decomposing JavaScript applications into micro-frontends, allowing the sharing of code and resources between multiple applications.

  10. Choose between bundle and bundleless output modes in Rslib

    Rslib provides two primary output strategies for build artifacts:

    1. Bundle (Default): Packages build outputs into a single file or multiple files based on a code splitting strategy. This reduces artifact size, pre-bundles dependencies to speed up downstream application builds, and can increase security.
    2. Bundleless: Compiles each source file separately without bundling them together. This maintains the original file structure, which is more conducive to debugging and tree shaking. It is essentially a code transformation process for source files.

  11. Understand Rslib build modes and optimization behavior

    Rslib determines build and optimization behavior based on the Rsbuild mode configuration, which is independent of NODE_ENV:

    • rslib and rslib --watch: Use 'production' mode. Watch mode adds file watching and rebuilds but maintains production optimizations.
    • rslib mf-dev: Uses 'development' mode for the Module Federation (MF) development server.

    Example: Running NODE_ENV=development rslib will still result in a build with mode: 'production'.

  12. Emit TypeScript declaration files with rsbuild-plugin-dts

    Use the rsbuild-plugin-dts plugin within an Rsbuild configuration to support the emission of TypeScript declaration (.d.ts) files.