Skip to content

Commit 8f65812

Browse files
authored
docs: add lib.bundle/format/autoExtension doc (#371)
1 parent 462cb4c commit 8f65812

File tree

10 files changed

+249
-21
lines changed

10 files changed

+249
-21
lines changed

packages/core/src/types/config/index.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -72,18 +72,18 @@ export type Redirect = {
7272
};
7373

7474
export interface LibConfig extends RsbuildConfig {
75-
/**
76-
* Whether to bundle the library.
77-
* @default true
78-
*/
79-
bundle?: boolean;
8075
/**
8176
* Output format for the generated JavaScript files.
8277
* @default undefined
8378
*/
8479
format?: Format;
8580
/**
86-
* Whether to automatically set the file extension based on the `format` option in the JS and DTS output files.
81+
* Whether to bundle the library.
82+
* @default true
83+
*/
84+
bundle?: boolean;
85+
/**
86+
* Whether to automatically set the file extension based on the `format` option in the JavaScript output files.
8787
* @default true
8888
*/
8989
autoExtension?: boolean;

website/docs/en/config/_meta.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@
77
{
88
"type": "dir",
99
"name": "lib",
10-
"label": "Lib"
10+
"label": "Lib Configurations"
1111
},
1212
{
1313
"type": "dir",
1414
"name": "rsbuild",
15-
"label": "Rsbuild Config"
15+
"label": "Rsbuild Configurations"
1616
}
1717
]

website/docs/en/config/lib.mdx

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,30 @@
1-
# Lib
1+
# Lib Configurations
2+
3+
- **Type:**
4+
5+
```ts
6+
interface LibConfig extends RsbuildConfig {
7+
format?: Format;
8+
bundle?: boolean;
9+
autoExtension?: boolean;
10+
autoExternal?: AutoExternal;
11+
redirect?: Redirect;
12+
syntax?: Syntax;
13+
externalHelpers?: boolean;
14+
banner?: BannerAndFooter;
15+
footer?: BannerAndFooter;
16+
shims?: Shims;
17+
dts?: Dts;
18+
umdName?: string;
19+
}
20+
21+
interface RslibConfig extends RsbuildConfig {
22+
lib: LibConfig[];
23+
}
24+
```
25+
26+
- **Default:** `undefined`
27+
28+
- **Required:** `true`
29+
30+
The `lib` configuration is an array of objects, each representing a distinct set of configurations. These include all Rsbuild configurations as well as Rslib-specific configurations, designed to generate different outputs.

website/docs/en/config/lib/_meta.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[
2-
"bundle",
32
"format",
3+
"bundle",
44
"auto-extension",
55
"auto-external",
66
"redirect",

website/docs/en/config/lib/auto-extension.mdx

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,50 @@
33
- **Type:** `boolean`
44
- **Default:** `true`
55

6-
Whether to automatically set the file extension based on the `format` option in the JS and DTS output files.
6+
Whether to automatically set the file extension based on the [`format`](/config/lib/format) option in the JavaScript output files.
7+
8+
## Default Extension
9+
10+
By default that when `autoExtension` is set to `true`, the file extension will be:
11+
12+
- `.js` with `esm` format and `.cjs` with `cjs` format when `type: module` in `package.json`.
13+
14+
- `.js` with `cjs` format and `.mjs` with `esm` format when `type: commonjs` or no `type` field in `package.json`.
15+
16+
:::warning
17+
18+
When [bundle](/config/lib/bundle) is set to `false` that as known as bundleless mode, you should write full path instead of ignoring directory indexes (e.g. `'./foo/index.js'`) in source code.
19+
20+
For example, if `foo` is a folder, you need to rewrite `import * from './foo'` to `import * from './foo/index'`.
21+
22+
:::
23+
24+
When `autoExtension` is set to `false`, the file extension will be default to `.js`.
25+
26+
## Customize Extension
27+
28+
You can set `autoExtension` to `false` and use [output.filename](https://rsbuild.dev/config/output/filename) to customize the JavaScript output files.
29+
30+
```ts title="rslib.config.ts"
31+
export default defineConfig({
32+
lib: [
33+
{
34+
format: 'cjs',
35+
autoExtension: false,
36+
output: {
37+
filename: {
38+
js: '[name].cjs',
39+
},
40+
},
41+
},
42+
{
43+
format: 'esm',
44+
output: {
45+
filename: {
46+
js: '[name].mjs',
47+
},
48+
},
49+
},
50+
],
51+
});
52+
```

website/docs/en/config/lib/bundle.mdx

Lines changed: 143 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,146 @@
33
- **Type:** `boolean`
44
- **Default:** `true`
55

6-
Whether to bundle the library.
6+
Specify whether to bundle the library, which is known as bundle mode when `bundle` is set to `true`, and bundleless mode when set to `false`.
7+
8+
See [bundle / bundleless](/guide/basic/output-structure#bundle--bundleless) for more details.
9+
10+
::: warning
11+
12+
The bundleless mode is not fully supported yet, and some features like [assets](/guide/advanced/assets) may not work properly.
13+
14+
:::
15+
16+
## Set Entry
17+
18+
We should specify the entry file for the build.
19+
20+
### bundle: true
21+
22+
When `bundle` is set to `true`, the entry should be set to the entry file. The default entry is `src/index.(ts|js|tsx|jsx|mjs|cjs)`. You should make sure that the entry file exists, or customize entry through the [source.entry](https://rsbuild.dev/config/source/entry) configuration.
23+
24+
```ts title="rslib.config.ts"
25+
export default {
26+
lib: [
27+
{
28+
format: 'cjs',
29+
bundle: true,
30+
},
31+
],
32+
source: {
33+
entry: {
34+
index: './foo/index.ts',
35+
},
36+
},
37+
};
38+
```
39+
40+
### bundle: false
41+
42+
When `bundle` is set to `false`, the entry should be set a [glob pattern](https://github.com/micromatch/picomatch#globbing-features) to include all the files.
43+
44+
```ts title="rslib.config.ts"
45+
export default {
46+
lib: [
47+
{
48+
format: 'cjs',
49+
bundle: false,
50+
},
51+
],
52+
source: {
53+
entry: {
54+
index: './src/**',
55+
},
56+
},
57+
};
58+
```
59+
60+
You can also use with an exclamation mark to exclude some files.
61+
62+
```ts title="rslib.config.ts"
63+
export default {
64+
lib: [
65+
{
66+
format: 'cjs',
67+
bundle: false,
68+
},
69+
],
70+
source: {
71+
entry: {
72+
index: ['./src/**', '!**/foo.*'],
73+
},
74+
},
75+
};
76+
```
77+
78+
## Example
79+
80+
For below file structure of source code:
81+
82+
```
83+
.
84+
├── src
85+
│ ├── index.ts
86+
│ ├── foo.ts
87+
│ └── bar.ts
88+
└── package.json
89+
```
90+
91+
### bundle: true
92+
93+
```ts title="rslib.config.ts"
94+
export default defineConfig({
95+
lib: [
96+
{
97+
format: 'cjs',
98+
bundle: true,
99+
},
100+
],
101+
});
102+
```
103+
104+
When `bundle` is set to `true`, as known as bundle mode, Rslib will bundle the library into a single file.
105+
106+
```diff
107+
.
108+
+ ├── dist
109+
+ │ └── index.js
110+
├── src
111+
│ ├── index.ts
112+
│ ├── foo.ts
113+
│ └── bar.ts
114+
└── package.json
115+
```
116+
117+
### bundle: false
118+
119+
```ts title="rslib.config.ts"
120+
export default defineConfig({
121+
lib: [
122+
{
123+
format: 'cjs',
124+
bundle: false,
125+
},
126+
],
127+
source: {
128+
entry: {
129+
index: ['./src/**'],
130+
},
131+
},
132+
});
133+
```
134+
135+
When `bundle` is set to `false`, as known as bundleless mode, Rslib will only transform the code into multiple files.
136+
137+
```diff
138+
.
139+
+ ├── dist
140+
+ │ ├── index.js
141+
+ │ ├── foo.js
142+
+ │ └── bar.js
143+
├── src
144+
│ ├── index.ts
145+
│ ├── foo.ts
146+
│ └── bar.ts
147+
└── package.json
148+
```
Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
# lib.format
22

3-
- **Type:** `string`
3+
- **Type:** `'esm' | 'cjs' | 'umd' | 'mf'`
4+
45
- **Default:** `undefined`
56

6-
Output format for the generated JavaScript files.
7+
- **Required**: true
8+
9+
Specify the output format for the generated JavaScript files.
10+
11+
See [Output Format](/guide/basic/output-format) and [Module Federation](/guide/advanced/module-federation) for more details.
12+
13+
::: note
14+
15+
The `umd` format only works when [bundle](/config/lib/bundle) is set to `true`.
16+
17+
:::

website/docs/en/config/rsbuild.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
# Rsbuild Configuration
1+
# Rsbuild Configurations

website/docs/en/guide/basic/configure-rslib.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,9 +82,9 @@ export default {
8282

8383
The configuration file exports a default object that includes a `lib` array and shared Rsbuild configuration options. You can find detailed descriptions of all configs on the [Configure Overview](/config/) page.
8484

85-
- **[Lib configurations](/config/lib) (at least one object is required)**: The `lib` array contains multiple objects, each representing a set of independent configurations that will generate different outputs. Each object within the `lib` array can specify unique configurations, which is a superset of Rsbuild
85+
- **[Lib Configurations](/config/lib) (at least one object is required)**: The `lib` array contains multiple objects, each representing a set of independent configurations that will generate different outputs. Each object within the `lib` array can specify unique configurations, which is a superset of Rsbuild
8686
configurations along with Rslib's specific configurations.
87-
- **Shared [Rsbuild configurations](/config/rsbuild) (optional)**: Outside the `lib` array, there are shared Rsbuild configuration options that will be deep merged with independent Rsbuild configuration of each `lib` configuration object.
87+
- **Shared [Rsbuild Configurations](/config/rsbuild) (optional)**: Outside the `lib` array, there are shared Rsbuild configuration options that will be deep merged with independent Rsbuild configuration of each `lib` configuration object.
8888

8989
Rslib generates corresponding Rsbuild [environments](https://rsbuild.dev/guide/advanced/environments) configurations based on the multiple build configurations of different output formats. You can view the final generated configurations through the [configuration debug](#configuration-debug) documentation.
9090

website/docs/en/guide/basic/output-format.mdx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -83,16 +83,16 @@ A detailed answer from StackOverflow: [What is the Universal Module Definition (
8383
8484
### How to build a UMD library?
8585

86-
- Set the `output.format` to `umd` in the Rslib configuration file.
87-
- If the library need to be exported with a name, set `output.umdName` to the name of the UMD library.
86+
- Set the `lib.format` to `umd` in the Rslib configuration file.
87+
- If the library need to be exported with a name, set `lib.umdName` to the name of the UMD library.
8888
- Use `output.externals` to specify the external dependencies that the UMD library depends on, `lib.autoExtension` is enabled by default for UMD.
8989

9090
### Examples
9191

9292
The following Rslib config is an example to build a UMD library.
9393

94-
- `output.format: 'umd'`: instruct Rslib to build in UMD format.
95-
- `output.umdName: 'RslibUmdExample'`: set the export name of the UMD library.
94+
- `lib.format: 'umd'`: instruct Rslib to build in UMD format.
95+
- `lib.umdName: 'RslibUmdExample'`: set the export name of the UMD library.
9696
- `output.externals.react: 'React'`: specify the external dependency `react` could be accessed by `window.React`.
9797
- `runtime: 'classic'`: use the classic runtime of React to support applications that using React version under 18.
9898

0 commit comments

Comments
 (0)