### Build Examples

Source: https://github.com/web-infra-dev/rslib/blob/main/AGENTS.md

Builds only the example projects.

```bash
pnpm build:examples
```

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

### Start Development Server

Source: https://github.com/web-infra-dev/rslib/blob/main/examples/module-federation/mf-host/README.md

Run this command to start the development server for the Module Federation host application.

```bash
pnpm dev

```

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

### Example AI Prompt for Migration

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/start/ai.mdx

After installing the 'migrate-to-rslib' skill, use natural language prompts to initiate the migration process. This example shows a prompt to help migrate a tsc project to Rslib.

```text
Help me migrate this tsc project to Rslib
```

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

### Start Development Server

Source: https://github.com/web-infra-dev/rslib/blob/main/examples/module-federation/mf-remote/README.md

Starts the development server for the Module Federation remote module. Use this for local development and testing.

```bash
pnpm dev
```

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

### Install Dependencies with pnpm

Source: https://github.com/web-infra-dev/rslib/blob/main/AGENTS.md

Installs all project dependencies and builds packages in the postinstall script.

```bash
pnpm install
```

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

### Inspect Command Output Example

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/basic/cli.mdx

Example output when running `npx rslib inspect`, indicating the generated configuration files.

```text
➜ npx rslib inspect

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

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

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

### Start Host App

Source: https://github.com/web-infra-dev/rslib/blob/main/examples/module-federation/README.md

Starts the host application that consumes Module Federation remote modules. Access the app at http://localhost:3000.

```bash
pnpm dev:host
```

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

### Install Dependencies with Rslib

Source: https://github.com/web-infra-dev/rslib/blob/main/packages/create-rslib/template-common/README.md

Use this command to install all necessary project dependencies.

```bash
{{ packageManager }} install
```

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

### Start Remote Module

Source: https://github.com/web-infra-dev/rslib/blob/main/examples/module-federation/README.md

Starts the remote module for Module Federation development. Use this command before starting other related services.

```bash
pnpm dev:remote
```

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

### Start Storybook for MF Development

Source: https://github.com/web-infra-dev/rslib/blob/main/examples/module-federation/README.md

Starts the Storybook environment for developing Module Federation components. Access Storybook at http://localhost:6006.

```bash
pnpm dev:storybook
```

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

### Install Rslib

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/api/start/index.mdx

Install the `@rslib/core` package using your preferred package manager.

```bash
npm install @rslib/core -D
# or
yarn add @rslib/core -D
# or
pnpm add @rslib/core -D
```

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

### Install React Framework Integration

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/storybook.mdx

Installs the specific Storybook framework integration package for React.

```bash
add storybook-react-rsbuild -D
```

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

### Create Rslib Instance

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/api/javascript-api/core.mdx

Instantiate Rslib with basic options. Use this to start a new Rslib build process.

```typescript
import { createRslib } from '@rslib/core';

const rslib = await createRslib({
  config: {
    // Rslib configuration
  },
});
```

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

### Install Optional Skill for Coding Agents

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/start/quick-start.mdx

Install an optional skill, such as 'rslib-best-practices', for coding agents during project creation.

```bash
npx -y create-rslib@latest my-project -t react --skill rslib-best-practices
```

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

### Run Storybook Development Server

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/storybook.mdx

Command to start the Storybook development server for live preview and interaction.

```bash
npx storybook dev
```

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

### Start Storybook Development Server

Source: https://github.com/web-infra-dev/rslib/blob/main/packages/create-rslib/template-storybook/AGENTS.md

Use this command to launch the Storybook development server for interactive component development.

```bash
{{ packageManager }} run storybook
```

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

### Install Project Dependencies

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/start/quick-start.mdx

Install project dependencies using your package manager. This is a necessary step after creating the project.

```bash
npm install
```

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

### Start Rslib MF Module

Source: https://github.com/web-infra-dev/rslib/blob/main/examples/module-federation/README.md

Starts the Rslib Module Federation module. This is typically done after starting the remote module.

```bash
pnpm dev:mf
```

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

### Install @microsoft/api-extractor for Bundling

Source: https://github.com/web-infra-dev/rslib/blob/main/packages/plugin-dts/README.md

Install the API extractor as a development dependency when enabling the bundle option.

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

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

### Develop Module Federation Module

Source: https://github.com/web-infra-dev/rslib/blob/main/examples/module-federation/mf-react-component/README.md

Run this command to start the development server for the Module Federation React component.

```bash
pnpm run dev
```

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

### Button Component Documentation Example

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/rspress.mdx

Example of documenting a Button component in MDX format. Includes JSX previews for different button states (size, background) and an API section using the <API /> component.

```mdx
# Button

## Size

```jsx preview
import { Button } from '@your-scope/your-package';

export default () => <Button size="medium" label="Click me" />;
```

## Background

```jsx preview
import { Button } from '@your-scope/your-package';

export default () => <Button backgroundColor="red" label="Red" />;
```

## API

<API moduleName="Button" />

```

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

### Start Module Federation Dev Server

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/api/javascript-api/instance.mdx

Starts a development server for Module Federation libraries. It serves the application and recompiles on file changes. Optionally specify libraries to serve.

```javascript
// Start dev server
await rslib.startMFDevServer();
```

```javascript
// Start dev server of a specified library id
await rslib.startMFDevServer({
  lib: ['entry1'],
});
```

```javascript
await rslib.startMFDevServer({
  lib: ['entry1'],
});
```

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

### IIFE Format Example with External Dependency

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/basic/output-format.mdx

Demonstrates how an IIFE bundle handles an external dependency ('parent-sdk') by accessing it through `globalThis`.

```javascript
// parent-sdk is marked as externals
// externals: ['parent-sdk']
import { version } from 'parent-sdk';
alert(version);
```

```javascript
(() => {
  const external_parent_sdk_namespaceObject = globalThis['parent-sdk'];
  alert(external_parent_sdk_namespaceObject.version);
})();
```

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

### Install Vue Framework Integration

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/storybook.mdx

Installs the specific Storybook framework integration package for Vue 3.

```bash
add storybook-vue3-rsbuild -D
```

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

### Install Node.js Version

Source: https://github.com/web-infra-dev/rslib/blob/main/CONTRIBUTING.md

Use fnm or nvm to switch to the Node.js version specified in the project's .nvmrc file.

```bash
# with fnm
fnm use
```

```bash
# with nvm
nvm use
```

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

### Bundle Mode Example

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/config/lib/bundle.mdx

This configuration sets the library to bundle mode, resulting in a single output file.

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

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

### Example package.json with dependency

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/third-party-deps.mdx

Illustrates how a third-party dependency like 'foo' is declared in package.json, either under 'dependencies' or 'peerDependencies'.

```json
{
  "dependencies": {
    "foo": "^1.0.0"
  },
  // or
  "peerDependencies": {
    "foo": "^1.0.0"
  }
}
```

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

### Create Rslib Configuration File

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/migration/tsup.mdx

Example of creating a basic Rslib configuration file named 'rslib.config.ts'.

```typescript
import { defineConfig } from '@rslib/core';

export default defineConfig({});

```

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

### Enable and Use pnpm

Source: https://github.com/web-infra-dev/rslib/blob/main/CONTRIBUTING.md

Enable pnpm with corepack and then install project dependencies.

```bash
corepack enable
```

```bash
pnpm install
```

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

### Install Storybook Dependencies (bun)

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/storybook.mdx

Installs core Storybook packages, React renderer, documentation addon, onboarding addon, Rsbuild core, and the Rslib integration addon using bun.

```bash
bun add storybook @storybook/react @storybook/addon-docs @storybook/addon-onboarding storybook-addon-rslib @rsbuild/core -D
```

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

### Example AGENTS.md Content

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/start/ai.mdx

This is an example of the AGENTS.md file content generated by create-rslib. It provides essential project information, commands, and documentation links for AI agents.

```markdown
# AGENTS.md

You are an expert in JavaScript, Rspack, Rsbuild, Rslib, and library development. You write maintainable, performant, and accessible code.

## Commands

- `npm run build` - Build the library for production
- `npm run dev` - Turn on watch mode, watch for changes and rebuild the library

## Docs

- Rslib: https://rslib.rs/llms.txt
- Rsbuild: https://rsbuild.rs/llms.txt
- Rspack: https://rspack.rs/llms.txt

```

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

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

Source: https://github.com/web-infra-dev/rslib/blob/main/packages/plugin-dts/README.md

Install `@typescript/native-preview` as a development dependency to manually enable the `tsgo` feature. Note: This is deprecated.

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

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

### Install Node Polyfill Plugin

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/output-compatibility.mdx

Install the @rsbuild/plugin-node-polyfill package as a development dependency to enable Node.js polyfills in the browser.

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

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

### Install Sass Plugin

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/css.mdx

Command to install the Sass plugin for Rslib. This enables the processing of Sass files.

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

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

### Install Storybook Addons for Module Federation

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/module-federation.mdx

Install the necessary Storybook addons to enable integration with Rslib Module Federation. These addons help Storybook load Rslib configurations and set up Module Federation.

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

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

### Install Module Federation Runtime Dependencies

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/module-federation.mdx

Install the necessary runtime dependencies for consuming Module Federation modules, especially when dealing with multiple Rslib formats.

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

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

### Start Development Watch Mode

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/start/quick-start.mdx

Start watch mode to begin development. This command recompiles your project automatically on file changes.

```bash
npm run dev
```

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

### rslib.startMFDevServer

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/api/javascript-api/instance.mdx

Starts a development server for Module Federation libraries. It serves the application, recompiles on file changes, and provides server details and a close function.

```APIDOC
## rslib.startMFDevServer

### Description
Start the dev server for the Module Federation format library. This method will start a dev server to serve your application and watch for file changes to trigger recompilation.

### Method
```ts
function startMFDevServer(options?: StartMFDevServerOptions): Promise<StartServerResult>;
```

### Parameters
#### Options
- **lib** (string[]) - Optional - Specify library id(s) to start the dev server for.

### Response
Returns a Promise that resolves to `StartServerResult`:
- **urls** (string[]) - The URLs that the server is listening on.
- **port** (number) - The actual port used by the server.
- **server** ({ close: () => Promise<void>; }) - Server instance object with a `close` method.

### Request Example
```ts
// Start dev server
await rslib.startMFDevServer();

// Start dev server of a specified library id
await rslib.startMFDevServer({
  lib: ['entry1'],
});

// Get port and close server
const { port, server } = await rslib.startMFDevServer();
console.log(port); // e.g., 3000
await server.close();
```
```

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

### Install Rslib Agent Skill

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/start/ai.mdx

Use the 'skills' package to install a specific agent skill for Rslib. This enables agents to provide domain-specific knowledge and perform actions related to Rslib.

```bash
skills add rstackjs/agent-skills --skill migrate-to-rslib
```

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

### Transform Import Path Example

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/config/rsbuild/source.mdx

Demonstrates how to transform import paths, similar to babel-plugin-import, for modularly importing subpaths of third-party packages.

```javascript
{
  libraryDirectory: 'lib',
  customName: (name) => {
    if (name === 'lodash') {
      return 'lodash/lodash.js';
    }
    return '';
  },
}
```

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

### TOML Import Example

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/json-files.mdx

Shows how to import a TOML file after registering the TOML plugin. The TOML content is automatically converted to a JavaScript object.

```ts
import example from './example.toml';

console.log(example.hello); // 'world';
console.log(example.foo); // { bar: 'baz' };
```

```toml
hello = "world"

[foo]
bar = "baz"
```

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

### Install Storybook Dependencies (pnpm)

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/storybook.mdx

Installs core Storybook packages, React renderer, documentation addon, onboarding addon, Rsbuild core, and the Rslib integration addon using pnpm.

```bash
pnpm add storybook @storybook/react @storybook/addon-docs @storybook/addon-onboarding storybook-addon-rslib @rsbuild/core -D
```

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

### Install Storybook Dependencies (npm)

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/storybook.mdx

Installs core Storybook packages, React renderer, documentation addon, onboarding addon, Rsbuild core, and the Rslib integration addon using npm.

```bash
npm add storybook @storybook/react @storybook/addon-docs @storybook/addon-onboarding storybook-addon-rslib @rsbuild/core -D
```

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

### Using Node.js Native Loader

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/basic/configure-rslib.mdx

Examples of how to use the Node.js native loader for Rslib configuration. This requires a compatible Node.js version.

```bash
# Node.js >= v22.18.0
# No need to set --experimental-strip-types
npx rslib --config-loader native

# Node.js v22.6.0 - v22.17.1
# Need to set --experimental-strip-types
NODE_OPTIONS="--experimental-strip-types" npx rslib --config-loader native
```

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

### Start Rsbuild Dev Server for Module Federation

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/basic/cli.mdx

Use the `rslib mf-dev` command to start the Rsbuild development server specifically for Module Federation format. This is useful for developing and debugging MF modules within a host application.

```bash
rslib mf-dev
```

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

### Install Storybook Dependencies (yarn)

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/storybook.mdx

Installs core Storybook packages, React renderer, documentation addon, onboarding addon, Rsbuild core, and the Rslib integration addon using yarn.

```bash
yarn add storybook @storybook/react @storybook/addon-docs @storybook/addon-onboarding storybook-addon-rslib @rsbuild/core -D
```

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

### Inspect Command Output for Multiple Formats

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/basic/cli.mdx

Example output when running `npx rslib inspect` in a project with multiple output formats, showing generated configuration files for each format.

```text
➜ npx rslib inspect

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
  - Rslib Config: /project/dist/.rsbuild/rslib.config.mjs
```

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

### TypeScript Example Input

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/config/lib/external-helpers.mdx

This is the input TypeScript code used for demonstrating the `externalHelpers` option.

```typescript
export default class FOO {
  get bar() {
    return;
  }
}
```

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

### StartMFDevServerOptions Type

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/api/javascript-api/types.mdx

The `StartMFDevServerOptions` type defines the parameters for the `rslib.startMFDevServer` method, outlining the configuration options for starting the Micro Frontend development server.

```APIDOC
## StartMFDevServerOptions

### Description
The param type of [rslib.startMFDevServer](/api/javascript-api/instance#rslibstartmfdevserver) method.

### Type Definition
```typescript
import type { StartMFDevServerOptions } from '@rslib/core';
```
```

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

### YAML Import Example

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/json-files.mdx

Shows how to import a YAML file after registering the YAML plugin. The YAML content is automatically converted to a JavaScript object.

```ts
import example from './example.yaml';

console.log(example.hello); // 'world';
console.log(example.foo); // { bar: 'baz' };
```

```yaml
hello: world
foo:
  bar: baz
```

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

### Inspect Rslib Configurations

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/api/javascript-api/instance.mdx

Get the resolved Rslib, Rsbuild, environment-specific Rsbuild, and generated Rspack configurations as strings. This is useful for debugging and understanding the build setup.

```typescript
const { rslibConfig, rsbuildConfig, bundlerConfigs } =
  await rslib.inspectConfig();

console.log(rslibConfig, rsbuildConfig, bundlerConfigs);
```

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

### Run Development Watch Mode for a Specific Package

Source: https://github.com/web-infra-dev/rslib/blob/main/AGENTS.md

Starts the development server in watch mode for a specified package, such as 'packages/core'.

```bash
pnpm -C packages/core dev
```

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

### Access Dev Server Information

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/api/javascript-api/instance.mdx

Retrieves information about the started Module Federation development server, including access URLs and the listening port.

```javascript
const { port } = await rslib.startMFDevServer();
console.log(port); // 3000
```

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

### Add Rsbuild Babel Plugin and Core-js-pure

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/output-compatibility.mdx

Install the Rsbuild Babel plugin and babel-plugin-polyfill-corejs3 for polyfill injection, and core-js-pure as the runtime dependency.

```bash
npm install @rsbuild/plugin-babel babel-plugin-polyfill-corejs3 -D
npm install core-js-pure
```

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

### Install rsbuild-plugin-dts

Source: https://github.com/web-infra-dev/rslib/blob/main/packages/plugin-dts/README.md

Install the plugin as a development dependency using npm.

```bash
npm add rsbuild-plugin-dts -D
```

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

### Build for Production

Source: https://github.com/web-infra-dev/rslib/blob/main/examples/module-federation/mf-host/README.md

Execute this command to build the Module Federation host application for production deployment.

```bash
pnpm build

```

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

### Bundleless Mode Example

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/config/lib/bundle.mdx

This configuration sets the library to bundleless mode, transforming code into multiple output files based on the specified entry glob pattern.

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

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

### Install @rsbuild/plugin-svgr

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/svgr-files.mdx

Install the SVGR plugin for Rslib using your package manager.

```bash
npm install @rsbuild/plugin-svgr -D
# or
yarn add @rsbuild/plugin-svgr -D
# or
pnpm add @rsbuild/plugin-svgr -D
```

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

### Build Module Federation Component

Source: https://github.com/web-infra-dev/rslib/blob/main/examples/module-federation/mf-react-component/README.md

Execute this command to build the project for production deployment.

```bash
pnpm run build
```

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

### Start Module Federation Development Mode

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/module-federation.mdx

Add this script to your package.json to enable Module Federation development mode with Storybook and Hot Module Replacement (HMR).

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

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

### Preview Production Build

Source: https://github.com/web-infra-dev/rslib/blob/main/examples/module-federation/mf-host/README.md

Use this command to preview the production build of the Module Federation host application locally.

```bash
pnpm preview

```

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

### Install TypeScript RC for tsgo

Source: https://github.com/web-infra-dev/rslib/blob/main/packages/plugin-dts/README.md

Install `typescript@rc` as a development dependency to enable the `tsgo` feature.

```bash
npm add typescript@rc -D
```

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

### Serve Module Federation Component

Source: https://github.com/web-infra-dev/rslib/blob/main/examples/module-federation/mf-react-component/README.md

Use this command to serve the built distribution files in a production environment.

```bash
pnpm run serve
```

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

### Build Storybook for Production

Source: https://github.com/web-infra-dev/rslib/blob/main/packages/create-rslib/template-storybook/AGENTS.md

Execute this command to generate a production-ready build of Storybook.

```bash
{{ packageManager }} run build:storybook
```

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

### Create Rslib Project with deno

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/start/quick-start.mdx

Use deno to create a new Rslib project. Follow the prompts to select templates, tools, and skills.

```bash
deno init --npm rslib@latest
```

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

### Rstest Output Example

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/rstest.mdx

This is an example of the output you can expect when running Rstest tests successfully. It shows the number of passed tests and the total duration.

```text
 ✓ test/sum.test.ts (1)

 Test Files 1 passed
      Tests 1 passed
   Duration 71ms (build 20ms, tests 51ms)
```

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

### Run Production Build

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/api/javascript-api/instance.mdx

Initiates a production build. Optionally specify libraries to build or enable watch mode for continuous rebuilding.

```javascript
await rslib.build();
```

```javascript
await rslib.build({
  lib: ['esm'],
});
```

```javascript
await rslib.build({
  lib: ['cjs', 'esm'],
});
```

```javascript
await rslib.build({
  watch: true,
});
```

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

### Create New Project with create-rslib

Source: https://github.com/web-infra-dev/rslib/blob/main/AGENTS.md

Scaffolds a new rslib project using the create-rslib package manager command.

```bash
pnpm dlx create-rslib
```

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

### Create Rslib Project with bun

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/start/quick-start.mdx

Use bun to create a new Rslib project. Follow the prompts to select templates, tools, and skills.

```bash
bun create rslib@latest
```

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

### CommonJS require in ESM Source

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/config/lib/shims.mdx

Example of how CommonJS `require` statements are used in source code.

```javascript
const someModule = require('./someModule');

// dynamic require
const dynamicRequiredModule = require(SOME_VALUE_IN_RUNTIME);
// require.resolve
const someModulePath = require.resolve('./someModule');
// use require as a expression
const lazyFn = (module, requireFn) => {};
lazyFn('./other.js', require);
```

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

### Create Rslib Project with npm

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/start/quick-start.mdx

Use npm to create a new Rslib project. Follow the prompts to select templates, tools, and skills.

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

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

### Disable Default autoExternal Behavior

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/config/lib/auto-external.mdx

Example of disabling the default autoExternal behavior by setting it to false.

```typescript
export default {
  lib: [
    {
      format: 'esm',
      autoExternal: false,
    },
  ],
};
```

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

### Install Rslib Core Dependency

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/migration/tsup.mdx

Command to add the Rslib core package as a development dependency.

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

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

### Create Rslib Project Command-Line Usage

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/start/quick-start.mdx

This displays the usage and available options for the create-rslib command-line tool, including templates, tools, and skills.

```text
Usage: create-rslib [dir] [options]

Options:

  -h, --help            display help for command
  -d, --dir <dir>       create project in specified directory
  -t, --template <tpl>  specify the template to use
  --tools <tool>        add additional tools, comma separated
  --skill <skill>       add optional skills, comma separated
  --override            override files in target directory
  --packageName <name>  specify the package name

Available templates:
  node-dual-js, node-dual-ts, node-esm-js, node-esm-ts, react-js, react-ts, vue-js, vue-ts, svelte-js, svelte-ts

Optional tools:
  react-compiler, eslint, rslint, biome, prettier, rspress, storybook

Optional skills:
  rslib-best-practices, rstest-best-practices, rspress-custom-theme, rspress-description-generator
```

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

### Create Node.js Project with Rslib

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/solution/nodejs.mdx

Use the create-rslib command to scaffold a new Node.js project with Rslib. Select 'Node.js' as the template when prompted.

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

```bash
yarn create rslib
```

```bash
pnpm create rslib@latest
```

```bash
bun create rslib@latest
```

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

### Use Tailwind Utility Classes

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/css.mdx

Example of using Tailwind CSS utility classes in an HTML element.

```html
<h1 class="text-3xl font-bold underline">Hello world!</h1>
```

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

### Build Static Storybook Files

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/storybook.mdx

Command to build static HTML files for deploying Storybook.

```bash
npx storybook build
```

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

### Create Rslib Configuration File (Bundleless Mode)

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/migration/tsc.mdx

Create an `rslib.config.ts` file to configure Rslib. Set `bundle: false` to enable bundleless mode, mimicking `tsc`'s behavior. Configure the output format as needed.

```typescript
import { defineConfig } from '@rslib/core';

export default defineConfig({
  lib: [
    {
      format: 'esm',
      bundle: false,
    },
  ],
});
```

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

### Initialize Git Repository

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/start/quick-start.mdx

Initialize a Git repository in your newly created Rslib project.

```bash
git init
```

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

### Build Rslib Library

Source: https://github.com/web-infra-dev/rslib/blob/main/packages/create-rslib/template-common/README.md

Execute this command to build the Rslib library for production.

```bash
{{ packageManager }} run build
```

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

### Add Rstest to Existing Project

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/rstest.mdx

Install the @rstest/core package as a development dependency to add Rstest to an existing Rslib project.

```bash
npm install -D @rstest/core
```

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

### Import StartMFDevServerOptions Type

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/api/javascript-api/types.mdx

Import the StartMFDevServerOptions type, which is the parameter type for the rslib.startMFDevServer method.

```typescript
import type { StartMFDevServerOptions } from '@rslib/core';
```

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

### Redirect DTS Alias Example

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/config/lib/dts.mdx

Demonstrates how a configured `dts.alias` for 'foo' to './compiled/foo' affects the `index.d.ts` file, changing the export statement.

```diff
- export * from 'foo';
+ export * from './compiled/foo';
```

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

### Create Project with Multiple Tools

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/start/quick-start.mdx

Specify multiple tools like Storybook and Biome when creating a project using the non-interactive mode.

```bash
npx -y create-rslib@latest my-project -t react --tools storybook,biome
```

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

### Create Svelte Project with Rslib

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/solution/svelte.mdx

Use the create-rslib command to scaffold a new Svelte project with Rslib integration. Select the Svelte template when prompted.

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

```bash
yarn create rslib
```

```bash
pnpm create rslib@latest
```

```bash
bun create rslib@latest
```

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

### Customize Externalized Dependency Types

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/config/lib/auto-external.mdx

Example of customizing autoExternal to disable processing for specific dependency types like dependencies and peerDependencies.

```typescript
export default {
  lib: [
    {
      format: 'esm',
      autoExternal: {
        dependencies: false,
        peerDependencies: false,
      },
    },
  ],
};
```

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

### Run Unit Tests

Source: https://github.com/web-infra-dev/rslib/blob/main/CONTRIBUTING.md

Execute unit tests for the project or a single package. Use the -u flag to update snapshots.

```bash
pnpm run test:unit
```

```bash
pnpm run test:unit packages/core
```

```bash
pnpm run test:unit -u
```

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

### Rslib CLI Help Output

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/basic/cli.mdx

This is the typical output when running `npx rslib -h`, showing available commands like `build` and `inspect`, and general usage.

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

Commands:
  build    build the library for production (default if no command is given)
  inspect  inspect the Rsbuild / Rspack configs of Rslib projects
  mf-dev   start Rsbuild dev server of Module Federation format
```

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

### Enable Bundled Declaration Files

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/dts.mdx

Configure Rslib to generate bundled declaration files by enabling `dts.bundle`. This requires installing `@microsoft/api-extractor`.

```typescript
export default {
  lib: [
    {
      // [!code highlight:3]
      dts: {
        bundle: true;
      }
    },
  ],
};
```

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

### Create Rslib Project in Current Directory

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/start/quick-start.mdx

To create a project in the current directory, set the target folder to '.'. This will prompt for confirmation if the directory is not empty.

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

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

### Enable Declaration File Bundling

Source: https://github.com/web-infra-dev/rslib/blob/main/packages/plugin-dts/README.md

Configure the plugin to bundle declaration files by setting the bundle option to true.

```javascript
pluginDts({
  bundle: true,
});
```

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

### Run create-rslib Package Tests

Source: https://github.com/web-infra-dev/rslib/blob/main/packages/create-rslib/AGENTS.md

Execute the unit tests specifically for the create-rslib package. The repository-level `pnpm test:unit` command also covers these tests.

```bash
pnpm -C packages/create-rslib test
```

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

### CSS Modules Example

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/zh/guide/advanced/css.mdx

Demonstrates how to import and use CSS Modules in your TypeScript code. The generated CSS class names are automatically scoped.

```tsx
import styles from './index.module.css';

console.log(styles.title);
```

```css
.title {
  color: red;
}
```

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

### Using a third-party dependency in source code

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/advanced/third-party-deps.mdx

Demonstrates importing and using a third-party dependency ('foo') within the application's source code.

```tsx
import foo from 'foo';
console.info(foo);
```

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

### Add Rslib Core Package

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/start/quick-start.mdx

Install the core Rslib package as a development dependency. This is the first step for projects not migrating from specific tools.

```bash
npm install @rslib/core -D
```

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

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

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

### Run All Tests

Source: https://github.com/web-infra-dev/rslib/blob/main/AGENTS.md

Executes the complete suite of unit, integration, and end-to-end tests.

```bash
pnpm test
```

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

### Register Rsbuild Plugin in Rslib

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/config/rsbuild/plugins.mdx

Demonstrates how to register the `@rsbuild/plugin-react` plugin using the `plugins` option in `rslib.config.ts`. Ensure you have the necessary plugins installed.

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

export default defineConfig({
  plugins: [pluginReact()],
});
```

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

### Integrate Sass Plugin with Rslib

Source: https://github.com/web-infra-dev/rslib/blob/main/website/docs/en/guide/migration/modernjs-module.mdx

Add the Sass plugin to your Rslib configuration to enable Sass support. Install the plugin as a dev dependency.

```js
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()],
});
```

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

### Preview Production Build

Source: https://github.com/web-infra-dev/rslib/blob/main/examples/module-federation/mf-remote/README.md

Locally previews the production build of the Module Federation remote module. This helps in testing the production-ready application before deployment.

```bash
pnpm preview
```