Skip to content

Commit

Permalink
docs: mf dts
Browse files Browse the repository at this point in the history
  • Loading branch information
SoonIter committed Dec 12, 2024
1 parent 9e5dd24 commit b244a96
Show file tree
Hide file tree
Showing 4 changed files with 398 additions and 5 deletions.
6 changes: 3 additions & 3 deletions website/docs/en/guide/advanced/module-federation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import { PackageManagerTabs } from '@theme';

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

Then add the plugin to the `rslib.config.ts` file:
Then register the plugin to the `rslib.config.ts` file:

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

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

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.

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

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,
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).
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).
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

```ts
Expand Down
64 changes: 64 additions & 0 deletions website/docs/zh/guide/advanced/dts.mdx
Original file line number Diff line number Diff line change
@@ -1 +1,65 @@
# 类型生成

本章介绍什么是 TypeScript 声明文件(DTS)以及如何在 Rslib 中生成 DTS 文件。

## 什么是 DTS

TypeScript 声明文件 (DTS) 提供 JavaScript 代码的类型信息。 DTS 文件通常具有 `.d.ts` 扩展名。它们允许 TypeScript 编译器理解 JavaScript 代码的类型结构,从而实现以下功能:

1. **类型检查**: 为 JavaScript 代码提供类型信息,帮助开发人员在编译时捕获潜在的类型错误。
2. **代码补全**: 增强代码编辑器功能,例如自动完成和代码导航。
3. **文档生成**: 生成 JavaScript 代码文档,提供更好的开发体验。
4. **IDE 支持**: 改善 Visual Studio Code、WebStorm 等 IDE 中的开发人员体验.
5. **库消费**: 让其他开发人员更容易使用和理解您的库。

## 什么是 Bundle DTS 和 Bundleless DTS

### Bundle DTS

Bundle DTS 涉及将多个 TypeScript 声明文件 bundle 到一个声明文件中。

- **优势:**

- **简化管理**: 简化类型文件的管理和引用。
- **容易分发**: 减少用户使用库时需要处理的文件数量。

- **劣势:**
- **生成复杂**: 在大型项目中,生成和维护单个 bundle 文件可能会变得复杂.
- **调试困难**: 调试类型问题可能不像各个文件单独输出那样直观。

### Bundleless DTS

Bundleless DTS 涉及为库中的每个模块生成单独的声明文件,就像“tsc”一样。

- **优势:**

- **模块化**: 每个模块都有自己的类型定义,使维护和调试更容易。
- **灵活**: 适合大型项目,避免单个文件的复杂性。

- **劣势:**
- **多文件**: 用户在使用该库时可能需要处理多个声明文件。
- **管理复杂**: 可能需要额外的配置才能正确引用所有文件。

## 怎么在 Rslib 中生成 DTS

Rslib 默认使用 [TypeScript Compiler API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API) 生成 Bundleless DTS, [API Extractor](https://api-extractor.com/)

如果您想生成 Bundleless 的 DTS,你可以:

- 设置 `dts: true` 或者 `dts: { bundle: false }` 在 Rslib 配置文件。

如果你想生成 Bundle DTS,你可以:

1. 安装 `@microsoft/api-extractor` 作为 `dev`, 这是用于 bundle DTS 文件的底层工具。

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add @microsoft/api-extractor -D" />

2. 设置 `dts: { bundle: true }` 在 Rslib 配置文件中。

::: tip

你可以参考 [lib.dts](/config/lib/dts) 获取更多有关 DTS 配置的详细信息。

:::
Loading

0 comments on commit b244a96

Please sign in to comment.