Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
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
4 changes: 2 additions & 2 deletions packages/core/src/types/config/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -132,13 +132,13 @@ export interface LibConfig extends RsbuildConfig {
*/
externalHelpers?: boolean;
/**
* Inject content into the top of each JS, CSS or DTS file.
* Inject content into the top of each JavaScript, CSS or DTS file.
* @defaultValue `{}`
* @see {@link https://lib.rsbuild.dev/config/lib/banner}
*/
banner?: BannerAndFooter;
/**
* Inject content into the bottom of each JS, CSS or DTS file.
* Inject content into the bottom of each JavaScript, CSS or DTS file.
* @defaultValue `{}`
* @see {@link https://lib.rsbuild.dev/config/lib/footer}
*/
Expand Down
2 changes: 1 addition & 1 deletion website/docs/en/config/lib/auto-extension.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ By default that when `autoExtension` is set to `true`, the file extension will b

:::warning

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.
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. using `'./foo'` as a shorthand for `'./foo/index.js'`) in source code.

For example, if `foo` is a folder, you need to rewrite `import * from './foo'` to `import * from './foo/index'`.

Expand Down
8 changes: 4 additions & 4 deletions website/docs/en/config/lib/auto-external.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -28,28 +28,28 @@ Whether to automatically externalize dependencies of different dependency types
- **Type:** `boolean`
- **Default:** `true`

Whether to externalize dependencies of type `dependencies`.
Whether to automatically externalize dependencies of type `dependencies`.

### autoExternal.optionalDependencies

- **Type:** `boolean`
- **Default:** `true`

Whether to externalize dependencies of type `optionalDependencies`.
Whether to automatically externalize dependencies of type `optionalDependencies`.

### autoExternal.peerDependencies

- **Type:** `boolean`
- **Default:** `true`

Whether to externalize dependencies of type `peerDependencies`.
Whether to automatically externalize dependencies of type `peerDependencies`.

### autoExternal.devDependencies

- **Type:** `boolean`
- **Default:** `false`

Whether to bundle dependencies of type `devDependencies`.
Whether to automatically externalize dependencies of type `devDependencies`.

## Default Value

Expand Down
12 changes: 6 additions & 6 deletions website/docs/en/config/lib/banner.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ type Banner = {

- **Default:** `{}`

Inject content into the top of each JS, CSS or DTS file.
Inject content into the top of each JavaScript, CSS or DTS output file.

## Object Type

Expand All @@ -25,25 +25,25 @@ Inject content into the top of each JS, CSS or DTS file.
- **Type:** `string`
- **Default:** `undefined`

Inject content into the top of each JS file.
Inject content into the top of each JavaScript output file.

### banner.css

- **Type:** `string`
- **Default:** `undefined`

Inject content into the top of each CSS file.
Inject content into the top of each CSS output file.

### banner.dts

- **Type:** `string`
- **Default:** `undefined`

Inject content into the top of each DTS file.
Inject content into the top of each DTS output file.

## Notice

The banner content in JS/CSS file is based on the [BannerPlugin](https://rspack.dev/plugins/webpack/banner-plugin) of Rspack. You should notice the following points:
The banner content in JavaScript and CSS file is based on the [BannerPlugin](https://rspack.dev/plugins/webpack/banner-plugin) of Rspack. You should notice the following points:

- `raw: true` is enabled by default, so the banner content will be injected as a raw string instead of wrapping in a comment. So if you want to inject a comment, you should add `/*` and `*/` or other comment syntax by yourself.
- The `stage` option is set to the stage after the JavaScript and CSS files are optimized, thus preventing the banner content from being optimized away.
Expand Down Expand Up @@ -73,6 +73,6 @@ export default {

:::warning

The banner content in DTS files is handled differently from JS/CSS files. It is written directly using the file system API, so setting `BannerPlugin` will not affect it.
The banner content in DTS files is handled differently from JavaScript and CSS output files. It is written directly using the file system API, so setting `BannerPlugin` will not affect it.

:::
4 changes: 2 additions & 2 deletions website/docs/en/config/lib/dts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ Whether to bundle the DTS files.

If you want to [bundle DTS](/guide/advanced/dts#bundle-dts) files, you should:

1. Install `@microsoft/api-extractor` as a development dependency, which is the underlying tool used for bundling DTS files.
1. Install [@microsoft/api-extractor](https://www.npmjs.com/package/@microsoft/api-extractor) as a development dependency, which is the underlying tool used for bundling DTS files.

import { PackageManagerTabs } from '@theme';

Expand All @@ -88,7 +88,7 @@ export default {

::: note

[@microsoft/api-extractor](https://github.com/microsoft/rushstack/tree/main/apps/api-extractor) only supports bundle DTS for single entry. If you want to generate bundle DTS for multiple entries, you can add extra lib configuration in [lib](/config/lib/) field to split multiple entries into multiple lib configurations.
[@microsoft/api-extractor](https://www.npmjs.com/package/@microsoft/api-extractor) only supports bundle DTS for single entry. If you want to generate bundle DTS for multiple entries, you can add extra lib configuration in [lib](/config/lib/) field to split multiple entries into multiple lib configurations.

:::

Expand Down
8 changes: 4 additions & 4 deletions website/docs/en/config/lib/external-helpers.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ When `externalHelpers` set to `true`, the output JavaScript will import helper f

::: note

Make sure to declare the `@swc/helpers` in `dependencies` field of `package.json`.
Make sure to declare and install `@swc/helpers` in `dependencies` field of `package.json`.

:::

Expand Down Expand Up @@ -39,9 +39,9 @@ export default {
};
```

Below is the output JavaScript file:
Below is the output JavaScript file, the highlighted code is the inlined helper functions:

```js title="index.js"
```js title="index.js" {1-18}
function _class_call_check(instance, Constructor) {
if (!(instance instanceof Constructor))
throw new TypeError('Cannot call a class as a function');
Expand Down Expand Up @@ -88,7 +88,7 @@ export default {
};
```

Below is the output JavaScript file:
Below is the output JavaScript file, the highlighted code is importing helper functions:

```js title="index.js" {1-2}
import * as __WEBPACK_EXTERNAL_MODULE__swc_helpers_class_call_check__ from '@swc/helpers/_/_class_call_check';
Expand Down
12 changes: 6 additions & 6 deletions website/docs/en/config/lib/footer.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ type Footer = {

- **Default:** `{}`

Inject content into the bottom of each JS, CSS or DTS file.
Inject content into the bottom of each JavaScript, CSS or DTS file.

## Object Type

Expand All @@ -25,25 +25,25 @@ Inject content into the bottom of each JS, CSS or DTS file.
- **Type:** `string`
- **Default:** `undefined`

Inject content into the bottom of each JS file.
Inject content into the bottom of each JavaScript output file.

### footer.css

- **Type:** `string`
- **Default:** `undefined`

Inject content into the bottom of each CSS file.
Inject content into the bottom of each CSS output file.

### footer.dts

- **Type:** `string`
- **Default:** `undefined`

Inject content into the bottom of each DTS file.
Inject content into the bottom of each DTS output file.

## Notice

The footer content in JS/CSS file is based on the [BannerPlugin](https://rspack.dev/plugins/webpack/banner-plugin) of Rspack. You should notice the following points:
The footer content in JavaScript and CSS file is based on the [BannerPlugin](https://rspack.dev/plugins/webpack/banner-plugin) of Rspack. You should notice the following points:

- `raw: true` is enabled by default, so the footer content will be injected as a raw string instead of wrapping in a comment. So if you want to inject a comment, you should add `/*` and `*/` or other comment syntax by yourself.
- The `stage` option is set to the stage after the JavaScript and CSS files are optimized, thus preventing the footer content from being optimized away.
Expand Down Expand Up @@ -74,6 +74,6 @@ export default {

:::warning

The footer content in DTS files is handled differently from JS/CSS files. It is written directly using the file system API, so setting `BannerPlugin` will not affect it.
The footer content in DTS files is handled differently from JavaScript and CSS files. It is written directly using the file system API, so setting `BannerPlugin` will not affect it.

:::
4 changes: 1 addition & 3 deletions website/docs/en/config/lib/format.mdx
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
# lib.format

- **Type:** `'esm' | 'cjs' | 'umd' | 'mf'`

- **Default:** `undefined`

- **Required**: true

Specify the output format for the generated JavaScript files.
Specify the output format for the generated JavaScript output files.

See [Output Format](/guide/basic/output-format) and [Module Federation](/guide/advanced/module-federation) for more details.

Expand Down
2 changes: 1 addition & 1 deletion website/docs/en/config/lib/shims.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const defaultShims = {
};
```

Configure the shims for CommonJS and ESM output.
Configure the [shims](https://developer.mozilla.org/en-US/docs/Glossary/Shim) for CommonJS and ESM output.

## shims.cjs

Expand Down
4 changes: 2 additions & 2 deletions website/docs/en/config/lib/syntax.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default {

## Set Browserslist Query

You can also set the Browserslist query, such as `last 2 versions`, `> 1%`, `node >= 16`, `chrome >= 80`, etc.
You can also set the [Browserslist query](https://browsersl.ist/), such as `last 2 versions`, `> 1%`, `node >= 16`, `chrome >= 80`, etc.

```ts title="rslib.config.ts"
export default {
Expand All @@ -56,7 +56,7 @@ export default {

## Mix ECMAScript Version and Browserslist Query

You can also mix ECMAScript version and Browserslist query, such as `es2015` and `node 20`. We will turn ECMAScript Version into Browserslist query, and then merge them together.
You can also mix ECMAScript version and Browserslist query, such as `es2015` and `node 20`. Rslib will turn ECMAScript Version into Browserslist query, and then merge them together.

```ts title="rslib.config.ts"
export default {
Expand Down
51 changes: 51 additions & 0 deletions website/docs/zh/config/lib/auto-extension.mdx
Original file line number Diff line number Diff line change
@@ -1 +1,52 @@
# lib.autoExtension

- **类型:** `boolean`
- **默认值:** `true`

是否根据 [`format`](/config/lib/format) 配置项自动设置 JavaScript 输出文件的扩展名。

## 默认扩展名

默认情况下,当 `autoExtension` 设置为 `true` 时,文件扩展名将会是:

- 当 `package.json` 中设置 `type: module` 时,`esm` 格式使用 `.js`,`cjs` 格式使用 `.cjs`。

- 当 `package.json` 中设置 `type: commonjs` 或没有 `type` 字段时,`cjs` 格式使用 `.js`,`esm` 格式使用 `.mjs`。

:::warning

当 [bundle](/config/lib/bundle) 设置为 `false`(即 bundleless 模式)时,你需要在源代码中写完整的路径,而不是省略目录索引(例如,用 `'./foo'` 作为 `'./foo/index.js'` 的简写)。

举例来说,如果 `foo` 是一个文件夹,你需要将 `import * from './foo'` 改写为 `import * from './foo/index'`。

:::

当 `autoExtension` 设置为 `false` 时,文件扩展名将默认为 `.js`。

## 自定义扩展名

你可以将 `autoExtension` 设置为 `false`,并使用 [output.filename](https://rsbuild.dev/zh/config/output/filename) 来自定义 JavaScript 输出文件。

```ts title="rslib.config.ts"
export default defineConfig({
lib: [
{
format: 'cjs',
autoExtension: false,
output: {
filename: {
js: '[name].cjs',
},
},
},
{
format: 'esm',
output: {
filename: {
js: '[name].mjs',
},
},
},
],
});
```
Loading
Loading