docs: add README.zh-CN.md and update some chapters (#797)

web-infra-dev · Feb 25, 2025 · 32c719a · 32c719a
1 parent 45ff407
commit 32c719a
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 65 deletions.
diff --git a/README.md b/README.md
@@ -12,22 +12,15 @@
   <a href="https://github.com/web-infra-dev/rslib/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=F8F5FF" alt="license" /></a>
 </p>
 
-Rslib is a library development tool that leverages the well-designed configurations and plugins of [Rsbuild](https://rsbuild.dev), empowering library developers to take advantage of the extensive knowledge and ecosystem of webpack and Rspack.
-
-## ✨ Why Rslib?
-
-In the past, we typically did not use webpack or Rspack to build ESM packages because they often included excessive runtime code, making them less friendly to package consumers. However, the community has developed a vast ecosystem around webpack and Rspack, which provides powerful features like tree shaking, code splitting, module federation and more.
-
-So we decided to create Rslib. It improves the quality of ESM output from Rspack and webpack, leverages their extensive ecosystem, and utilizes Rsbuild's excellent out-of-the-box configuration. Rslib aims to provide a superior developer experience and explore new possibilities based on the Rspack architecture.
-
-![](https://assets.rspack.dev/rsbuild/assets/rspack-stack-layers.png)
+English | [简体中文](./README.zh-CN.md)
 
-Rslib is still in its early stages and under active development. We are building Rslib by working in two main parts:
+Rslib is a library development tool that leverages the well-designed configurations and plugins of [Rsbuild](https://rsbuild.dev), empowering library developers to take advantage of the extensive knowledge and ecosystem of webpack and Rspack.
 
-- [bundler support track](https://github.com/web-infra-dev/rslib/issues/45): Improve the quality of ESM / CJS outputs by contributing to Rspack and webpack.
-- [Rslib features track](https://github.com/web-infra-dev/rslib/issues/46): Develop the core features of Rslib.
+Rslib aims to provide library developers with:
 
-The roadmap may change as we move forward.
+- **Easy Library Creation**: Easily create high-quality JavaScript and TypeScript libraries in a simple and intuitive way.
+- **Simple Build Configuration**: Provides out-of-the-box build capabilities to meet the diverse needs of library development scenarios with simple configurations.
+- **Comprehensive Development Workflow**: Contains best practices for building, debugging, documentation, and testing during library development to help improve development efficiency and experience.
 
 ## 🔥 Features
 
@@ -39,6 +32,14 @@ Rslib has the following features:
 - **Declaration file generation**: Including isolated declarations.
 - **Advanced features**: Module Federation, asset compression, PostCSS, Lightning CSS, and more.
 
+## 🎯 Ecosystem
+
+Rslib is implemented based on Rsbuild and fully reuses the capabilities and ecosystem of Rsbuild.
+
+The following diagram illustrates the relationship between Rslib and other tools in the ecosystem:
+
+<img src="https://assets.rspack.dev/rsbuild/assets/rspack-stack-layers.png" alt="Rspack stack layers" width="760" />
+
 ## 📚 Getting started
 
 To get started with Rslib, see the [Quick Start](https://lib.rsbuild.dev/guide/start/quick-start).
@@ -58,55 +59,15 @@ To get started with Rslib, see the [Quick Start](https://lib.rsbuild.dev/guide/s
 
 ## 🤝 Contribution
 
-> New contributors welcome!
+> [!NOTE]
+> We highly value any contributions to Rslib!
 
 Please read the [Contributing Guide](https://github.com/web-infra-dev/rslib/blob/main/CONTRIBUTING.md).
 
 ### Contributors
 
 <a href="https://github.com/web-infra-dev/rslib/graphs/contributors" target="_blank">
-  <table>
-    <tr>
-      <th colspan="2">
-        <br/>
-        <img src="https://contrib.rocks/image?repo=web-infra-dev/rslib&columns=16&max=96"><br/><br/>
-      </th>
-    </tr>
-    <tr>
-      <td>
-        <picture>
-          <source 
-            media="(prefers-color-scheme: dark)" 
-            srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_90_days&owner_id=87694465&repo_ids=766839449&image_size=2x3&color_scheme=dark"
-          />
-          <img 
-            alt="Contributors of web-infra-dev/rslib" 
-            src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_90_days&owner_id=87694465&repo_ids=766839449&image_size=2x3&color_scheme=light"
-          />
-        </picture>
-      </td>
-      <td rowspan="2">
-        <picture>
-          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=new&period=past_90_days&owner_id=87694465&repo_ids=766839449&image_size=4x7&color_scheme=dark">
-          <img alt="New trends of web-infra-dev" src="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=new&period=past_90_days&owner_id=87694465&repo_ids=766839449&image_size=4x7&color_scheme=light">
-        </picture>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <picture>
-          <source 
-            media="(prefers-color-scheme: dark)" 
-            srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_90_days&owner_id=87694465&repo_ids=766839449&image_size=2x3&color_scheme=dark"
-          />
-          <img 
-            alt="Contributors of web-infra-dev/rslib" 
-            src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_90_days&owner_id=87694465&repo_ids=766839449&image_size=2x3&color_scheme=light"
-          />
-        </picture>
-      </td>
-    </tr>
-  </table>
+  <img src="https://contrib.rocks/image?repo=web-infra-dev/rslib&columns=24">
 </a>
 
 ### Code of conduct

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -0,0 +1,98 @@
+<picture>
+  <img alt="Rslib Banner" src="https://assets.rspack.dev/rslib/rslib-banner.png">
+</picture>
+
+# Rslib
+
+<p>
+  <a href="https://discord.gg/FQfm7VqU"><img src="https://img.shields.io/badge/chat-discord-blue?style=flat-square&logo=discord&colorA=564341&colorB=F8F5FF" alt="Discord channel" /></a>
+  <a href="https://npmjs.com/package/@rslib/core?activeTab=readme"><img src="https://img.shields.io/npm/v/@rslib/core?style=flat-square&colorA=564341&colorB=F8F5FF" alt="npm version" /></a>
+  <a href="https://npmcharts.com/compare/@rslib/core?minimal=true"><img src="https://img.shields.io/npm/dm/@rslib/core.svg?style=flat-square&colorA=564341&colorB=F8F5FF" alt="downloads" /></a>
+  <a href="https://nodejs.org/en/about/previous-releases"><img src="https://img.shields.io/node/v/@rslib/core.svg?style=flat-square&colorA=564341&colorB=F8F5FF" alt="node version"></a>
+  <a href="https://github.com/web-infra-dev/rslib/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=F8F5FF" alt="license" /></a>
+</p>
+
+[English](./README.md) | 简体中文
+
+Rslib 是一个库开发工具，它基于 [Rsbuild](https://rsbuild.dev/zh) 精心设计的配置和插件，使库开发者得以复用 webpack 和 Rspack 繁荣的知识和生态系统。
+
+Rslib 旨在为库开发者提供：
+
+- **便捷的库创建**：以简单直观的方式，轻松创建高质量的 JavaScript 和 TypeScript 库。
+- **简洁的构建配置**：提供开箱即用的构建能力，以简洁的配置，满足库开发场景的多样化需求。
+- **完善的开发流程**：包含库开发过程中构建、调试、文档和测试等环节的最佳实践，帮助提升开发效率与体验。
+
+## 🔥 功能
+
+Rslib 提供了以下功能：
+
+- **多种语言的编译**: TypeScript、JSX、Sass、Less、CSS Modules、Wasm 等。
+- **灵活的构建模式**: Bundle 和 bundleless 模式以满足不同的需求。
+- **多种输出格式**: ESM、CJS 和 UMD 以实现最大兼容性。
+- **类型声明文件生成**: 包括 isolated declarations。
+- **进阶功能**: 模块联邦、资源压缩、PostCSS、Lightning CSS 等。
+
+## 🎯 生态
+
+Rslib 基于 Rsbuild 实现，并完全复用 Rsbuild 的能力和生态系统。
+
+下图说明了 Rsbuild 与生态中其他工具之间的关系：
+
+<img src="https://assets.rspack.dev/rsbuild/assets/rspack-stack-layers.png" alt="Rspack stack layers" width="760" />
+
+## 📚 快速上手
+
+你可以参考 [快速上手](https://lib.rsbuild.dev/zh/guide/start/quick-start) 来开始体验 Rslib。
+
+## 🦀 链接
+
+- [Rspack](https://github.com/web-infra-dev/rspack): 基于 Rust 的高性能打包工具。
+- [Rsbuild](https://github.com/web-infra-dev/rsbuild): 由 Rspack 驱动的构建工具。
+- [Rspress](https://github.com/web-infra-dev/rspress): 基于 Rsbuild 的静态站点生成器。
+- [Rsdoctor](https://github.com/web-infra-dev/rsdoctor): 针对 Rspack 和 webpack 的一站式构建分析工具。
+- [Modern.js](https://github.com/web-infra-dev/modern.js): 基于 Rsbuild 的渐进式 React 框架。
+- [awesome-rspack](https://github.com/web-infra-dev/awesome-rspack): 与 Rspack 和 Rsbuild 相关的精彩内容列表。
+- [rspack-examples](https://github.com/rspack-contrib/rspack-examples): Rspack、Rsbuild、Rspress 和 Rsdoctor 的示例项目。
+- [storybook-rsbuild](https://github.com/rspack-contrib/storybook-rsbuild): 基于 Rsbuild 构建的 Storybook。
+- [rsbuild-plugin-template](https://github.com/rspack-contrib/rsbuild-plugin-template): 使用此模板创建你的 Rsbuild 插件。
+- [rstack-design-resources](https://github.com/rspack-contrib/rstack-design-resources): Rspack、Rsbuild、Rslib、Rspress 和 Rsdoctor 的设计资源。
+
+## 🤝 参与贡献
+
+> [!NOTE]
+> 我们非常欢迎任何对 Rslib 的贡献！
+
+请阅读 [贡献指南](https://github.com/web-infra-dev/rslib/blob/main/CONTRIBUTING.md)。
+
+### 贡献者
+
+<a href="https://github.com/web-infra-dev/rslib/graphs/contributors" target="_blank">
+  <img src="https://contrib.rocks/image?repo=web-infra-dev/rslib&columns=24">
+</a>
+
+### 行为准则
+
+本仓库采纳了字节跳动的开源项目行为准则。请点击 [行为准则](./CODE_OF_CONDUCT.md) 查看更多的信息。
+
+## 🧑‍💻 社区
+
+欢迎加入我们的 [Discord](https://discord.gg/FQfm7VqU) 交流频道！Rstack 团队和用户都在那里活跃，并且我们一直期待着各种贡献。
+
+你也可以加入 [飞书群](https://applink.feishu.cn/client/chat/chatter/add_by_link?link_token=3c3vca77-bfc0-4ef5-b62b-9c5c9c92f1b4) 与大家一起交流。
+
+## 🌟 质量
+
+Rslib 通过 [Web Infra QoS](https://web-infra-qos.netlify.app?product=rslib&metrics=bundle-size) 来观测核心指标的变化情况，比如 bundle size、compile speed 和 install size。
+
+## 🙏 致谢
+
+Rslib 的一些实现参考了社区中杰出的项目，对他们表示感谢：
+
+- [esbuild](https://github.com/evanw/esbuild)，由 [Evan Wallace](https://github.com/evanw) 创建。
+- [tsup](https://github.com/egoist/tsup), 由 [EGOIST](https://github.com/egoist) 创建。
+
+Rslib 网站由 [Netlify](https://www.netlify.com/) 提供支持。
+
+## 📖 License
+
+Rslib 项目基于 [MIT 协议](https://github.com/web-infra-dev/rslib/blob/main/LICENSE)。
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -75,7 +75,7 @@
     }
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=16.7.0"
   },
   "publishConfig": {
     "access": "public",

diff --git a/packages/plugin-dts/package.json b/packages/plugin-dts/package.json
@@ -57,7 +57,7 @@
     }
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=16.7.0"
   },
   "publishConfig": {
     "access": "public",

diff --git a/website/docs/en/guide/start/index.mdx b/website/docs/en/guide/start/index.mdx
@@ -10,13 +10,15 @@ Rslib provides a comprehensive set of build features for library development, in
 - **Declaration file generation**: Including isolated declarations.
 - **Advanced features**: Module Federation, asset compression, PostCSS, Lightning CSS, and more.
 
-## 🚀 Why Rslib
+## ✨ Why Rslib
 
-In developing component or utility libraries, developers need to focus not only on implementing project logic but also on handling non-code tasks such as building, debugging, documentation, and testing. Many existing community tools and solutions can address some of these requirements; however, for developers who are not familiar with these tools, meeting these demands often involves tedious configuration or coordinating multiple tools.
+During the development of component or utility libraries, developers need to focus not only on implementing project logic, but also on handling tasks that are separate from the code itself, such as building, debugging, documentation, and testing. Although many community tools and solutions can address some of these needs, developers who are not familiar with them often face cumbersome configuration requirements or need to coordinate multiple tools to meet these demands.
 
-Based on Rspack and Rsbuild, Rslib offers a comprehensive solution tailored to the diverse needs of library development. It effectively addresses issues like an underdeveloped tooling ecosystem, high costs for module standard compatibility, and insufficient output optimization. Rslib improves upon webpack's limited support for library ESM outputs, enabling the production of high-quality, tree-shakeable ESM builds. Additionally, Rslib fully capitalizes on the build performance advantages of Rspack and leverages the strengths of both the webpack and Rspack ecosystems to robustly support features such as Module Federation.
+Based on Rspack and Rsbuild, Rslib offers a comprehensive solution tailored to the diverse requirements of library development, effectively addressing issues such as incomplete tool ecosystems, high costs for module standard compatibility, and insufficient output optimization. Rslib optimizes webpack's limited support for library ESM outputs, reducing redundant runtime code and generating high-quality ESM outputs that are tree-shaking friendly for library consumers. Additionally, Rslib fully leverages the build performance advantages of Rspack and capitalizes the strengths of both the webpack and Rspack ecosystems to robustly support features such as Module Federation.
 
-Furthermore, by sharing a unified configuration, Rslib resolves the challenge of reusing build configurations between application projects and library projects, thereby reducing configuration overhead and enhancing developer productivity and experience.
+Furthermore, Rslib utilizes Rsbuild's out-of-the-box configuration to facilitate configuration sharing between application and library projects, resolving the challenge of reusing build configurations between application projects and library projects, thereby reducing the configuration overhead for developers and improving development efficiency and experience.
+
+In the future, Rslib will explore additional possibilities by leveraging the new features of Rspack.
 
 ## 🔥 Features
 

diff --git a/website/docs/zh/guide/start/index.mdx b/website/docs/zh/guide/start/index.mdx
@@ -10,13 +10,15 @@ Rslib 提供了丰富的构建功能，包括：
 - **类型声明文件生成**: 包括 isolated declarations。
 - **进阶功能**: 模块联邦、资源压缩、PostCSS、Lightning CSS 等。
 
-## 🚀 为什么选择 Rslib
+## ✨ 为什么选择 Rslib
 
 在开发组件库或工具库时，开发者不仅需要关注项目逻辑的实现，还需考虑项目的构建、调试、文档和测试等与代码逻辑无关的工作。现有许多社区工具与方案通常能较好地满足其中部分需求，但对于不熟悉这些工具与方案的开发者来说，往往需要繁琐的配置工作或多种工具配合使用，以满足这些需求。
 
-Rslib 基于 Rspack 与 Rsbuild 实现，针对库开发场景的多样化需求，提供了一套完整的解决方案，有效解决了库开发中的工具生态不完善、模块规范兼容成本高、产物优化不足等问题。Rslib 对 webpack 对 library ESM 产物支持不足的情况进行了优化，可以产出支持 tree-shaking 的高质量 ESM 产物。同时，Rslib 充分发挥了 Rspack 带来的构建性能优势，并利用 webpack / Rspack 生态的优势，很好地支持了模块联邦等功能。
+Rslib 基于 Rspack 与 Rsbuild 实现，针对库开发场景的多样化需求，提供了一套完整的解决方案，有效解决了库开发中的工具生态不完善、模块规范兼容成本高、产物优化不足等问题。Rslib 对 webpack 对 library ESM 产物支持不足的情况进行了优化，减少了冗余的运行时代码，可以产出对库消费者友好的支持 tree-shaking 的高质量 ESM 产物。同时，Rslib 充分发挥了 Rspack 带来的构建性能优势，并利用 webpack / Rspack 生态的优势，很好地支持了模块联邦等功能。
 
-此外，Rslib 可以通过共享一套统一的配置，解决应用项目与库项目之间构建配置难以复用的问题，进而降低开发者的配置成本，提升开发效率与体验。
+此外，Rslib 可以利用 Rsbuild 开箱即用的配置，与应用项目实现配置共享，解决应用项目与库项目之间构建配置难以复用的问题，进而降低开发者的配置成本，提升开发效率与体验。
+
+未来，Rslib 将基于 Rspack 的新特性，探索更多的可能性。
 
 ## 🔥 特性