Rslib

https://rslib.rs/
Admin
Rslib is an Rsbuild-based library development tool that enables developers to create JavaScript...
Tokens:106,087
Snippets:410
Trust Score:5.7
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install @rslib/core with bun

Source: https://rslib.rs/zh/guide/start/quick-start

This command installs the `@rslib/core` package as a development dependency using bun. This is useful for integrating Rslib into existing projects or for projects not created with `create-rslib`.

```shell
bun add @rslib/core -D
```

--------------------------------

### Create Rslib Project with bun

Source: https://rslib.rs/zh/guide/start/quick-start

This command initiates the creation of a new Rslib project using bun. It runs the `create-rslib` package, which will guide you through the project setup process, including template selection and tool configuration.

```shell
bun create rslib
```

--------------------------------

### Install @rslib/core with pnpm

Source: https://rslib.rs/zh/guide/start/quick-start

This command installs the `@rslib/core` package as a development dependency using pnpm. This is useful for integrating Rslib into existing projects or for projects not created with `create-rslib`.

```shell
pnpm add @rslib/core -D
```

--------------------------------

### Create Rslib Project with npm

Source: https://rslib.rs/zh/guide/start/quick-start

This command initiates the creation of a new Rslib project using npm. It runs the `create-rslib` package, which will guide you through the project setup process, including template selection and tool configuration.

```shell
npm create rslib@latest
```

--------------------------------

### Create Rslib Project with pnpm

Source: https://rslib.rs/zh/guide/start/quick-start

This command initiates the creation of a new Rslib project using pnpm. It runs the `create-rslib` package, which will guide you through the project setup process, including template selection and tool configuration.

```shell
pnpm create rslib
```

--------------------------------

### Install @rslib/core with npm

Source: https://rslib.rs/zh/guide/start/quick-start

This command installs the `@rslib/core` package as a development dependency using npm. This is useful for integrating Rslib into existing projects or for projects not created with `create-rslib`.

```shell
npm add @rslib/core -D
```

--------------------------------

### Install @rslib/core with yarn

Source: https://rslib.rs/zh/guide/start/quick-start

This command installs the `@rslib/core` package as a development dependency using yarn. This is useful for integrating Rslib into existing projects or for projects not created with `create-rslib`.

```shell
yarn add @rslib/core -D
```

--------------------------------

### Create Rslib Project with Yarn

Source: https://rslib.rs/zh/guide/start/quick-start

This command initiates the creation of a new Rslib project using Yarn. It runs the `create-rslib` package, which will guide you through the project setup process, including template selection and tool configuration.

```shell
yarn create rslib
```

--------------------------------

### Install Rslib Core Package with npm

Source: https://rslib.rs/guide/start/quick-start

This command installs the `@rslib/core` package as a development dependency using npm. This is useful for manually integrating Rslib into existing projects.

```npm
npm add @rslib/core -D
```

--------------------------------

### Quick Rslib Project Creation with CLI Flags

Source: https://rslib.rs/guide/start/quick-start

This example demonstrates how to create an Rslib project quickly using CLI flags, bypassing interactive prompts. It specifies the target directory and the project template.

```Shell
npx create-rslib --dir my-project --template example

# Using abbreviations
npx create-rslib -d my-project -t example
```

--------------------------------

### Quickly Create Rslib Project with CLI Options

Source: https://rslib.rs/zh/guide/start/quick-start

These commands demonstrate how to use CLI options with `create-rslib` to bypass interactive prompts and quickly create a project. The examples show creating a project named `my-project` using the `example` template, with and without using short flags.

```shell
npx create-rslib --dir my-project --template example

# 使用缩写
npx create-rslib -d my-project -t example
```

--------------------------------

### Install and Use Node.js LTS with NVM

Source: https://rslib.rs/guide/start/quick-start

These commands demonstrate how to install the latest Long Term Support (LTS) version of Node.js using Node Version Manager (nvm) and then switch to using it. This ensures you have a compatible Node.js version for Rslib.

```Shell
# Install Node.js LTS
nvm install --lts
# Switch to Node.js LTS
nvm use --lts
```

--------------------------------

### Install Node.js LTS with NVM

Source: https://rslib.rs/zh/guide/start/quick-start

These commands use the Node Version Manager (nvm) to install and switch to the latest Long-Term Support (LTS) version of Node.js. This ensures you have a stable and recommended Node.js environment for Rslib development.

```shell
# Install Node.js LTS
nvm install --lts
# Switch Node.js LTS
nvm use --lts
```

--------------------------------

### Create a New Rslib Project with npm

Source: https://rslib.rs/guide/start/quick-start

This command initiates the creation of a new Rslib project using npm. It will prompt you with questions to configure the project, including template selection and development tools.

```npm
npm create rslib@latest
```

--------------------------------

### Check Node.js Version

Source: https://rslib.rs/guide/start/quick-start

This command checks the currently installed Node.js version on your system. It's a prerequisite for setting up the Rslib environment.

```Shell
node -v
```

--------------------------------

### Install @typescript/native-preview for tsgo

Source: https://rslib.rs/config/lib/dts

Provides the command to install the necessary development dependency, @typescript/native-preview, required to enable the experimental tsgo feature in Rslib.

```bash
npm add @typescript/native-preview -D
```

--------------------------------

### Install Module Federation Rsbuild Plugin

Source: https://rslib.rs/guide/advanced/module-federation

Installs the Module Federation Rsbuild Plugin using npm. This is the first step in integrating Module Federation with Rslib.

```bash
npm add @module-federation/rsbuild-plugin -D
```

--------------------------------

### Install Core-JS-Pure for Runtime

Source: https://rslib.rs/guide/advanced/output-compatibility

Installs the core-js-pure dependency, which is required as the runtime code for polyfilling unsupported functions in low-version browsers.

```bash
npm add core-js-pure
```

--------------------------------

### Check Node.js Version

Source: https://rslib.rs/zh/guide/start/quick-start

This command checks the currently installed Node.js version on your system. It's a prerequisite for using Rslib, which requires Node.js version 18.12.0 or higher.

```shell
node -v
```

--------------------------------

### Install Storybook Addons for Rslib Module Federation

Source: https://rslib.rs/guide/advanced/module-federation

This command installs necessary Storybook addons for integrating Rslib Module Federation. `storybook-addon-rslib` helps load Rslib configurations, and `@module-federation/storybook-addon` sets up Module Federation for Storybook.

```bash
npm add storybook-addon-rslib @module-federation/storybook-addon -D
```

--------------------------------

### Create Rslib Project in Current Directory

Source: https://rslib.rs/guide/start/quick-start

This command sequence shows how to create an Rslib project within the current directory. It includes a prompt for handling existing files if the directory is not empty.

```Shell
◆  Create Rslib Project
│
◇  Project name or path
│  .
│
◇  "." is not empty, please choose:
│  Continue and override files
```

--------------------------------

### Install Storybook Addons for Rslib Module Federation

Source: https://rslib.rs/zh/guide/advanced/module-federation

Installs necessary Storybook addons to integrate Rslib's module federation capabilities, including `storybook-addon-rslib` and `@module-federation/storybook-addon`.

```bash
npm add storybook-addon-rslib @module-federation/storybook-addon -D
```

--------------------------------

### Install and Use Module Federation Runtime

Source: https://rslib.rs/guide/advanced/module-federation

Demonstrates how to install the '@module-federation/enhanced' package and use its runtime functions to consume other Module Federation modules. It includes initializing the runtime with remote configurations and dynamically loading components using React's Suspense and lazy loading.

```bash
npm add @module-federation/enhanced -D
```

```javascript
import { init, loadRemote } from '@module-federation/enhanced/runtime';
import { Suspense, createElement, lazy } from 'react';

init({
  name: 'rslib_provider',
  remotes: [
    {
      name: 'mf_remote',
      entry: 'http://localhost:3002/mf-manifest.json',
    },
  ],
});

export const Counter: React.FC = () => {
  return (
    <div>
      <Suspense fallback={<div>loading</div>}>
        {createElement(
          lazy(
            () =>
              loadRemote('mf_remote') as Promise<{ 
                default: React.FC;
              }>,
          ),
        )}
      </Suspense>
    </div>
  );
};
```

--------------------------------

### Rslib CLI Flags Usage

Source: https://rslib.rs/guide/start/quick-start

This displays the available command-line interface (CLI) flags for the `create-rslib` tool, including options for specifying the directory, template, additional tools, and overriding files.

```Shell
Usage: create-rslib [options]

Options:

  -h, --help       display help for command
  -d, --dir        create project in specified directory
  -t, --template   specify the template to use
  --tools          select additional tools (biome, eslint, prettier)
  --override       override files in target directory
```

--------------------------------

### Rslib CLI Options Usage

Source: https://rslib.rs/zh/guide/start/quick-start

This displays the available command-line interface (CLI) options for the `create-rslib` tool. These options allow for automated project creation by specifying parameters like directory, template, additional tools, and override behavior.

```shell
Usage: create-rslib [options]

Options:

  -h, --help       display help for command
  -d, --dir        create project in specified directory
  -t, --template   specify the template to use
  --tools          select additional tools (biome, eslint, prettier)
  --override       override files in target directory
```

--------------------------------

### Install Rsbuild Node Polyfill Plugin

Source: https://rslib.rs/guide/advanced/output-compatibility

Installs the Rsbuild Node Polyfill plugin, which enables the injection of Node.js core library polyfills into the browser-side environment.

```bash
npm add @rsbuild/plugin-node-polyfill -D
```

--------------------------------

### Create Rslib Project in Current Directory

Source: https://rslib.rs/zh/guide/start/quick-start

This interactive prompt shows how to create an Rslib project in the current directory by setting the project name or path to '.'. It also presents an option to continue and override existing files if the directory is not empty.

```shell
◆  Create Rslib Project
│
◇  Project name or path
│  .
│
◇  "." is not empty, please choose:
│  Continue and override files
```

--------------------------------

### Install Rsbuild Babel Plugin and Polyfill CoreJS3

Source: https://rslib.rs/guide/advanced/output-compatibility

Installs the necessary Babel plugin and core-js3 for injecting polyfill code. This is a prerequisite for configuring browser polyfills in Rslib.

```bash
npm add @rsbuild/plugin-babel babel-plugin-polyfill-corejs3 -D
```

--------------------------------

### Install Rsbuild Module Federation Plugin

Source: https://rslib.rs/zh/guide/advanced/module-federation

This command installs the Rsbuild Plugin for Module Federation as a development dependency. This plugin is essential for enabling Module Federation capabilities within Rsbuild projects.

```bash
npm add @module-federation/rsbuild-plugin -D
```

--------------------------------

### Install Enhanced Module Federation Runtime

Source: https://rslib.rs/zh/guide/advanced/module-federation

This command installs the necessary dependency for using Module Federation runtime features. It is compatible with npm, yarn, pnpm, and bun package managers.

```bash
npm add @module-federation/enhanced -D
```

--------------------------------

### Run Rslib Module Federation Development Mode

Source: https://rslib.rs/zh/guide/advanced/module-federation

Configures the package.json to start Rslib in module federation development mode, enabling HMR and making it consumable by Storybook.

```json
{
  "scripts": {
    "dev": "rslib mf-dev"
  }
}
```

--------------------------------

### Start Rslib Module Federation Development Mode

Source: https://rslib.rs/guide/advanced/module-federation

This snippet shows how to add a 'dev' script to package.json to start Rslib in Module Federation development mode. This enables Hot Module Replacement (HMR) and allows consumption by a host application or Storybook.

```json
{
  "scripts": {
    "dev": "rslib mf-dev"
  }
}
```

--------------------------------

### Using Rslib with Module Federation

Source: https://rslib.rs/zh/blog/introducing-rslib

This example illustrates how to configure Rslib to support Module Federation, a feature that allows dynamic loading of code from different applications or libraries. It shows the integration with Rsbuild plugins for seamless Module Federation setup.

```javascript
import { defineConfig } from '@rsbuild/core';
import { ModuleFederationPlugin } from '@module-federation/enhanced';

export default defineConfig({
  plugins: [
    // Integrate Module Federation plugin
    ModuleFederationPlugin({
      name: 'my-library',
      exposes: {
        './Button': './src/components/Button.tsx',
      },
      // Define shared dependencies
      shared: {
        react: {
          singleton: true,
        },
      },
    }),
  ],
  output: {
    // Configure output for Module Federation
    moduleFederation: {
      // Specify the output format for Module Federation
      // For example, 'esm' or 'commonjs'
      // outputType: 'esm',
    },
  },
});

```

--------------------------------

### Install and Configure TOML Plugin for Rslib

Source: https://rslib.rs/zh/guide/advanced/json-files

Provides instructions on how to install the `@rsbuild/plugin-toml` and configure it within `rslib.config.ts` to enable importing TOML files.

```bash
npm add @rsbuild/plugin-toml -D

```

```javascript
import { pluginToml } from '@rsbuild/plugin-toml';

export default {
  plugins: [pluginToml()],
};

```

--------------------------------

### Create Rslib React Project

Source: https://rslib.rs/zh/guide/solution/react

This command initializes a new Rslib project with React support. You will be prompted to select a template, choose 'React' for React-specific configurations.

```bash
npm create rslib@latest
```

--------------------------------

### Bundleless Mode Mixed Import Example

Source: https://rslib.rs/guide/advanced/svgr-files

Example of importing an SVG to get both its URL and React component in Rslib's bundleless mode.

```JavaScript
import logoUrl, { ReactComponent as Logo } from './logo.svg';

console.log(logoUrl); // -> string
console.log(Logo); // -> React component
```

--------------------------------

### Create Rslib Vue Project

Source: https://rslib.rs/zh/guide/solution/vue

This command initializes a new Rslib project with Vue template support. After running the command, select 'Vue' when prompted for the template.

```bash
npm create rslib@latest
```

--------------------------------

### Create Node.js Project with Rslib

Source: https://rslib.rs/guide/solution/nodejs

Use the `create-rslib` command-line tool to quickly set up a new Node.js project with Rslib. Select the 'Node.js' template when prompted.

```bash
npm create rslib@latest
```

--------------------------------

### Run Storybook Commands

Source: https://rslib.rs/zh/guide/advanced/storybook

Provides commands to run Storybook in different modes. `storybook dev` starts the development server for live preview and interaction, while `storybook build` generates static files for deployment.

```bash
npx storybook dev   // 开发模式
```

```bash
npx storybook build // 构建静态文件
```

--------------------------------

### Rslib Configuration Example

Source: https://rslib.rs/zh/blog/introducing-rslib

This snippet demonstrates a typical Rslib configuration, showcasing how to define output formats, handle TypeScript types, and manage different build modes like bundle and bundleless. It highlights the flexibility and ease of configuration for library development.

```javascript
import { defineConfig } from '@rsbuild/core';

export default defineConfig({
  // Configuration for library development
  plugins: [], // Add Rsbuild plugins as needed
  output: {
    // Define output formats for the library
    format: ['esm', 'cjs'],
    // Configure path for type declaration files
    distPath: {
      typeDeclaration: 'dist/types',
    },
  },
  // Enable bundleless mode if needed
  // bundleless: {
  //   // Configuration for bundleless builds
  // },
  // Other Rsbuild configurations can be applied here
});

```

--------------------------------

### Bundle DTS Files

Source: https://rslib.rs/config/lib/dts

Configures Rslib to bundle TypeScript declaration files by setting `dts.bundle` to `true`. Requires installing `@microsoft/api-extractor`.

```bash
npm add @microsoft/api-extractor -D
```

```typescript
export default {
  lib: [
    {
      format: 'esm',
      dts: {
        bundle: true,
      },
    },
  ],
};
```

--------------------------------

### Rslib Example: Bundle Mode (cjs)

Source: https://rslib.rs/zh/config/lib/bundle

An example Rslib configuration for a CommonJS (cjs) library build in bundle mode. This configuration bundles the library into a single output file.

```typescript
export default defineConfig({
  lib: [
    {
      format: 'cjs',
      bundle: true,
    },
  ],
});
```

--------------------------------

### Generate Bundled Declaration Files in Rslib

Source: https://rslib.rs/guide/advanced/dts

Configure Rslib to generate a single bundled TypeScript declaration file. This requires installing `@microsoft/api-extractor` as a development dependency.

```bash
npm add @microsoft/api-extractor -D
```

```TypeScript
export default {
  lib: [
    {
      dts: {
        bundle: true;
      }
    },
  ],
};
```

--------------------------------

### Configure Rslib for Vue Projects

Source: https://rslib.rs/guide/solution/vue

Configuration example for `rslib.config.ts` to enable Vue development. It sets the output target to 'web' and registers the `rsbuild-plugin-unplugin-vue` plugin for handling Vue single-file components.

```typescript
import { defineConfig } from '@rslib/core';
import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue'; 

export default defineConfig({
  lib: [
    // ...
  ],
  output: {
    target: 'web',
  },
  plugins: [pluginUnpluginVue(/** options here */)],
});
```

--------------------------------

### Rslib CLI Usage and Commands

Source: https://rslib.rs/zh/guide/basic/cli

This output shows the general usage of the Rslib CLI and lists the available commands: 'build' for production builds, 'inspect' for checking Rslib and Rspack configurations, and 'mf-dev' for enabling the Rsbuild development server for Module Federation libraries.

```bash
Usage:
  $ rslib <command> [options]

Commands:
  build    构建用于生产环境的产物
  inspect  检查 Rslib 项目的 Rsbuild 配置和 Rspack 配置
  mf-dev   为 Module Federation 格式的库启用 Rsbuild 开发服务器
```

--------------------------------

### Generate Declaration Files with tsgo in Rslib

Source: https://rslib.rs/guide/advanced/dts

Configure Rslib to use tsgo for generating TypeScript declaration files. This is an experimental feature and requires installing `@typescript/native-preview` and configuring VS Code.

```bash
npm add @typescript/native-preview -D
```

```TypeScript
export default {
  lib: [
    {
      dts: {
        tsgo: true,
      },
    },
  ],
};
```

```JSON
{
  "typescript.experimental.useTsgo": true
}
```

--------------------------------

### Rslib Example: Bundleless Mode (cjs)

Source: https://rslib.rs/zh/config/lib/bundle

An example Rslib configuration for a CommonJS (cjs) library build in bundleless mode. This configuration processes the library code into multiple output files based on the entry points.

```typescript
export default defineConfig({
  lib: [
    {
      format: 'cjs',
      bundle: false,
    },
  ],
  source: {
    entry: {
      index: ['./src/**'],
    },
  },
});
```

--------------------------------

### Create Vue Project with Rslib

Source: https://rslib.rs/guide/solution/vue

Command to create a new project using Rslib and selecting the Vue template.

```bash
npm create rslib@latest
```

--------------------------------

### Rslib Introduction and Repository

Source: https://rslib.rs/blog/introducing-rslib

This snippet introduces Rslib, a library development tool based on Rspack, and provides a link to its GitHub repository. It highlights Rslib's purpose in simplifying library creation and enhancing the development experience.

```Markdown
Repo：https://github.com/web-infra-dev/rslib
```

--------------------------------

### Configure Babel for Polyfills in Rslib

Source: https://rslib.rs/zh/guide/advanced/output-compatibility

This snippet shows how to configure the Babel plugin for core-js3 to inject polyfills for older browsers. It requires installing the Babel plugin and core-js-pure, and setting targets for browser compatibility.

```typescript
import { pluginBabel } from '@rsbuild/plugin-babel'; 
import { defineConfig } from '@rslib/core';

export default defineConfig({
  lib: [
    {
      format: 'esm',
    },
  ],
  plugins: [
    pluginBabel({
      babelLoaderOptions: {
        plugins: [
          [
            require('babel-plugin-polyfill-corejs3'),
            {
              method: 'usage-pure',
              targets: { ie: '10' },
              version: '3.29',
            },
          ],
        ],
      },
    }),
  ],
});
```

--------------------------------

### Configure Rslib for React Projects

Source: https://rslib.rs/guide/migration/modernjs-module

This example illustrates how to configure Rslib for projects using React. It sets the output target to 'web' and integrates the `@rsbuild/plugin-react` plugin. It also includes instructions for installing the plugin.

```typescript
import { defineConfig } from '@rslib/core';
// Quick tip: You can use all Rsbuild plugins here since they are compatible with Rslib
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  //...
  output: {
    target: 'web',
  },
  plugins: [pluginReact()],
});
```

```bash
npm add @rsbuild/plugin-react -D
```

--------------------------------

### Configure Rslib Output Formats (MJS)

Source: https://rslib.rs/zh/guide/basic/configure-rslib

This example demonstrates how to configure Rslib to output library bundles in both ESM and CJS formats using the 'es2021' syntax. It defines the 'lib' array with format and syntax options.

```javascript
export default {
  lib: [
    { format: 'esm', syntax: 'es2021' },
    { format: 'cjs', syntax: 'es2021' },
  ],
};
```

--------------------------------

### Example Library Configuration (CJS & ESM)

Source: https://rslib.rs/guide/basic/configure-rslib

An example illustrating how a library can be configured to support both CommonJS (CJS) and ECMAScript Modules (ESM) formats. This involves setting up configurations for both module systems.

```javascript
Inspect config succeed, open following files to view the content:

  - Rsbuild Config (esm): /project/dist/.rsbuild/rsbuild.config.esm.mjs
  - Rsbuild Config (cjs): /project/dist/.rsbuild/rsbuild.config.cjs.mjs
  - Rspack Config (esm): /project/dist/.rsbuild/rspack.config.esm.mjs
  - Rspack Config (cjs): /project/dist/.rsbuild/rspack.config.cjs.mjs
```

--------------------------------

### Import Remote Module Component in Storybook

Source: https://rslib.rs/guide/advanced/module-federation

This example demonstrates how to import and use a component from a remote Rslib Module Federation module within a Storybook story. Storybook acts as the host application in this scenario.

```typescript
import React from 'react';
// Load your remote module here, Storybook will act as the host app.
import { Counter } from 'rslib-module';

const Component = () => <Counter />;

export default {
  title: 'App Component',
  component: Component,
};

export const Primary = {};
```

--------------------------------

### Configure Rslib for Sass Projects

Source: https://rslib.rs/guide/migration/modernjs-module

This example shows how to configure Rslib for projects utilizing Sass. It integrates the `@rsbuild/plugin-sass` plugin and provides instructions for its installation. It also includes solutions for potential TypeScript and Sass declaration file conflicts.

```typescript
import { defineConfig } from '@rslib/core';
// Quick tip: You can use all Rsbuild plugins here since they are compatible with Rslib
import { pluginSass } from '@rsbuild/plugin-sass';

export default defineConfig({
  //...
  plugins: [pluginSass()],
});
```

```bash
npm add @rsbuild/plugin-sass -D
```

```typescript
declare module '*.scss' {
  const content: { [className: string]: string };
  export default content;
}
```

```typescript
/// <reference types="@rslib/core/types" />
```

--------------------------------

### Handling Styles in Rslib (Sass Example)

Source: https://rslib.rs/zh/blog/introducing-rslib

This example demonstrates how Rslib handles various styling solutions, including Sass. By leveraging Rsbuild's plugin system, developers can integrate preprocessors like Sass directly into their library build process, similar to web application development.

```javascript
import { defineConfig } from '@rsbuild/core';

export default defineConfig({
  plugins: [
    // Add Rsbuild's Sass plugin to handle .scss files
    // '@rsbuild/plugin-sass',
  ],
  output: {
    // Configure how styles are handled in the output
    // For example, extracting CSS into separate files or inlining them
  },
  // You can also configure CSS Modules or other styling solutions
  // css: {
  //   modules: {
  //     // CSS Modules configuration
  //   },
  // },
});

```

--------------------------------

### Configure Rslib with Specific Rsbuild Settings per Format (MJS)

Source: https://rslib.rs/zh/guide/basic/configure-rslib

This example shows how to apply specific Rsbuild configurations to individual library formats. Here, the ESM output targets 'web', while the CJS output inherits the global target 'node'.

```javascript
export default {
  lib: [
    {
      format: 'esm',
      output: {
        target: 'web',
      },
    },
    {
      format: 'cjs',
    },
  ],
  output: {
    target: 'node',
  },
};
```

--------------------------------

### Rslib Default Entry Points for Bundling

Source: https://rslib.rs/zh/config/rsbuild/source

Defines the default entry points for Rslib when in bundle mode. It supports various file extensions like js, ts, tsx, jsx, mjs, and cjs.

```JavaScript
const defaultEntry = {
  // 默认支持其他后缀，如 ts、tsx、jsx、mjs、cjs
  index: 'src/index.js',
};
```
Tokens:
Raw