Skip to content

Commit

Permalink
chore: update
Browse files Browse the repository at this point in the history
  • Loading branch information
SoonIter committed Dec 12, 2024
1 parent 972876d commit c667148
Show file tree
Hide file tree
Showing 7 changed files with 34 additions and 34 deletions.
2 changes: 1 addition & 1 deletion website/docs/en/guide/advanced/dts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ TypeScript Declaration Files (DTS) provide type information for JavaScript code.
2. **Code Completion**: Enhance code editor features like autocomplete and code navigation.
3. **Documentation Generation**: Generate documentation for JavaScript code, providing better developer experience.
4. **IDE Support**: Improve the developer experience in IDEs like Visual Studio Code, WebStorm, and others.
5. **Library Consumption**: Make it easier for other developers to use and understand your library.
5. **Library Consumption**: Make it easier for users to use and understand your library.

## What are Bundle DTS and Bundleless DTS

Expand Down
8 changes: 4 additions & 4 deletions website/docs/zh/guide/advanced/dts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ TypeScript 声明文件 (DTS) 提供 JavaScript 代码的类型信息。 DTS 文
2. **代码补全**: 增强代码编辑器功能,例如自动完成和代码导航。
3. **文档生成**: 生成 JavaScript 代码文档,提供更好的开发体验。
4. **IDE 支持**: 改善 Visual Studio Code、WebStorm 等 IDE 中的开发人员体验.
5. **库消费**: 让其他开发人员更容易使用和理解您的库
5. **库消费**: 让其他使用者更容易使用和理解该库

## 什么是 Bundle DTS 和 Bundleless DTS

Expand All @@ -29,7 +29,7 @@ Bundle DTS 涉及将多个 TypeScript 声明文件 bundle 到一个声明文件

### Bundleless DTS

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

- **优势:**

Expand All @@ -44,11 +44,11 @@ Bundleless 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,你可以
如果你想生成 Bundleless DTS,可以

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

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

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

Expand Down
10 changes: 5 additions & 5 deletions website/docs/zh/guide/advanced/module-federation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { Tab, Tabs } from 'rspress/theme';
- 不同的团队处理同一应用程序的不同部分,而无需重新编译整个应用程序。
- 运行时中在应用间动态加载和共享代码。

模块联盟可以帮助您:
模块联盟可以帮助你:

- 减少代码重复
- 提高代码可维护性
Expand Down Expand Up @@ -61,8 +61,8 @@ export default defineConfig({
exposes: {
// 这里添加 expose
},
// 此处无法添加 "remote",因为您可能会在一次构建中构建 "esm" 或 "cjs" 产物。
// 如果您希望 Rslib 包使用远程模块,请参考下面。
// 此处无法添加 "remote",因为你可能会在一次构建中构建 "esm" 或 "cjs" 产物。
// 如果你希望 Rslib 包使用远程模块,请参考下面。
shared: {
react: {
singleton: true,
Expand All @@ -86,7 +86,7 @@ export default defineConfig({

在上面的例子中,我们添加了一个新的 `format: 'mf'` ,它将添加一个额外的 Module Federation 产物,同时还配置了 `cjs``esm` 的格式,它们是不冲突的。

但是,如果您希望此 Rslib Module 同时消费其他生产者,请不要使用构建配置 `remote` 参数,因为在其他格式下,这可能会导致错误,请参考下面使用 Module Federation 运行时的示例
但是,如果你希望此 Rslib Module 同时消费其他生产者,请不要使用构建配置 `remote` 参数,因为在其他格式下,这可能会导致错误,请参考下面使用 Module Federation 运行时的示例

## 开发 MF 远程模块

Expand Down Expand Up @@ -170,7 +170,7 @@ Rslib 支持使用 Storybook 开发 Module Federation Rslib 项目。

#### 2. 创建 Storybook 配置

首先,在 Rslib 项目中配置 Storybook。您可以参考 [Storybook 章节](/guide/advanced/storybook)来了解如何执行此操作。在本章中,我们将使用 React 框架作为示例。
首先,在 Rslib 项目中配置 Storybook。你可以参考 [Storybook 章节](/guide/advanced/storybook)来了解如何执行此操作。在本章中,我们将使用 React 框架作为示例。

1. 安装以下 Storybook addon,让 Storybook 与 Rslib Module Federation 一起使用:

Expand Down
6 changes: 3 additions & 3 deletions website/docs/zh/guide/solution/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@

## Browser Target

开发在浏览器中运行的库时,可以将其打包为 [ESM](/guide/basic/output-format#esm--cjs)[CJS](/guide/basic/output-format#esm--cjs) 格式,用于与 app 的 bundler 集成。将包 [conditional-exports](https://nodejs.org/api/packages.html#conditional-exports) 配置为 ESM 输出可以更好地进行树摇动。此外,您可以创建 [UMD](/guide/basic/output-format#umd) 格式输出以供浏览器直接使用,甚至可以生成 [Module Federation](/guide/advanced/module-federation) 格式以供其他应用程序动态加载。根据目标浏览器支持配置[Browserslist](https://rsbuild.dev/guide/advanced/browserslist)以确定输出的降级语法,或添加[polyfill](/guide/advanced/output-compatibility) API 兼容性。
开发在浏览器中运行的库时,可以将其打包为 [ESM](/guide/basic/output-format#esm--cjs)[CJS](/guide/basic/output-format#esm--cjs) 格式,用于与 app 的 bundler 集成。将包 [conditional-exports](https://nodejs.org/api/packages.html#conditional-exports) 配置为 ESM 输出可以更好地进行树摇动。此外,你可以创建 [UMD](/guide/basic/output-format#umd) 格式输出以供浏览器直接使用,甚至可以生成 [Module Federation](/guide/advanced/module-federation) 格式以供其他应用程序动态加载。根据目标浏览器支持配置[Browserslist](https://rsbuild.dev/guide/advanced/browserslist)以确定输出的降级语法,或添加[polyfill](/guide/advanced/output-compatibility) API 兼容性。

发布到 npm 时,你可以选择不压缩代码或[压缩代码](/config/rsbuild/output#outputminify),同时提供[sourcemap](/config/rsbuild/output#outputsourcema) 以增强库使用者的调试体验。样式上,可以使用 [CSS](/guide/advanced/css)[CSS 预处理器](/guide/advanced/css#preprocessors),如 Sass、Less 或 Stylus 等,或使用 [PostCSS](/guide/advanced/css#postcss) 用于 CSS 后处理。 [Tailwind CSS](/guide/advanced/css#tailwind-css) 等工具也可以帮助您构建样式。或使用 [CSS 模块](/guide/advanced/css#css-modules)
发布到 npm 时,你可以选择不压缩代码或[压缩代码](/config/rsbuild/output#outputminify),同时提供[sourcemap](/config/rsbuild/output#outputsourcema) 以增强库使用者的调试体验。样式上,可以使用 [CSS](/guide/advanced/css)[CSS 预处理器](/guide/advanced/css#preprocessors),如 Sass、Less 或 Stylus 等,或使用 [PostCSS](/guide/advanced/css#postcss) 用于 CSS 后处理。 [Tailwind CSS](/guide/advanced/css#tailwind-css) 等工具也可以帮助你构建样式。或使用 [CSS 模块](/guide/advanced/css#css-modules)

在资源管理方面,Rslib 处理代码中使用的[静态资源](/guide/advanced/assets),例如 SVG 和 PNG 文件。您还可以构建[React](/guide/solution/react)[Preact](https://github.com/web-infra-dev/rslib/tree/main/examples/preact-component-的组件库Bundle-false) 或其他框架,使用 [Storybook](/guide/advanced/storybook) 进行 UI 组件开发和测试。
在资源管理方面,Rslib 处理代码中使用的[静态资源](/guide/advanced/assets),例如 SVG 和 PNG 文件。你还可以构建[React](/guide/solution/react)[Preact](https://github.com/web-infra-dev/rslib/tree/main/examples/preact-component-的组件库Bundle-false) 或其他框架,使用 [Storybook](/guide/advanced/storybook) 进行 UI 组件开发和测试。

参考本章的解决方案,了解如何使用 Rslib 开发一个在浏览器中使用的库,并。

Expand Down
4 changes: 2 additions & 2 deletions website/docs/zh/guide/solution/nodejs.mdx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# Node.js

在本文档中,您将学习如何使用 Rslib 构建 Node.js 库。
在本文档中,你将学习如何使用 Rslib 构建 Node.js 库。

## Create Node.js Project

您可以使用 `create-rslib` 使用 Rslib + Node.js 创建项目。只需执行以下命令:
你可以使用 `create-rslib` 使用 Rslib + Node.js 创建项目。只需执行以下命令:

import { PackageManagerTabs } from '@theme';

Expand Down
4 changes: 2 additions & 2 deletions website/docs/zh/guide/solution/react.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# React

在本文档中,您将学习如何使用 Rslib 构建 React 组件库。
在本文档中,你将学习如何使用 Rslib 构建 React 组件库。

## 创建 React 项目

Expand All @@ -23,7 +23,7 @@ import { PackageManagerTabs } from '@theme';

开发 React 组件,需要设置 [target](/config/rsbuild/output#outputtarget)`"web"``rslib.config.ts` 中。 这一点至关重要,因为 Rslib 默认将 `target` 设置为 `"node"`,这与 Rsbuild 的 target 默认值不同。

要编译 React(JSX 和 TSX),您需要注册 Rsbuild [React 插件](https://rsbuild.dev/plugins/list/plugin-react)。该插件将自动添加 React 构建所需的配置。
要编译 React(JSX 和 TSX),你需要注册 Rsbuild [React 插件](https://rsbuild.dev/plugins/list/plugin-react)。该插件将自动添加 React 构建所需的配置。

例如,在 `rslib.config.ts` 中注册:

Expand Down
34 changes: 17 additions & 17 deletions website/docs/zh/guide/start/quick-start.mdx
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
# 快速上手

## 初始化环境
## 环境准备

开始之前,你需要先安装 [Node.js](https://nodejs.org/) >= 16 版本,建议使用 Node.js LTS 版本。
开始之前,需要先安装 [Node.js](https://nodejs.org/) >= 16 版本,推荐使用 Node.js LTS 版本。

使用以下命令检查当前的 Node.js 版本:
通过以下命令检查当前的 Node.js 版本:

```bash
node -v
```

如果当前环境没有安装 Node.js,或者安装的版本太低,可以使用 [nvm](https://github.com/nvm-sh/nvm)[fnm](https://github.com/nvm-sh/nvm)[fnm](https:///github.com/Schniz/fnm)进行安装
如果你的环境中尚未安装 Node.js,或是版本太低,可以通过 [nvm](https://github.com/nvm-sh/nvm)[fnm](https://github.com/nvm-sh/nvm)[fnm](https:///github.com/Schniz/fnm) 安装

以下是如何通过 nvm 安装的示例
下面是通过 nvm 安装的例子

```bash
# 安装 Node.js LTS
Expand All @@ -23,7 +23,7 @@ nvm use --lts

## 创建一个 Rslib 项目

您可以使用 [`create-rslib`](https://www.npmjs.com/package/create-rslib) 创建一个新的 Rslib 项目。运行以下命令:
你可以使用 [`create-rslib`](https://www.npmjs.com/package/create-rslib) 创建一个 Rslib 项目。运行以下命令:

import { PackageManagerTabs } from '@theme';

Expand All @@ -36,7 +36,7 @@ import { PackageManagerTabs } from '@theme';
}}
/>

然后按照提示完成操作
然后按照提示操作即可

### 模板

Expand All @@ -56,9 +56,9 @@ import { PackageManagerTabs } from '@theme';

### 开发工具

`create-rslib` 可以帮助你设置一些常用的开发工具,包括 [Vitest](https://vitest.dev/)[Storybook](https://storybook.js.org/)您可以使用方向键和空格键进行选择。如果您不需要这些工具,只需按 Enter 跳过即可。
`create-rslib` 可以帮助你设置一些常用的开发工具,包括 [Vitest](https://vitest.dev/)[Storybook](https://storybook.js.org/)你可以使用方向键和空格键进行选择。如果你不需要这些工具,只需按 Enter 跳过即可。

- Vitest适用于所有模板,它将根据模板的选择进行调整。
- Vitest 适用于所有模板,它将根据模板的选择进行调整。
- Storybook 可用于 Web 目标模板 (React),它将根据模板的选择进行调整。

```text
Expand All @@ -70,7 +70,7 @@ import { PackageManagerTabs } from '@theme';

### 可选工具

`create-rslib` 可以帮助您设置一些常用的格式化程序和 linter 工具,包括 [Biome](https://biomejs.dev/)[ESLint](https://eslint.org/)[prettier](https://prettier.io/)您可以使用箭头键和空格键进行选择。如果您不需要这些工具,只需按 Enter 跳过即可。
`create-rslib` 可以帮助你设置一些常用的格式化程序和 linter 工具,包括 [Biome](https://biomejs.dev/)[ESLint](https://eslint.org/)[prettier](https://prettier.io/)你可以使用箭头键和空格键进行选择。如果你不需要这些工具,只需按 Enter 跳过即可。

```text
◆ Select additional tools (Use <space> to select, <enter> to continue)
Expand All @@ -81,12 +81,12 @@ import { PackageManagerTabs } from '@theme';
```

:::tip
Biome 提供与 ESLint 和 Prettier 类似的 linting 和格式化功能。如果您选择 Biome,通常也不需要选择 ESLint 或 Prettier。
Biome 提供与 ESLint 和 Prettier 类似的 linting 和格式化功能。如果你选择 Biome,通常也不需要选择 ESLint 或 Prettier。
:::

### 当前目录

如果需要在当前目录下创建项目,可以将目标文件夹设置为 "."
如果需要在当前目录下创建项目,可以将目标文件夹设置为 `.`

```text
◆ Create Rslib Project
Expand All @@ -100,18 +100,18 @@ Biome 提供与 ESLint 和 Prettier 类似的 linting 和格式化功能。如

### 快速生成

[create-rslib](https://www.npmjs.com/package/create-rslib) 提供了一些 CLI 标志。通过设置这些 CLI 标志,您可以跳过交互式选择步骤并使用一个命令创建项目
[create-rslib](https://www.npmjs.com/package/create-rslib) 提供了一些 CLI 选项。通过设置这些 CLI 选项,你可以跳过交互式选择步骤并使用一个命令创建项目

例如,要使用一个命令在 "my-project" 目录中创建一个示例项目
比如,一键创建 example 模版项目到 `my-project`

```bash
npx create-rslib --dir my-project --template example

# Using abbreviations
# 使用缩写
npx create-rslib -d my-project -t example
```

All the CLI flags of `create-rslib`:
`create-rslib` 的完整的 CLI 选项如下:

```text
Usage: create-rslib [options]
Expand All @@ -127,7 +127,7 @@ Options:

## 迁移

如果您需要从现有项目迁移到 Rslib,可以参考以下指南:
如果你需要从一个现有项目迁移迁移到 Rsbuild,可以参考以下指南:

- [从 tsup 迁移](/guide/migration/tsup)
- [从 Modern.js Module 迁移](/guide/migration/modernjs-module)

0 comments on commit c667148

Please sign in to comment.