Skip to content

Commit aa4c5f3

Browse files
SoonIterTimeless0911
SoonIter
and
Timeless0911
authored
docs(zh): translate other zh docs (#551)
Co-authored-by: Timeless0911 <50201324+Timeless0911@users.noreply.github.com>
1 parent e3f98f1 commit aa4c5f3

16 files changed

Lines changed: 810 additions & 37 deletions

File tree

‎website/docs/en/guide/advanced/dts.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ TypeScript Declaration Files (DTS) provide type information for JavaScript code.
1010
2. **Code Completion**: Enhance code editor features like autocomplete and code navigation.
1111
3. **Documentation Generation**: Generate documentation for JavaScript code, providing better developer experience.
1212
4. **IDE Support**: Improve the developer experience in IDEs like Visual Studio Code, WebStorm, and others.
13-
5. **Library Consumption**: Make it easier for other developers to use and understand your library.
13+
5. **Library Consumption**: Make it easier for users to use and understand your library.
1414

1515
## What are Bundle DTS and Bundleless DTS
1616

@@ -50,7 +50,7 @@ If you want to generate bundleless DTS, you can:
5050

5151
If you want to generate bundle DTS, you can:
5252

53-
1. Install `@microsoft/api-extractor` as a development dependency, which is the underlying tool used for bundling DTS files.
53+
1. Install `@microsoft/api-extractor` as `devDependencies`, which is the underlying tool used for bundling DTS files.
5454

5555
import { PackageManagerTabs } from '@theme';
5656

‎website/docs/en/guide/advanced/module-federation.mdx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { PackageManagerTabs } from '@theme';
2828

2929
<PackageManagerTabs command="add @module-federation/rsbuild-plugin -D" />
3030

31-
Then add the plugin to the `rslib.config.ts` file:
31+
Then register the plugin in the `rslib.config.ts` file:
3232

3333
```ts title='rslib.config.ts' {8-43}
3434
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
@@ -82,7 +82,7 @@ export default defineConfig({
8282
});
8383
```
8484

85-
In this way, we have completed the integration of Rslib Module as a producer. After the construction is completed, we can see that the mf directory has been added to the product, and consumers can directly consume this package
85+
In this way, we have completed the integration of Rslib Module as a producer. After the construction is completed, we can see that the mf directory has been added to the product, and consumers can directly consume this package.
8686

8787
In the above example we added a new `format: 'mf'` , which will help you add an additional Module Federation product, while also configuring the format of `cjs` and `esm` , which does not conflict.
8888

@@ -94,7 +94,7 @@ However, if you want this Rslib Module to consume other producers at the same ti
9494

9595
Rslib support developing Module Federation Rslib project with a host application.
9696

97-
#### 1. Start MF `dev` of library
97+
#### 1. Start `rslib mf dev` command of library
9898

9999
Adding the `dev` command to the `package.json` file:
100100

@@ -152,7 +152,7 @@ Then start the host app with `rsbuild dev`.
152152

153153
Rslib support developing Module Federation Rslib project with Storybook.
154154

155-
#### 1. Start MF `dev` of library
155+
#### 1. Start `rslib mf dev` command of library
156156

157157
Adding the `dev` command to the `package.json` file:
158158

@@ -310,7 +310,7 @@ This ensures that modules can be loaded as expected in multiple formats.
310310
## FAQs
311311

312312
If the Rslib producer is built with build, this means that the `process.env.NODE_ENV` of the producer is `production` . If the consumer is started in dev mode at this time,
313-
Due to the shared loading policy of Module Federation being `version-first` by default, there may be problems loading into different modes of react and react-dom (e.g. react in development mode, react-dom in production mode).
313+
due to the shared loading strategy of Module Federation being `version-first` by default, there may be problems loading into different modes of react and react-dom (e.g. react in development mode, react-dom in production mode).
314314
You can set up [shareStrategy](https://module-federation.io/configure/sharestrategy) at the consumer to solve this problem, but make sure you fully understand this configuration
315315

316316
```ts

‎website/docs/en/guide/solution/index.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ In this chapter, we will introduce how to use Rslib to development libraries for
44

55
## Browser Target
66

7-
Rslib outputs code for the browser by default, so no additional configuration is necessary to get started.
8-
97
When developing a library that runs in the browser, you can package it in both [ESM](/guide/basic/output-format#esm--cjs) and [CJS](/guide/basic/output-format#esm--cjs) formats for integration with application bundlers. Configuring the package [conditional exports](https://nodejs.org/api/packages.html#conditional-exports) to ESM output allows for better tree shaking. Additionally, you can create [UMD](/guide/basic/output-format#umd) format output for direct browser use and even generate [Module Federation ](/guide/advanced/module-federation) formats for dynamic loading by other applications. Configure [Browserslist](https://rsbuild.dev/guide/advanced/browserslist) according to the target browser support to determine the downgrade syntax of the output, or adding [polyfill](/guide/advanced/output-compatibility) for API compatibility.
108

119
When publishing to npm, you can choose not to [minify](/config/rsbuild/output#outputminify) your code or to minify it while providing a [sourcemap](/config/rsbuild/output#outputsourcemap) to enhance the debugging experience for users of your library. For styling, you can use [CSS](/guide/advanced/css), or [CSS pre-processors](/guide/advanced/css#preprocessors) like Sass, Less, or Stylus, or apply [PostCSS](/guide/advanced/css#postcss) for CSS post-processing. Tools like [Tailwind CSS](/guide/advanced/css#tailwind-css) can also help in building your styles. Using [CSS modules](/guide/advanced/css#css-modules) to create CSS modules is another option.
@@ -19,9 +17,9 @@ Refer to the solutions in this chapter to learn how to use Rslib to develop brow
1917

2018
## Node.js Target
2119

22-
By setting set [target](/config/rsbuild/output#outputtarget) to `"node"` to development libraries for Node.js.
20+
Rslib set [target](/config/rsbuild/output#outputtarget) to `"node"` by default to development libraries for Node.js.
2321

24-
You can create a [pure ESM](/guide/basic/output-format#esm--cjs) package or a [dual package](/guide/basic/output-format#esm--cjs) that supports both ESM and CJS as needed. In CJS output, `import.meta.url` will be automatically [shimmed](/config/lib/shims) for compatibility and `__dirname` and `__filename` got an optional ESM shims to ensure proper use across different module system. Node.js's built-in packages will be [externalized by default](/guide/advanced/third-party-deps), simplifying the configuration.
22+
You can create a [pure ESM](/guide/basic/output-format#esm--cjs) package or a [dual package](/guide/basic/output-format#esm--cjs) that supports both ESM and CJS as needed. In CJS output, `import.meta.url` will be automatically [shimmed](/config/lib/shims) for compatibility and `__dirname` and `__filename` got optional ESM shims to ensure proper use across different module system. Node.js's built-in packages will be [externalized by default](/guide/advanced/third-party-deps).
2523

2624
{/* TODO: Clarify default behavior */}
2725
{/* ### Default Behavior */}

‎website/docs/en/guide/solution/nodejs.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export default defineConfig({
5454

5555
Rslib set [target](/config/rsbuild/output#outputtarget) to `"node"` by default, which is different from the default target of Rsbuild.
5656

57-
Rslib adjusts many configurations for Node.js. For example, [output.externals](/config/rsbuild/output#outputtarget) will exclude built-in Node.js modules, and [shims](/config/lib/shims) will add a shim for `import.meta.url` in CJS output by default.
57+
When target is set to `"node"`, Rslib adjusts many configurations for Node.js. For example, [output.externals](/config/rsbuild/output#outputtarget) will exclude built-in Node.js modules, and [shims](/config/lib/shims) will add a shim for `import.meta.url` in CJS output by default.
5858

5959
### Externals
6060

‎website/docs/en/guide/solution/react.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export default defineConfig({
4949

5050
React introduced a [new JSX transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) in version 17. This new transform removes the need to import `React` when using JSX.
5151

52-
By default, Rsbuild uses the new JSX transform, which is `runtime: 'automatic'`. It requires at least React `16.14.0` or higher. The peer dependency for React should be declared as above `16.14.0`.
52+
By default, Rsbuild uses the new JSX transform, which is `runtime: 'automatic'`. It requires at least React `16.14.0` or higher. The `peerDependencies` should be declared as `"react": ">=16.14.0"`.
5353

5454
To change the JSX transform, you can pass the [swcReactOptions](https://rsbuild.dev/plugins/list/plugin-react#swcreactoptionsruntime) option to the React plugin. For example, to use the classic runtime:
5555

@@ -79,7 +79,7 @@ export default defineConfig({
7979
- **Type**: `string`
8080
- **Default**: `'react'`
8181

82-
When `runtime` is `'automatic'`, you can specify the import path of the JSX transform through `importSource`.
82+
When `runtime` is set to `'automatic'`, you can specify the import path of the JSX transform through `importSource`.
8383

8484
For example, when using [Emotion](https://emotion.sh/), you can set `importSource` to `'@emotion/react'`:
8585

‎website/docs/en/guide/start/glossary.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ CJS stands for [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-m
1919

2020
## Bundleless
2121

22-
Bundleless refers to a development approach that avoids the traditional practice of bundling multiple JavaScript / TypeScript files into a single or fewer output files before serving them to the client. Instead, it aims to serve individual modules directly.
22+
Bundleless refers to a development mode that departs from the traditional practice of bundling multiple JavaScript / TypeScript files into a single or few output files that are then served to the app. Instead, it transforms each file.
2323

2424
## DTS
2525

‎website/docs/en/guide/start/quick-start.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ We're working to provide templates for more frameworks (such as Vue).
5656

5757
### Development Tools
5858

59-
`create-rslib` can help you set up some commonly used development linter tools, including [Vitest](https://vitest.dev/), [Storybook](https://storybook.js.org/). You can use the arrow keys and the space bar to make your selections. If you don't need these tools, you can simply press Enter to skip.
59+
`create-rslib` can help you set up some commonly used development tools, including [Vitest](https://vitest.dev/), [Storybook](https://storybook.js.org/). You can use the arrow keys and the space bar to make your selections. If you don't need these tools, you can simply press Enter to skip.
6060

6161
- Vitest is available for all templates, it will be adapted based on the template's selection.
6262
- Storybook is available for web targeted templates (React), it will be adapted based on the template's selection.
@@ -70,7 +70,7 @@ We're working to provide templates for more frameworks (such as Vue).
7070

7171
### Optional Tools
7272

73-
`create-rslib` can help you set up some commonly used formatter and linter tools, including [Biome](https://biomejs.dev/), [ESLint](https://eslint.org/), and [prettier](https://prettier.io/). You can use the arrow keys and the space bar to make your selections. If you don't need these tools, you can simply press Enter to skip.
73+
`create-rslib` can help you set up some commonly used linter and formatter tools, including [Biome](https://biomejs.dev/), [ESLint](https://eslint.org/), and [prettier](https://prettier.io/). You can use the arrow keys and the space bar to make your selections. If you don't need these tools, you can simply press Enter to skip.
7474

7575
```text
7676
◆ Select additional tools (Use <space> to select, <enter> to continue)

‎website/docs/zh/guide/advanced/dts.mdx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,65 @@
11
# 类型生成
2+
3+
本章介绍什么是 TypeScript 声明文件（DTS）以及如何在 Rslib 中生成 DTS 文件。
4+
5+
## 什么是 DTS
6+
7+
TypeScript 声明文件 (DTS) 提供 JavaScript 代码的类型信息。 DTS 文件通常具有 `.d.ts` 扩展名。它们允许 TypeScript 编译器理解 JavaScript 代码的类型结构，从而实现以下功能：
8+
9+
1. **类型检查**: 为 JavaScript 代码提供类型信息，帮助开发人员在编译时捕获潜在的类型错误。
10+
2. **代码补全**: 增强代码编辑器功能，例如自动完成和代码导航。
11+
3. **文档生成**: 生成 JavaScript 代码文档，提供更好的开发体验。
12+
4. **IDE 支持**: 改善 Visual Studio Code、WebStorm 等 IDE 中的开发者体验。
13+
5. **库消费**: 让其他使用者更容易使用和理解该库。
14+
15+
## 什么是 Bundle DTS 和 Bundleless DTS
16+
17+
### Bundle DTS
18+
19+
Bundle DTS 将多个 TypeScript 声明文件 bundle 到一个声明文件中。
20+
21+
- **优势:**
22+
23+
- **简化管理**: 简化类型文件的管理和引用。
24+
- **容易分发**: 减少用户使用库时需要处理的文件数量。
25+
26+
- **劣势:**
27+
- **生成复杂**: 在大型项目中，生成和维护单个 bundle 文件可能会变得复杂。
28+
- **调试困难**: 调试类型问题可能不像各个文件单独输出那样直观。
29+
30+
### Bundleless DTS
31+
32+
Bundleless DTS 为库中的每个模块生成单独的声明文件，就像 `tsc` 一样。
33+
34+
- **优势:**
35+
36+
- **模块化**: 每个模块都有自己的类型定义，使维护和调试更容易。
37+
- **灵活**: 适合大型项目，避免单个文件的复杂性。
38+
39+
- **劣势:**
40+
- **多文件**: 用户在使用该库时可能需要处理多个声明文件。
41+
- **管理复杂**: 可能需要额外的配置才能正确引用所有文件。
42+
43+
## 如何在 Rslib 中生成 DTS
44+
45+
Rslib 默认使用 [TypeScript Compiler API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API) 生成 Bundleless DTS， 用 [API Extractor](https://api-extractor.com/) 生成 Bundle DTS。
46+
47+
如果你想生成 Bundleless DTS，可以：
48+
49+
- 设置 `dts: true` 或者 `dts: { bundle: false }` 在 Rslib 配置文件。
50+
51+
如果你想生成 Bundle DTS，可以：
52+
53+
1. 安装 `@microsoft/api-extractor` 作为 `devDependencies`, 这是用于 bundle DTS 文件的底层工具。
54+
55+
import { PackageManagerTabs } from '@theme';
56+
57+
<PackageManagerTabs command="add @microsoft/api-extractor -D" />
58+
59+
2. 在 Rslib 配置文件中设置 `dts: { bundle: true }`。
60+
61+
::: tip
62+
63+
你可以参考 [lib.dts](/config/lib/dts) 获取更多有关 DTS 配置的详细信息。
64+
65+
:::

0 commit comments

Comments
 (0)