docs(zh): translate /config/lib to Chinese (#526)

Co-authored-by: Timeless0911 <[email protected]>

Author: fi3ework

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

@@ -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}
    */

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

@@ -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'`.
 

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

@@ -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
 

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

@@ -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
 
@@ -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.
@@ -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.
 
 :::

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

@@ -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';
 
@@ -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.
 
 :::
 

website/docs/en/config/lib/external-helpers.mdx

@@ -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`.
 
 :::
 
@@ -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');
@@ -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';

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

@@ -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
 
@@ -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.
@@ -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.
 
 :::

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

@@ -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.
 

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

@@ -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
 

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

@@ -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 {
@@ -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 {

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

@@ -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',
+        },
+      },
+    },
+  ],
+});
+```