Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions website/docs/en/config/rsbuild.mdx
Original file line number Diff line number Diff line change
@@ -1 +1,17 @@
import { RsbuildDocBadge } from '@components/RsbuildDocBadge';
import { Overview } from 'rspress/theme';

# Rsbuild Configurations

Rslib inherits its configuration from Rsbuild, so you can also configure the <RsbuildDocBadge path="/config" text="config" /> options from Rsbuild. Here are some common configuration items and how to use them in Rslib.

:::tip
To learn more about Rslib configurations, check out [Configure Rslib](/guide/basic/configure-rslib).
:::

## Overview

- [source](/config/rsbuild/source): Configure the source code parsing and compilation options.
- [output](/config/rsbuild/output): Configure the build outputs.
- [tools](/config/rsbuild/tools): Configure the low-level tools.
- [plugins](/config/rsbuild/plugins): Configure Rsbuild plugins.
90 changes: 90 additions & 0 deletions website/docs/en/config/rsbuild/source.mdx
Original file line number Diff line number Diff line change
@@ -1 +1,91 @@
import { Badge } from '@theme';
import { RsbuildDocBadge } from '@components/RsbuildDocBadge';

# source

Configure the source code parsing and compilation options.

## source.aliasStrategy <RsbuildDocBadge path="/config/source/alias-strategy" text="source.aliasStrategy" />

`source.aliasStrategy` is used to control the priority between the `paths` option in `tsconfig.json` and the `alias` option in the bundler.

## source.alias <RsbuildDocBadge path="/config/source/alias" text="source.alias" />

Create aliases to import or require certain modules, same as the [resolve.alias](https://rspack.dev/config/resolve#resolvealias) config of Rspack.

It is important to note that `source.alias` differs from [output.externals](/config/rsbuild/output#externals) in the following ways:

- The `source.alias` is used when bundling target code into the product (when [lib.bundle](/config/lib/bundle) is set to `true`). It allows you to replace the target module you want to include in the output with another module.

For example, if you want to replace `lodash` with `lodash-es` in a bundled CLI application, you can configure it as follows:

```ts title="rslib.config.ts"
export default {
// ...
source: {
alias: {
lodash: 'lodash-es',
},
},
};
```

All `lodash` modules imported in the source code will be mapped to `lodash-es` and be bundled into the output.

- `output.externals` is used to handle alias mapping for externalized modules. Externalized modules are not included in the bundle; instead, they are imported from external sources at runtime.

For example, if you want to replace `react` and `react-dom` with `preact/compat` in the bundle, you can configure it as follows:

```ts title="rslib.config.ts"
export default {
// ...
source: {
alias: {
react: 'preact/compat',
'react-dom': 'preact/compat',
},
},
};
```

Now, the code `import { useState } from 'react'` will be replaced with `import { useState } from 'preact/compat'`.

## source.assetsInclude <RsbuildDocBadge path="/config/source/assets-include" text="source.include" />

Include additional files that should be treated as static assets.

## source.decorators <RsbuildDocBadge path="/config/source/decorators" text="source.decorators" />

Used to configure the decorators syntax.

## source.define <RsbuildDocBadge path="/config/source/define" text="source.define" />

Replaces variables in your code with other values or expressions at compile time. This can be useful for allowing different behavior between development builds and production builds.

## source.entry <RsbuildDocBadge path="/config/source/entry" text="source.entry" />

Used to set the entry modules for building.

:::info
Check out the [lib.bundle](/config/lib/bundle#set-entry) to learn how to set entry for bundle and bundleless project.
:::

## source.exclude <RsbuildDocBadge path="/config/source/exclude" text="source.exclude" />

Specifies JavaScript/TypeScript files that do not need to be compiled. The usage is consistent with [Rule.exclude](https://rspack.dev/config/module#ruleexclude) in Rspack, which supports passing in strings or regular expressions to match the module path.

## source.include <RsbuildDocBadge path="/config/source/include" text="source.include" />

The `source.include` is used to specify additional JavaScript files that need to be compiled.

{/* ## source.preEntry <RsbuildDocBadge path="/config/source/pre-entry" text="source.preEntry" /> */}

{/* Add a script before the entry file of each page. This script will be executed before the page code. It can be used to execute global logics, such as injecting polyfills, setting global styles, etc. */}

## source.transformImport <RsbuildDocBadge path="/config/source/transform-import" text="source.transformImport" />

Transform the import path, which can be used to modularly import the subpath of third-party packages. The functionality is similar to [babel-plugin-import](https://npmjs.com/package/babel-plugin-import).

## source.tsconfigPath <RsbuildDocBadge path="/config/source/tsconfig-path" text="source.tsconfigPath" />

Configure a custom tsconfig.json file path to use, can be a relative or absolute path.
29 changes: 29 additions & 0 deletions website/theme/components/RsbuildDocBadge.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { Badge, Link } from '@theme';
import { useLang } from 'rspress/runtime';

type Props = {
/** Rsbuild doc URL pathname, i18n prefix stripped. */
path: string;
/** Badge text. */
text: string;
/** Badge image alt text. */
alt?: string;
};

export function RsbuildDocBadge({ path, text, alt }: Props) {
const langPrefix = useLang() === 'en' ? '' : '/zh';
const href = `https://rsbuild.dev${langPrefix}${path}`;

return (
<Link href={href} target="_blank" rel="noreferrer">
<Badge type="info">
<img
alt={alt || text}
style={{ height: '18px', display: 'inline', pointerEvents: 'none' }}
src="https://assets.rspack.dev/rsbuild/rsbuild-logo.svg"
/>
{text}
</Badge>
</Link>
);
}
Loading