Skip to content

Commit b244a96

Browse files
committed
docs: mf dts
1 parent 9e5dd24 commit b244a96

File tree

4 files changed

+398
-5
lines changed

4 files changed

+398
-5
lines changed

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

Lines changed: 3 additions & 3 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 to 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

@@ -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
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/)
46+
47+
如果您想生成 Bundleless 的 DTS,你可以:
48+
49+
- 设置 `dts: true` 或者 `dts: { bundle: false }` 在 Rslib 配置文件。
50+
51+
如果你想生成 Bundle DTS,你可以:
52+
53+
1. 安装 `@microsoft/api-extractor` 作为 `dev`, 这是用于 bundle DTS 文件的底层工具。
54+
55+
import { PackageManagerTabs } from '@theme';
56+
57+
<PackageManagerTabs command="add @microsoft/api-extractor -D" />
58+
59+
2. 设置 `dts: { bundle: true }` 在 Rslib 配置文件中。
60+
61+
::: tip
62+
63+
你可以参考 [lib.dts](/config/lib/dts) 获取更多有关 DTS 配置的详细信息。
64+
65+
:::

0 commit comments

Comments
 (0)