diff --git a/website/docs/en/guide/advanced/dts.mdx b/website/docs/en/guide/advanced/dts.mdx index d0fa1a9ef..02147e821 100644 --- a/website/docs/en/guide/advanced/dts.mdx +++ b/website/docs/en/guide/advanced/dts.mdx @@ -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 diff --git a/website/docs/zh/guide/advanced/dts.mdx b/website/docs/zh/guide/advanced/dts.mdx index 50aeb27a1..ed8810bee 100644 --- a/website/docs/zh/guide/advanced/dts.mdx +++ b/website/docs/zh/guide/advanced/dts.mdx @@ -10,7 +10,7 @@ TypeScript 声明文件 (DTS) 提供 JavaScript 代码的类型信息。 DTS 文 2. **代码补全**: 增强代码编辑器功能，例如自动完成和代码导航。 3. **文档生成**: 生成 JavaScript 代码文档，提供更好的开发体验。 4. **IDE 支持**: 改善 Visual Studio Code、WebStorm 等 IDE 中的开发人员体验. -5. **库消费**: 让其他开发人员更容易使用和理解您的库。 +5. **库消费**: 让其他使用者更容易使用和理解该库。 ## 什么是 Bundle DTS 和 Bundleless DTS @@ -29,7 +29,7 @@ Bundle DTS 涉及将多个 TypeScript 声明文件 bundle 到一个声明文件 ### Bundleless DTS -Bundleless DTS 涉及为库中的每个模块生成单独的声明文件，就像“tsc”一样。 +Bundleless DTS 涉及为库中的每个模块生成单独的声明文件，就像 `tsc` 一样。 - **优势:** @@ -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 文件的底层工具。 diff --git a/website/docs/zh/guide/advanced/module-federation.mdx b/website/docs/zh/guide/advanced/module-federation.mdx index 8f5c7070c..e5263d991 100644 --- a/website/docs/zh/guide/advanced/module-federation.mdx +++ b/website/docs/zh/guide/advanced/module-federation.mdx @@ -13,7 +13,7 @@ import { Tab, Tabs } from 'rspress/theme'; - 不同的团队处理同一应用程序的不同部分，而无需重新编译整个应用程序。 - 运行时中在应用间动态加载和共享代码。 -模块联盟可以帮助您: +模块联盟可以帮助你: - 减少代码重复 - 提高代码可维护性 @@ -61,8 +61,8 @@ export default defineConfig({ exposes: { // 这里添加 expose }, - // 此处无法添加 "remote"，因为您可能会在一次构建中构建 "esm" 或 "cjs" 产物。 - // 如果您希望 Rslib 包使用远程模块，请参考下面。 + // 此处无法添加 "remote"，因为你可能会在一次构建中构建 "esm" 或 "cjs" 产物。 + // 如果你希望 Rslib 包使用远程模块，请参考下面。 shared: { react: { singleton: true, @@ -86,7 +86,7 @@ export default defineConfig({ 在上面的例子中，我们添加了一个新的 `format: 'mf'` ，它将添加一个额外的 Module Federation 产物，同时还配置了 `cjs` 和 `esm` 的格式，它们是不冲突的。 -但是，如果您希望此 Rslib Module 同时消费其他生产者，请不要使用构建配置 `remote` 参数，因为在其他格式下，这可能会导致错误，请参考下面使用 Module Federation 运行时的示例 +但是，如果你希望此 Rslib Module 同时消费其他生产者，请不要使用构建配置 `remote` 参数，因为在其他格式下，这可能会导致错误，请参考下面使用 Module Federation 运行时的示例 ## 开发 MF 远程模块 @@ -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 一起使用: diff --git a/website/docs/zh/guide/solution/index.mdx b/website/docs/zh/guide/solution/index.mdx index 48610c3a4..2a13cc70b 100644 --- a/website/docs/zh/guide/solution/index.mdx +++ b/website/docs/zh/guide/solution/index.mdx @@ -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 开发一个在浏览器中使用的库，并。 diff --git a/website/docs/zh/guide/solution/nodejs.mdx b/website/docs/zh/guide/solution/nodejs.mdx index c28616511..5c121a8a8 100644 --- a/website/docs/zh/guide/solution/nodejs.mdx +++ b/website/docs/zh/guide/solution/nodejs.mdx @@ -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'; diff --git a/website/docs/zh/guide/solution/react.mdx b/website/docs/zh/guide/solution/react.mdx index e26da9807..c170309cb 100644 --- a/website/docs/zh/guide/solution/react.mdx +++ b/website/docs/zh/guide/solution/react.mdx @@ -1,6 +1,6 @@ # React -在本文档中，您将学习如何使用 Rslib 构建 React 组件库。 +在本文档中，你将学习如何使用 Rslib 构建 React 组件库。 ## 创建 React 项目 @@ -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` 中注册: diff --git a/website/docs/zh/guide/start/quick-start.mdx b/website/docs/zh/guide/start/quick-start.mdx index 432f44563..31cb88237 100644 --- a/website/docs/zh/guide/start/quick-start.mdx +++ b/website/docs/zh/guide/start/quick-start.mdx @@ -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 @@ -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'; @@ -36,7 +36,7 @@ import { PackageManagerTabs } from '@theme'; }} /> -然后按照提示完成操作。 +然后按照提示操作即可。 ### 模板 @@ -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 @@ -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 to select, to continue) @@ -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 @@ -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] @@ -127,7 +127,7 @@ Options: ## 迁移 -如果您需要从现有项目迁移到 Rslib，可以参考以下指南： +如果你需要从一个现有项目迁移迁移到 Rsbuild，可以参考以下指南： - [从 tsup 迁移](/guide/migration/tsup) - [从 Modern.js Module 迁移](/guide/migration/modernjs-module)