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
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',
},
},
},
],
});
```
114 changes: 114 additions & 0 deletions website/docs/zh/config/lib/auto-external.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,117 @@ overviewHeaders: [2, 3]
---

# lib.autoExternal

- **类型:**

```ts
type AutoExternal =
| boolean
| {
dependencies?: boolean;
optionalDependencies?: boolean;
devDependencies?: boolean;
peerDependencies?: boolean;
};
```

- **默认值:** `true`

是否自动对不同依赖类型的依赖进行外部化处理,不将其打包。

## 对象类型

### autoExternal.dependencies

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

是否自动外部化 `dependencies` 类型的依赖。

### autoExternal.optionalDependencies

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

是否自动外部化 `optionalDependencies` 类型的依赖。

### autoExternal.peerDependencies

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

是否自动外部化 `peerDependencies` 类型的依赖。

### autoExternal.devDependencies

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

是否自动外部化 `devDependencies` 类型的依赖。

## 默认值

`autoExternal` 的默认值为 `true`,意味着以下依赖类型**不会被打包**:

- `dependencies`
- `optionalDependencies`
- `peerDependencies`

而以下依赖类型会被**打包**:

- `devDependencies`

此配置等同于下面的对象类型:

```ts
export default {
lib: [
{
format: 'esm',
autoExternal: {
dependencies: true,
optionalDependencies: true,
peerDependencies: true,
devDependencies: false,
},
},
],
};
```

## 示例

### 自定义外部化的依赖类型

要禁用特定类型依赖的处理,你可以将 `autoExternal` 配置为一个对象,如下所示:

```ts title="rslib.config.ts"
export default {
lib: [
{
format: 'esm',
autoExternal: {
dependencies: false,
peerDependencies: false,
},
},
],
};
```

### 禁用默认行为

如果你想禁用默认行为,可以将 `autoExternal` 设置为 `false`:

```ts title="rslib.config.ts"
export default {
lib: [
{
format: 'esm',
autoExternal: false,
},
],
};
```

关于第三方依赖处理的更多细节,请参考 [处理第三方依赖](/guide/advanced/third-party-deps)。
Loading
Loading