From 33226a1e65886e1e8a493526eb35161f2b203db6 Mon Sep 17 00:00:00 2001 From: fi3ework Date: Mon, 12 May 2025 16:03:14 +0800 Subject: [PATCH 1/9] docs(blog): initial blog --- website/docs/en/_meta.json | 5 + website/docs/en/blog/_meta.json | 7 ++ website/docs/en/blog/initial-blog.mdx | 116 +++++++++++++++++++++++ website/docs/zh/_meta.json | 5 + website/docs/zh/blog/_meta.json | 7 ++ website/docs/zh/blog/initial-blog.mdx | 128 ++++++++++++++++++++++++++ website/theme/components/ImageAlt.tsx | 13 +++ 7 files changed, 281 insertions(+) create mode 100644 website/docs/en/blog/_meta.json create mode 100644 website/docs/en/blog/initial-blog.mdx create mode 100644 website/docs/zh/blog/_meta.json create mode 100644 website/docs/zh/blog/initial-blog.mdx create mode 100644 website/theme/components/ImageAlt.tsx diff --git a/website/docs/en/_meta.json b/website/docs/en/_meta.json index 988672017..8670b996b 100644 --- a/website/docs/en/_meta.json +++ b/website/docs/en/_meta.json @@ -8,5 +8,10 @@ "text": "Config", "link": "/config/", "activeMatch": "/config/" + }, + { + "text": "Blog", + "link": "/blog/initial-blog", + "activeMatch": "/blog/" } ] diff --git a/website/docs/en/blog/_meta.json b/website/docs/en/blog/_meta.json new file mode 100644 index 000000000..0f78f8bd8 --- /dev/null +++ b/website/docs/en/blog/_meta.json @@ -0,0 +1,7 @@ +[ + { + "type": "file", + "name": "initial-blog", + "label": "Announcing Rslib" + } +] diff --git a/website/docs/en/blog/initial-blog.mdx b/website/docs/en/blog/initial-blog.mdx new file mode 100644 index 000000000..6c745d6ba --- /dev/null +++ b/website/docs/en/blog/initial-blog.mdx @@ -0,0 +1,116 @@ +# Rslib: Build library with Rspack + +![banner](https://assets.rspack.dev/rslib/rslib-banner.png) + +We are excited to introduce Rslib — **a library development tool based on Rspack**. Developed by ByteDance Web Infra Team, Rslib helps developers create JavaScript libraries and UI component libraries in a simple and intuitive way while enjoying the ultimate development experience brought by Rspack and Rsbuild. + +## Why Rslib + +In the past, webpack was mainly used for bundling web applications. When developing JavaScript libraries, developers typically introduced excellent bundling tools like esbuild or Rollup, which could output high-quality ESM and CJS output to better meet JavaScript library bundling needs. + +Within ByteDance, our development teams have created over 10,000 JavaScript libraries. During this process, we observed that the coexistence of multiple bundling tools has led to ecosystem fragmentation. Additionally, in more complex library development scenarios, there are still many needs that haven't been well addressed, such as: + +- **Configuration Fragmentation**: Library build configurations differ significantly from application development, requiring developers to learn different configuration rules and methods. +- **Limited Ecosystem Reuse**: Desire to reuse webpack plugins or loaders accumulated in the ecosystem. +- **Insufficient Extensibility**: Need for rich build lifecycle hooks to meet custom build requirements. +- **High Cost of Multi-format Output**: Libraries need to be bundled into multiple formats like ESM, CJS, UMD, and Module Federation, requiring repeated configuration with different tools. +- **Weak Non-JS Resource Handling**: Lack of standardized processing solutions for style schemes and static resources. +- **Missing Type File Support**: Need to bundle dependent d.ts files during build. + +
+Facing these pain points, we hope the ideal library development tool would: + +- **Easy to Configure:** Provide out-of-the-box configurations covering most scenarios, with plugin mechanisms for advanced feature extensions that work right after installation. +- **Comprehensive Features:** Support not only JavaScript / TypeScript transformation and multi-format output but also provide comprehensive style and resource processing solutions like web application building. +- **Shared Ecosystem:** Unify library building with application building configurations, reuse Rspack's prosperous community, and promote unified toolchain ecosystem development. +- **Performance First:** The underlying bundler is implemented in Rust, offering excellent build performance and improving developer experience. + +
+Therefore, we created Rslib. **Based on [Rsbuild](https://rsbuild.dev)'s +carefully designed configuration and plugins, it allows library developers to +reuse the prosperous knowledge and ecosystem of webpack and Rspack, providing +comprehensive library development capabilities.** + +We hope Rslib can provide more powerful capabilities for library developers and become an important part of the Rspack ecosystem, continuously promoting the development of unified toolchains based on Rspack. + +![Rslib in Rstack ecosystem](https://assets.rspack.dev/others/assets/rslib/rslib-in-rstack.png) + +## Comprehensive library development capabilities + +Rslib provides a comprehensive library building solution that covers most current library building scenario needs: + +- **Out-of-the-Box Configuration** + + Rslib provides out-of-the-box library building configurations. With minimal adjustments, it can meet most library building requirements. Moreover, for more advanced integration needs, in most cases, you only need to install the corresponding Rsbuild plugin to complete the setup, avoiding complicated configuration processes. + + Rslib's configuration extends from Rsbuild, allowing developers to continue using Rsbuild's configuration and ecosystem, maintaining consistent mental models between application and library development, and reusing build configuration-related code. This is particularly important in large monorepo projects that need to maintain multiple build configurations. + +- **Multi-Format Output Support** + + Rslib supports bundling libraries into various module system formats, including ESM (ES modules), CJS (CommonJS), UMD (Universal Module Definition), and Module Federation. With just one build tool and one configuration file, it can handle all building scenarios, particularly suitable for library development scenarios requiring cross-project and cross-framework reuse. Additionally, through optimizing Rspack's ESM format build output, Rslib can now produce clean, standard ESM output. + + For TypeScript declaration files (d.ts), besides supporting d.ts file generation and related post-processing based on TypeScript Compiler API, it also supports bundling d.ts files using [@microsoft/api-extractor](https://www.npmjs.com/package/@microsoft/api-extractor), suitable for handling complex dependency scenarios. + + ![Multiple formats in one configuration file](https://assets.rspack.dev/others/assets/rslib/multiple-formats-config.png) + + ![Decent ESM output](https://assets.rspack.dev/others/assets/rslib/simple-esm-output.png) + +- **Bundle & Bundleless** + + Rslib supports both bundled and bundleless build modes during construction. For bundleless scenarios, it also supports [output path redirection](/config/lib/redirect) functionality, solving common issues with alias replacement in JavaScript and d.ts output paths, as well as strict path reference requirements in ESM. + + ![bundleless output structure](https://assets.rspack.dev/rslib/rslib-bundleless-mode.png) + +- **Style Solutions** + + Style building has always been a challenge in UI component library development. Compared to using Less loader, Sass loader, and PostCSS loader in application building, users often need to manually use the native tools of corresponding style solutions when building library output. + + Leveraging Rsbuild's plugin system and ecosystem, Rslib can directly reuse solutions for Sass, Less, Stylus, CSS Modules, and Tailwind CSS. Whether in bundle or bundleless scenarios, users can process styles just like building web application, directly through configuration or installing corresponding plugins. + + ![Support multiple style solutions](https://assets.rspack.dev/others/assets/rslib/multiple-styles-config.png) + +- **Web Resource Handling** + + Rslib supports referencing static and inline resources like images, fonts, audio, and video in code, as well as static resources in CSS. After installing the appropriate plugins, users can also process SVG files through SVGR, while supporting JSON, TOML, and YAML formats. This feature provides great convenience when building UI component libraries containing resources. + +- **Framework Agnostic** + + Rslib is a framework-agnostic library building solution, supporting Node.js and various UI component library builds. Different DSL UI frameworks only need to integrate corresponding plugins (including React, Preact, Vue, Solid, etc.) to complete underlying build configuration for development. + +## Unlocking Rspack ecosystem possibilities + +Beyond common JavaScript library development solutions, based on Rspack and the Rsbuild ecosystem, Rslib provides developers with more advanced capabilities: + +- **Module Federation** + + Rslib provides first-class support for [Module Federation](/guide/advanced/module-federation). Users only need to install the corresponding Rsbuild plugin to start debugging Module Federation and build MF format output. Users can publish libraries as remote modules to remote servers while building, or directly use remote modules. + +- **Leverage Rsbuild Capabilities** + + Rslib can reuse most of Rsbuild's configurations, supporting advanced features including but not limited to: [import path transformation](https://rsbuild.dev/config/source/transform-import), [inline styles](http://output.inlineStyles), [polyfill](https://rsbuild.dev/config/output/polyfill), and will continue to benefit from more capabilities provided by Rsbuild's iterations in the future. + +- **Share Rspack and Rsbuild Ecosystem** + + Based on the Rspack and Rsbuild ecosystem, Rslib can reuse a series of ecosystem capabilities, including but not limited to: + + - Use [Storybook](https://storybook.rsbuild.dev/guide/integrations/rslib.html) to directly read Rslib's configuration files for UI component library development debugging. + - Use [Rsdoctor](https://rsdoctor.dev/) for build performance and output analysis. + - Use [Node.js polyfill](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) plugin to develop cross-runtime libraries. + - Use [ESLint plugin](https://github.com/rspack-contrib/rsbuild-plugin-eslint) for ESLint validation during development. + - Use [publint plugin](https://github.com/rspack-contrib/rsbuild-plugin-publint) to check if the library's package.json is configured correctly. + + ![Use publint to check package.json](https://assets.rspack.dev/others/assets/rslib/publint-screenshot.png) + + ...... (For more plugin information, please refer to [here](https://rsbuild.dev/plugins/list/)) + +## Current status and version evolution + +Currently, Rspack / Rsbuild / Rspress and other projects in the Rstack toolchain are using Rslib for building, with tens of thousands of weekly downloads, serving multiple businesses within ByteDance, and is also the [recommended solution](https://module-federation.io/guide/basic/rsbuild.html#rslib-module) for Module Federation modules. + +Rslib is currently in 0.x stage. We will release version 1.0 stable after further optimizing output output and confirming the final API and configuration design. You can track the progress of version 1.0 [milestone](https://github.com/web-infra-dev/rslib/milestone/1) on GitHub. + +## Start using Rslib + +We provide the scaffold tool [create-rslib](/guide/start/quick-start) for quickly creating Rslib projects. This scaffold supports creating Node.js / React library projects and supporting development tools. Additionally, we provide [migration documentation](/guide/migration/tsup) to help users migrate from other build tools to Rslib. You can experience developing React component libraries with Rslib in this [CodeSandbox](https://codesandbox.io/p/devbox/rslib-demo-react-ts-7mqjsd). + +We believe that a unified toolchain based on Rspack will provide developers with more possibilities. We look forward to your feedback and contributions to help us build a more complete frontend toolchain ecosystem together. diff --git a/website/docs/zh/_meta.json b/website/docs/zh/_meta.json index 28b2cb648..bf730c166 100644 --- a/website/docs/zh/_meta.json +++ b/website/docs/zh/_meta.json @@ -8,5 +8,10 @@ "text": "配置", "link": "/config/", "activeMatch": "/config/" + }, + { + "text": "博客", + "link": "/blog/initial-blog", + "activeMatch": "/blog/" } ] diff --git a/website/docs/zh/blog/_meta.json b/website/docs/zh/blog/_meta.json new file mode 100644 index 000000000..d40b1e3a9 --- /dev/null +++ b/website/docs/zh/blog/_meta.json @@ -0,0 +1,7 @@ +[ + { + "type": "file", + "name": "initial-blog", + "label": "发布 Rslib" + } +] diff --git a/website/docs/zh/blog/initial-blog.mdx b/website/docs/zh/blog/initial-blog.mdx new file mode 100644 index 000000000..e65605c9c --- /dev/null +++ b/website/docs/zh/blog/initial-blog.mdx @@ -0,0 +1,128 @@ +import { ImageAlt } from '../../../theme/components/ImageAlt'; + +# Rslib: Build library with Rspack + +![banner](https://assets.rspack.dev/rslib/rslib-banner.png) + +我们很高兴地向大家介绍 Rslib —— **一款基于 Rspack 的库开发工具**。Rslib 由字节跳动 Web Infra 团队开发，能够帮助开发者以简单直观的方式创建 JavaScript 库和 UI 组件库，并享受 Rspack 和 Rsbuild 带来的极致开发体验。 + +## 为什么要做 Rslib + +过去，webpack 主要用于打包 web 应用，当开发 JavaScript 库时，开发者通常会引入 esbuild 或 Rollup 等优秀的打包工具，它们能够输出高质量的 ESM 和 CJS 产物，更好地满足 JavaScript 库的打包需求。 +在字节跳动内部，我们的研发团队已开发超过 1 万个 JavaScript 库，在这一过程中，我们观察到多种打包工具并存导致了生态的割裂。此外，在更复杂的库开发场景中，仍存在许多尚未得到良好解决的需求，例如： + +- **配置割裂**：库构建配置与应用开发存在明显差异，开发者需要学习不同的配置规则和方法。 +- **生态复用受限**：希望复用生态中沉淀的 webpack 插件或 loader。 +- **扩展能力不足**：希望有丰富的构建生命周期钩子，以满足自定义构建需求。 +- **多格式输出成本高**：库同时打包为 ESM、CJS、UMD 及 Module Federation 等多种格式的产物，需要使用不同工具重复配置。 +- **非 JS 资源处理薄弱**：样式方案和静态资源缺乏标准化处理方案。 +- **类型文件支持缺失**：希望在构建时同时打包依赖的 d.ts 文件。 + +
+面对这些痛点，我们希望理想的库开发工具能够： + +- **易于配置：** 提供开箱即用的配置覆盖大部分场景，通过插件机制实现高级功能扩展，安装即用。 +- **功能全面：** 不仅支持 JavaScript / TypeScript 转换与多格式产物打包，还提供 web 应用构建般全面的样式和资源处理方案。 +- **生态共享：** 库构建与应用构建配置统一，复用 Rspack 繁荣社区，推动统一工具链生态发展。 +- **性能优先：** 底层构建器基于 Rust 实现，具有良好的构建性能，提升开发者体验。 + +
+为此，我们创建了 Rslib。**它基于 +[Rsbuild](https://rsbuild.dev/zh/)精心设计的配置和插件，使库开发者得以复用 +webpack 和 Rspack 繁荣的知识和生态系统，为开发者提供了完备的库开发能力。** + +我们希望 Rslib 能为库开发者提供更强大的能力，并成为 Rspack 生态中的重要组成部分，持续推动基于 Rspack 的统一工具链的发展。 + +![Rslib 在 Rstack 生态中的位置](https://assets.rspack.dev/others/assets/rslib/rslib-in-rstack.png) + +Rslib 在 Rstack 生态中的位置 + +## 完备的库开发能力 + +Rslib 提供了一套全面的库构建解决方案，涵盖了目前大部分库构建场景的需求： + +- **开箱即用的配置** + + Rslib 提供了开箱即用的库构建配置。只需对配置进行少量调整，即可满足绝大部分库构建需求。不仅如此，对于更高级的集成需求，大多数情况下，只需安装相应的 Rsbuild 插件即可完成，避免了繁琐的配置过程。 + + Rslib 的配置基于 Rsbuild 进行扩展，使开发者能继续使用 Rsbuild 的配置及生态，在应用开发和库开发时能够保持一致的心智模型，并能复用构建配置相关的代码。这在需要维护多种构建配置的大型 monorepo 项目中尤为重要。 + +- **多类型产物支持** + + Rslib 支持将库打包成多种模块系统格式，包括 ESM（ES modules）、CJS（CommonJS）、UMD（Universal Module Definition）与模块联邦（Module Federation）。只需一个构建工具和一份配置文件，即可应对所有构建场景，特别适合需要跨项目和跨框架复用的库开发场景。同时，通过对 Rspack ESM 格式构建产物的优化，Rslib 也已经能构建出规范纯净的 ESM 产物。 + + 对于 TypeScript 类型声明文件（d.ts），除了支持基于 TypeScript Compiler API 生成 d.ts 文件及相关后处理，也支持基于 [@microsoft/api-extractor](https://www.npmjs.com/package/@microsoft/api-extractor) 对 d.ts 文件进行打包，适合处理依赖复杂的场景。 + + ![一个配置文件中多种打包](https://assets.rspack.dev/others/assets/rslib/multiple-formats-config.png) + + 一个配置文件中多种打包 + +![纯净的 ESM 产物](https://assets.rspack.dev/others/assets/rslib/simple-esm-output.png) + +纯净的 ESM 产物 + +- **bundle & bundleless** + + Rslib 支持在构建时选择打包（bundle）或仅做转换（bundleless）这两种常见的构建模式。对于 bundleless 场景，还支持了 [产物路径重定向](/config/lib/redirect) 功能，从而解决了常见的 JavaScript 和 d.ts 产物路径中别名替换以及 ESM 要求严格引用路径的问题。 + + ![bundleless 产物结构](https://assets.rspack.dev/rslib/rslib-bundleless-mode.png) + + bundleless 产物结构 + +- **样式解决方案** + + 在 UI 组件库的开发过程中，样式的构建一直是一个难题。与应用构建时使用 Less loader、Sass loader、PostCSS loader 相比，用户在构建库产物时往往需要手动使用对应样式解决方案的原生工具来进行转换。 + + 借助 Rsbuild 的插件系统和生态，Rslib 可以直接复用 Sass、Less、Stylus、CSS Modules、Tailwind CSS 的解决方案。无论是在 bundle 还是 bundleless 的场景下，用户都可以像构建 web 应用一样，直接通过配置或安装相应插件来进行样式的处理。 + + ![支持多种样式解决方案](https://assets.rspack.dev/others/assets/rslib/multiple-styles-config.png) + + 支持多种样式解决方案 + +- **Web 资源处理** + + Rslib 支持在代码中引用图片、字体、音频、视频等类型的静态资源及内联资源，还支持在 CSS 中引用静态资源。安装相应插件后，用户还可以通过 SVGR 处理 SVG 文件，同时支持 JSON、TOML、YAML 格式。这项功能在构建含有资源的 UI 组件库时，能够提供极大的便利。 + +- **框架无关** + + Rslib 是一个框架无关的库构建解决方案，支持 Node.js 和多种 UI 组件库的构建。不同 DSL 的 UI 框架只需要通过接入相应插件（包括 React、Preact、Vue、Solid 等）即可完成底层构建配置进行开发。 + +## 解锁 Rspack 生态可能性 + +除了常见的 JavaScript 库开发解决方案，基于 Rspack 以及 Rsbuild 生态，Rslib 为开发者们提供了更高级的能力： + +- **Module Federation** + + Rslib 内置提供对 [模块联邦](/guide/advanced/module-federation)（Module Federation）的一等公民支持，用户只需简单安装对应的 Rsbuild 插件，即可启动对模块联邦的调试及构建 MF 格式的产物，用户可以在构建库的同时将其作为远程模块发布到远程服务器上，也可以直接使用远程模块。 + +- **复用 Rsbuild 能力** + + Rslib 可以复用 Rsbuild 的大部分配置，支持的高级功能包括但不限于：[引入路径转换](https://rsbuild.dev/zh/config/source/transform-import)，[内联样式](http://output.inlineStyles)，[polyfill](https://rsbuild.dev/zh/config/output/polyfill) 等，在未来 Rslib 能持续享受 Rsbuild 迭代提供的更多能力。 + +- **共享 Rspack 和 Rsbuild 生态** + + 基于 Rspack 和 Rsbuild 生态，Rslib 能复用一系列生态能力，包括但不限于： + + - 使用 [Storybook](https://storybook.rsbuild.dev/guide/integrations/rslib.html) 直接读取 Rslib 的配置文件进行 UI 组件库开发调试。 + - 使用 [Rsdoctor](https://rsdoctor.dev/) 进行构建性能及产物分析。 + - 使用 [Node.js polyfill](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) 插件开发跨运行时的库。 + - 使用 [ESLint 插件](https://github.com/rspack-contrib/rsbuild-plugin-eslint) 在开发时进行 ESLint 校验。 + - 使用 [publint 插件](https://github.com/rspack-contrib/rsbuild-plugin-publint) 检查开发的库的 package.json 是否配置正确。 + + ![使用 publint 检查 package.json 正确性](https://assets.rspack.dev/others/assets/rslib/publint-screenshot.png) + + 使用 publint 检查 package.json 正确性 + + ...... （更多插件的信息请参考 [这里](https://rsbuild.dev/zh/plugins/list/)） + +## 当前状态及版本演进 + +目前 Rstack 工具链中的 Rspack / Rsbuild / Rspress 等项目已经使用 Rslib 进行构建，周下载量数万，在字节内部已经服务了多个业务，同时也是 Module Federation 模块的 [推荐解决方案](https://module-federation.io/guide/basic/rsbuild.html#rslib-module)。 + +Rslib 目前处于 0.x 阶段，我们将在进一步优化产物输出，并确认最终 API 和配置的设计后发布 1.0 稳定版。你可以在 GitHub 上查看 1.0 版本的 [里程碑](https://github.com/web-infra-dev/rslib/milestone/1) 追踪进展。 + +## 开始使用 Rslib + +我们提供了脚手架工具 [create-rslib](/guide/start/quick-start) 用于快速创建 Rslib 项目。该脚手架支持创建 Node.js / React 库项目及配套的开发工具。此外，我们还提供了 [迁移文档](/guide/migration/tsup)，帮助用户从其他构建工具迁移到 Rslib。你可以在这个 [CodeSandbox](https://codesandbox.io/p/devbox/rslib-demo-react-ts-7mqjsd) 中体验使用 Rslib 开发 React 组件库。 + +我们相信，基于 Rspack 的统一工具链，将为开发者提供更多的可能性。我们期待你的反馈与贡献，帮助我们共同构建更完善的前端工具链生态。 diff --git a/website/theme/components/ImageAlt.tsx b/website/theme/components/ImageAlt.tsx new file mode 100644 index 000000000..93a110ce6 --- /dev/null +++ b/website/theme/components/ImageAlt.tsx @@ -0,0 +1,13 @@ +export const ImageAlt = (props: { children?: React.ReactNode }) => { + return ( +

+ {props.children} +

+ ); +}; From b25a533c1fb2d8e2aee72806296783a9a9ffb920 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=B4=E9=99=88=E5=A8=81?= Date: Tue, 13 May 2025 18:09:34 +0800 Subject: [PATCH 2/9] chore: update --- website/docs/en/_meta.json | 2 +- website/docs/en/blog/_meta.json | 8 +-- website/docs/en/blog/index.mdx | 14 +++++ ...initial-blog.mdx => introducing-rslib.mdx} | 59 +++++++++++-------- website/docs/zh/_meta.json | 2 +- website/docs/zh/blog/_meta.json | 8 +-- website/docs/zh/blog/index.mdx | 14 +++++ ...initial-blog.mdx => introducing-rslib.mdx} | 29 ++++----- 8 files changed, 83 insertions(+), 53 deletions(-) create mode 100644 website/docs/en/blog/index.mdx rename website/docs/en/blog/{initial-blog.mdx => introducing-rslib.mdx} (74%) create mode 100644 website/docs/zh/blog/index.mdx rename website/docs/zh/blog/{initial-blog.mdx => introducing-rslib.mdx} (87%) diff --git a/website/docs/en/_meta.json b/website/docs/en/_meta.json index 8670b996b..e142455b6 100644 --- a/website/docs/en/_meta.json +++ b/website/docs/en/_meta.json @@ -11,7 +11,7 @@ }, { "text": "Blog", - "link": "/blog/initial-blog", + "link": "/blog/", "activeMatch": "/blog/" } ] diff --git a/website/docs/en/blog/_meta.json b/website/docs/en/blog/_meta.json index 0f78f8bd8..e62015689 100644 --- a/website/docs/en/blog/_meta.json +++ b/website/docs/en/blog/_meta.json @@ -1,7 +1 @@ -[ - { - "type": "file", - "name": "initial-blog", - "label": "Announcing Rslib" - } -] +["index", "introducing-rslib"] diff --git a/website/docs/en/blog/index.mdx b/website/docs/en/blog/index.mdx new file mode 100644 index 000000000..d1da20fde --- /dev/null +++ b/website/docs/en/blog/index.mdx @@ -0,0 +1,14 @@ +--- +title: Overview +sidebar: false +--- + +# Rslib blogs + +Check here for the latest articles and release announcements about Rslib. + +## [Rslib: Build library with Rspack](/blog/introducing-rslib) + +> May 14, 2025 + +We are excited to introduce Rslib — **a library development tool based on Rspack**. Developed by ByteDance Web Infra Team, Rslib helps developers create JavaScript libraries and UI component libraries in a simple and intuitive way while enjoying the ultimate development experience brought by [Rspack](https://rspack.dev/) and [Rsbuild](https://rsbuild.dev/). diff --git a/website/docs/en/blog/initial-blog.mdx b/website/docs/en/blog/introducing-rslib.mdx similarity index 74% rename from website/docs/en/blog/initial-blog.mdx rename to website/docs/en/blog/introducing-rslib.mdx index 6c745d6ba..56ea32e13 100644 --- a/website/docs/en/blog/initial-blog.mdx +++ b/website/docs/en/blog/introducing-rslib.mdx @@ -1,23 +1,28 @@ +--- +sidebar: false +--- + +import { ImageAlt } from '../../../theme/components/ImageAlt'; + # Rslib: Build library with Rspack ![banner](https://assets.rspack.dev/rslib/rslib-banner.png) -We are excited to introduce Rslib — **a library development tool based on Rspack**. Developed by ByteDance Web Infra Team, Rslib helps developers create JavaScript libraries and UI component libraries in a simple and intuitive way while enjoying the ultimate development experience brought by Rspack and Rsbuild. +We are excited to introduce Rslib — **a library development tool based on Rspack**. Developed by ByteDance Web Infra Team, Rslib helps developers create JavaScript libraries and UI component libraries in a simple and intuitive way while enjoying the ultimate development experience brought by [Rspack](https://rspack.dev/) and [Rsbuild](https://rsbuild.dev/). ## Why Rslib -In the past, webpack was mainly used for bundling web applications. When developing JavaScript libraries, developers typically introduced excellent bundling tools like esbuild or Rollup, which could output high-quality ESM and CJS output to better meet JavaScript library bundling needs. +In the past, webpack was mainly used for bundling web applications. When developing JavaScript libraries, developers typically introduced excellent bundlers like esbuild or Rollup, which could output high-quality ESM and CJS output to better meet JavaScript library bundling needs. -Within ByteDance, our development teams have created over 10,000 JavaScript libraries. During this process, we observed that the coexistence of multiple bundling tools has led to ecosystem fragmentation. Additionally, in more complex library development scenarios, there are still many needs that haven't been well addressed, such as: +Within ByteDance, our development teams have created over 10,000 JavaScript libraries. During this process, we observed that the coexistence of multiple bundlers has led to ecosystem fragmentation. Additionally, in more complex library development scenarios, there are still many needs that haven't been well addressed, such as: - **Configuration Fragmentation**: Library build configurations differ significantly from application development, requiring developers to learn different configuration rules and methods. - **Limited Ecosystem Reuse**: Desire to reuse webpack plugins or loaders accumulated in the ecosystem. - **Insufficient Extensibility**: Need for rich build lifecycle hooks to meet custom build requirements. - **High Cost of Multi-format Output**: Libraries need to be bundled into multiple formats like ESM, CJS, UMD, and Module Federation, requiring repeated configuration with different tools. -- **Weak Non-JS Resource Handling**: Lack of standardized processing solutions for style schemes and static resources. -- **Missing Type File Support**: Need to bundle dependent d.ts files during build. +- **Weak Non-JS Resource Handling**: Lack of standardized processing solutions for style schemes and static assets. +- **Missing Declaration File Support**: Need to bundle d.ts files of dependencies during build. -
Facing these pain points, we hope the ideal library development tool would: - **Easy to Configure:** Provide out-of-the-box configurations covering most scenarios, with plugin mechanisms for advanced feature extensions that work right after installation. @@ -25,17 +30,15 @@ Facing these pain points, we hope the ideal library development tool would: - **Shared Ecosystem:** Unify library building with application building configurations, reuse Rspack's prosperous community, and promote unified toolchain ecosystem development. - **Performance First:** The underlying bundler is implemented in Rust, offering excellent build performance and improving developer experience. -
-Therefore, we created Rslib. **Based on [Rsbuild](https://rsbuild.dev)'s -carefully designed configuration and plugins, it allows library developers to -reuse the prosperous knowledge and ecosystem of webpack and Rspack, providing -comprehensive library development capabilities.** +Therefore, we created Rslib. **Based on the well-designed configurations and plugins of [Rsbuild](https://rsbuild.dev)'s, it empowers library developers to take advantage of the extensive knowledge and ecosystem of webpack and Rspack, providing comprehensive library development features.** -We hope Rslib can provide more powerful capabilities for library developers and become an important part of the Rspack ecosystem, continuously promoting the development of unified toolchains based on Rspack. +We hope Rslib can provide more powerful features for library developers and become an important part of the Rspack ecosystem, continuously promoting the development of unified toolchains based on Rspack. ![Rslib in Rstack ecosystem](https://assets.rspack.dev/others/assets/rslib/rslib-in-rstack.png) -## Comprehensive library development capabilities +The location of Rslib in the Rstack ecosystem + +## Comprehensive library development features Rslib provides a comprehensive library building solution that covers most current library building scenario needs: @@ -53,14 +56,20 @@ Rslib provides a comprehensive library building solution that covers most curren ![Multiple formats in one configuration file](https://assets.rspack.dev/others/assets/rslib/multiple-formats-config.png) - ![Decent ESM output](https://assets.rspack.dev/others/assets/rslib/simple-esm-output.png) + Multiple formats in one configuration file + + ![Clean ESM output](https://assets.rspack.dev/others/assets/rslib/simple-esm-output.png) + + Clean ESM output - **Bundle & Bundleless** - Rslib supports both bundled and bundleless build modes during construction. For bundleless scenarios, it also supports [output path redirection](/config/lib/redirect) functionality, solving common issues with alias replacement in JavaScript and d.ts output paths, as well as strict path reference requirements in ESM. + Rslib supports both bundle and bundleless build modes during build process. For bundleless scenarios, it also supports [output path redirection](/config/lib/redirect) feature, solving common issues with alias replacement in JavaScript and d.ts output paths, as well as strict path reference requirements in ESM. ![bundleless output structure](https://assets.rspack.dev/rslib/rslib-bundleless-mode.png) + bundleless output structure + - **Style Solutions** Style building has always been a challenge in UI component library development. Compared to using Less loader, Sass loader, and PostCSS loader in application building, users often need to manually use the native tools of corresponding style solutions when building library output. @@ -69,9 +78,11 @@ Rslib provides a comprehensive library building solution that covers most curren ![Support multiple style solutions](https://assets.rspack.dev/others/assets/rslib/multiple-styles-config.png) + Support multiple style solutions + - **Web Resource Handling** - Rslib supports referencing static and inline resources like images, fonts, audio, and video in code, as well as static resources in CSS. After installing the appropriate plugins, users can also process SVG files through SVGR, while supporting JSON, TOML, and YAML formats. This feature provides great convenience when building UI component libraries containing resources. + Rslib supports referencing static and inline assets like images, fonts, audio, and video in code, as well as static assets in CSS. After installing the appropriate plugins, users can also process SVG files through SVGR, while supporting JSON, TOML, and YAML formats. This feature provides great convenience when building UI component libraries containing resources. - **Framework Agnostic** @@ -79,19 +90,19 @@ Rslib provides a comprehensive library building solution that covers most curren ## Unlocking Rspack ecosystem possibilities -Beyond common JavaScript library development solutions, based on Rspack and the Rsbuild ecosystem, Rslib provides developers with more advanced capabilities: +Beyond common JavaScript library development solutions, based on Rspack and the Rsbuild ecosystem, Rslib provides developers with more advanced features: - **Module Federation** Rslib provides first-class support for [Module Federation](/guide/advanced/module-federation). Users only need to install the corresponding Rsbuild plugin to start debugging Module Federation and build MF format output. Users can publish libraries as remote modules to remote servers while building, or directly use remote modules. -- **Leverage Rsbuild Capabilities** +- **Leverage Rsbuild Features** - Rslib can reuse most of Rsbuild's configurations, supporting advanced features including but not limited to: [import path transformation](https://rsbuild.dev/config/source/transform-import), [inline styles](http://output.inlineStyles), [polyfill](https://rsbuild.dev/config/output/polyfill), and will continue to benefit from more capabilities provided by Rsbuild's iterations in the future. + Rslib can reuse most of Rsbuild's configurations, supporting advanced features including but not limited to: [import path transformation](https://rsbuild.dev/config/source/transform-import), [inline styles](http://output.inlineStyles), [polyfill](https://rsbuild.dev/config/output/polyfill), and will continue to benefit from more features provided by Rsbuild's iterations in the future. - **Share Rspack and Rsbuild Ecosystem** - Based on the Rspack and Rsbuild ecosystem, Rslib can reuse a series of ecosystem capabilities, including but not limited to: + Based on the Rspack and Rsbuild ecosystem, Rslib can reuse a series of ecosystem features, including but not limited to: - Use [Storybook](https://storybook.rsbuild.dev/guide/integrations/rslib.html) to directly read Rslib's configuration files for UI component library development debugging. - Use [Rsdoctor](https://rsdoctor.dev/) for build performance and output analysis. @@ -101,16 +112,18 @@ Beyond common JavaScript library development solutions, based on Rspack and the ![Use publint to check package.json](https://assets.rspack.dev/others/assets/rslib/publint-screenshot.png) - ...... (For more plugin information, please refer to [here](https://rsbuild.dev/plugins/list/)) + Use publint to check package.json + + > For more plugin information, please refer to [Rsbuild Plugin Overview](https://rsbuild.dev/plugins/list/). ## Current status and version evolution Currently, Rspack / Rsbuild / Rspress and other projects in the Rstack toolchain are using Rslib for building, with tens of thousands of weekly downloads, serving multiple businesses within ByteDance, and is also the [recommended solution](https://module-federation.io/guide/basic/rsbuild.html#rslib-module) for Module Federation modules. -Rslib is currently in 0.x stage. We will release version 1.0 stable after further optimizing output output and confirming the final API and configuration design. You can track the progress of version 1.0 [milestone](https://github.com/web-infra-dev/rslib/milestone/1) on GitHub. +Rslib is currently in 0.x stage. We will release stable version 1.0 after further optimizing output output and confirming the final API and configuration design. You can track the progress of version 1.0 [milestone](https://github.com/web-infra-dev/rslib/milestone/1) on GitHub. ## Start using Rslib We provide the scaffold tool [create-rslib](/guide/start/quick-start) for quickly creating Rslib projects. This scaffold supports creating Node.js / React library projects and supporting development tools. Additionally, we provide [migration documentation](/guide/migration/tsup) to help users migrate from other build tools to Rslib. You can experience developing React component libraries with Rslib in this [CodeSandbox](https://codesandbox.io/p/devbox/rslib-demo-react-ts-7mqjsd). -We believe that a unified toolchain based on Rspack will provide developers with more possibilities. We look forward to your feedback and contributions to help us build a more complete frontend toolchain ecosystem together. +We believe that a unified toolchain based on Rspack will provide developers with more possibilities. Looking forward to your feedback and contributions to help us build a more complete frontend toolchain ecosystem together. diff --git a/website/docs/zh/_meta.json b/website/docs/zh/_meta.json index bf730c166..401e00616 100644 --- a/website/docs/zh/_meta.json +++ b/website/docs/zh/_meta.json @@ -11,7 +11,7 @@ }, { "text": "博客", - "link": "/blog/initial-blog", + "link": "/blog/", "activeMatch": "/blog/" } ] diff --git a/website/docs/zh/blog/_meta.json b/website/docs/zh/blog/_meta.json index d40b1e3a9..e62015689 100644 --- a/website/docs/zh/blog/_meta.json +++ b/website/docs/zh/blog/_meta.json @@ -1,7 +1 @@ -[ - { - "type": "file", - "name": "initial-blog", - "label": "发布 Rslib" - } -] +["index", "introducing-rslib"] diff --git a/website/docs/zh/blog/index.mdx b/website/docs/zh/blog/index.mdx new file mode 100644 index 000000000..8bda52896 --- /dev/null +++ b/website/docs/zh/blog/index.mdx @@ -0,0 +1,14 @@ +--- +title: 总览 +sidebar: false +--- + +# Rslib 博客 + +在此查看有关 Rslib 的最新文章和发布公告。 + +## [Rslib: Build library with Rspack](/blog/introducing-rslib) + +> 2025 年 5 月 14 日 + +我们很高兴地向大家介绍 Rslib —— **一款基于 Rspack 的库开发工具**。Rslib 由字节跳动 Web Infra 团队开发，能够帮助开发者以简单直观的方式创建 JavaScript 库和 UI 组件库，并享受 [Rspack](https://rspack.dev/zh/) 和 [Rsbuild](https://rsbuild.dev/zh/) 带来的极致开发体验。 diff --git a/website/docs/zh/blog/initial-blog.mdx b/website/docs/zh/blog/introducing-rslib.mdx similarity index 87% rename from website/docs/zh/blog/initial-blog.mdx rename to website/docs/zh/blog/introducing-rslib.mdx index e65605c9c..e71b5fb66 100644 --- a/website/docs/zh/blog/initial-blog.mdx +++ b/website/docs/zh/blog/introducing-rslib.mdx @@ -1,14 +1,19 @@ +--- +sidebar: false +--- + import { ImageAlt } from '../../../theme/components/ImageAlt'; # Rslib: Build library with Rspack ![banner](https://assets.rspack.dev/rslib/rslib-banner.png) -我们很高兴地向大家介绍 Rslib —— **一款基于 Rspack 的库开发工具**。Rslib 由字节跳动 Web Infra 团队开发，能够帮助开发者以简单直观的方式创建 JavaScript 库和 UI 组件库，并享受 Rspack 和 Rsbuild 带来的极致开发体验。 +我们很高兴地向大家介绍 Rslib —— **一款基于 Rspack 的库开发工具**。Rslib 由字节跳动 Web Infra 团队开发，能够帮助开发者以简单直观的方式创建 JavaScript 库和 UI 组件库，并享受 [Rspack](https://rspack.dev/zh/) 和 [Rsbuild](https://rsbuild.dev/zh/) 带来的极致开发体验。 ## 为什么要做 Rslib 过去，webpack 主要用于打包 web 应用，当开发 JavaScript 库时，开发者通常会引入 esbuild 或 Rollup 等优秀的打包工具，它们能够输出高质量的 ESM 和 CJS 产物，更好地满足 JavaScript 库的打包需求。 + 在字节跳动内部，我们的研发团队已开发超过 1 万个 JavaScript 库，在这一过程中，我们观察到多种打包工具并存导致了生态的割裂。此外，在更复杂的库开发场景中，仍存在许多尚未得到良好解决的需求，例如： - **配置割裂**：库构建配置与应用开发存在明显差异，开发者需要学习不同的配置规则和方法。 @@ -18,7 +23,6 @@ import { ImageAlt } from '../../../theme/components/ImageAlt'; - **非 JS 资源处理薄弱**：样式方案和静态资源缺乏标准化处理方案。 - **类型文件支持缺失**：希望在构建时同时打包依赖的 d.ts 文件。 -
面对这些痛点，我们希望理想的库开发工具能够： - **易于配置：** 提供开箱即用的配置覆盖大部分场景，通过插件机制实现高级功能扩展，安装即用。 @@ -26,10 +30,7 @@ import { ImageAlt } from '../../../theme/components/ImageAlt'; - **生态共享：** 库构建与应用构建配置统一，复用 Rspack 繁荣社区，推动统一工具链生态发展。 - **性能优先：** 底层构建器基于 Rust 实现，具有良好的构建性能，提升开发者体验。 -
-为此，我们创建了 Rslib。**它基于 -[Rsbuild](https://rsbuild.dev/zh/)精心设计的配置和插件，使库开发者得以复用 -webpack 和 Rspack 繁荣的知识和生态系统，为开发者提供了完备的库开发能力。** +为此，我们创建了 Rslib。**它基于 [Rsbuild](https://rsbuild.dev/zh/) 精心设计的配置和插件，使库开发者得以复用 webpack 和 Rspack 繁荣的知识和生态系统，为开发者提供了完备的库开发能力。** 我们希望 Rslib 能为库开发者提供更强大的能力，并成为 Rspack 生态中的重要组成部分，持续推动基于 Rspack 的统一工具链的发展。 @@ -53,13 +54,13 @@ Rslib 提供了一套全面的库构建解决方案，涵盖了目前大部分 对于 TypeScript 类型声明文件（d.ts），除了支持基于 TypeScript Compiler API 生成 d.ts 文件及相关后处理，也支持基于 [@microsoft/api-extractor](https://www.npmjs.com/package/@microsoft/api-extractor) 对 d.ts 文件进行打包，适合处理依赖复杂的场景。 - ![一个配置文件中多种打包](https://assets.rspack.dev/others/assets/rslib/multiple-formats-config.png) + ![一个配置文件中包含多种格式](https://assets.rspack.dev/others/assets/rslib/multiple-formats-config.png) - 一个配置文件中多种打包 + 一个配置文件中包含多种格式 -![纯净的 ESM 产物](https://assets.rspack.dev/others/assets/rslib/simple-esm-output.png) + ![纯净的 ESM 产物](https://assets.rspack.dev/others/assets/rslib/simple-esm-output.png) -纯净的 ESM 产物 + 纯净的 ESM 产物 - **bundle & bundleless** @@ -71,7 +72,7 @@ Rslib 提供了一套全面的库构建解决方案，涵盖了目前大部分 - **样式解决方案** - 在 UI 组件库的开发过程中，样式的构建一直是一个难题。与应用构建时使用 Less loader、Sass loader、PostCSS loader 相比，用户在构建库产物时往往需要手动使用对应样式解决方案的原生工具来进行转换。 + 在 UI 组件库的开发过程中，样式的构建一直是个难题。与应用构建时使用 Less loader、Sass loader、PostCSS loader 相比，用户在构建库产物时往往需要手动使用对应样式解决方案的原生工具来进行转换。 借助 Rsbuild 的插件系统和生态，Rslib 可以直接复用 Sass、Less、Stylus、CSS Modules、Tailwind CSS 的解决方案。无论是在 bundle 还是 bundleless 的场景下，用户都可以像构建 web 应用一样，直接通过配置或安装相应插件来进行样式的处理。 @@ -111,9 +112,9 @@ Rslib 提供了一套全面的库构建解决方案，涵盖了目前大部分 ![使用 publint 检查 package.json 正确性](https://assets.rspack.dev/others/assets/rslib/publint-screenshot.png) - 使用 publint 检查 package.json 正确性 + 使用 publint 检查 package.json 的正确性 - ...... （更多插件的信息请参考 [这里](https://rsbuild.dev/zh/plugins/list/)） + > 更多插件的信息请参考 [Rsbuild 插件总览](https://rsbuild.dev/zh/plugins/list/)。 ## 当前状态及版本演进 @@ -125,4 +126,4 @@ Rslib 目前处于 0.x 阶段，我们将在进一步优化产物输出，并确 我们提供了脚手架工具 [create-rslib](/guide/start/quick-start) 用于快速创建 Rslib 项目。该脚手架支持创建 Node.js / React 库项目及配套的开发工具。此外，我们还提供了 [迁移文档](/guide/migration/tsup)，帮助用户从其他构建工具迁移到 Rslib。你可以在这个 [CodeSandbox](https://codesandbox.io/p/devbox/rslib-demo-react-ts-7mqjsd) 中体验使用 Rslib 开发 React 组件库。 -我们相信，基于 Rspack 的统一工具链，将为开发者提供更多的可能性。我们期待你的反馈与贡献，帮助我们共同构建更完善的前端工具链生态。 +我们相信，基于 Rspack 的统一工具链，将为开发者提供更多的可能性。期待你的反馈与贡献，帮助我们共同构建更完善的前端工具链生态。 From 7371be9c0af2ea7d7e668d0691024b82917f6f1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=B4=E9=99=88=E5=A8=81?= Date: Tue, 13 May 2025 18:14:42 +0800 Subject: [PATCH 3/9] chore: update --- website/docs/en/blog/introducing-rslib.mdx | 1 + website/docs/zh/blog/introducing-rslib.mdx | 1 + 2 files changed, 2 insertions(+) diff --git a/website/docs/en/blog/introducing-rslib.mdx b/website/docs/en/blog/introducing-rslib.mdx index 56ea32e13..c1f0de76d 100644 --- a/website/docs/en/blog/introducing-rslib.mdx +++ b/website/docs/en/blog/introducing-rslib.mdx @@ -1,4 +1,5 @@ --- +date: 2025-05-14 10:00:00 sidebar: false --- diff --git a/website/docs/zh/blog/introducing-rslib.mdx b/website/docs/zh/blog/introducing-rslib.mdx index e71b5fb66..49aea359e 100644 --- a/website/docs/zh/blog/introducing-rslib.mdx +++ b/website/docs/zh/blog/introducing-rslib.mdx @@ -1,4 +1,5 @@ --- +date: 2025-05-14 10:00:00 sidebar: false --- From f98d524b15dfb7b7814edc722dcace44f3fe8b08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=B4=E9=99=88=E5=A8=81?= Date: Tue, 13 May 2025 18:51:23 +0800 Subject: [PATCH 4/9] chore: update --- website/docs/en/blog/introducing-rslib.mdx | 2 ++ website/docs/zh/blog/introducing-rslib.mdx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/website/docs/en/blog/introducing-rslib.mdx b/website/docs/en/blog/introducing-rslib.mdx index c1f0de76d..81361f8c7 100644 --- a/website/docs/en/blog/introducing-rslib.mdx +++ b/website/docs/en/blog/introducing-rslib.mdx @@ -3,6 +3,8 @@ date: 2025-05-14 10:00:00 sidebar: false --- +_May 14, 2025_ + import { ImageAlt } from '../../../theme/components/ImageAlt'; # Rslib: Build library with Rspack diff --git a/website/docs/zh/blog/introducing-rslib.mdx b/website/docs/zh/blog/introducing-rslib.mdx index 49aea359e..6a9868037 100644 --- a/website/docs/zh/blog/introducing-rslib.mdx +++ b/website/docs/zh/blog/introducing-rslib.mdx @@ -3,6 +3,8 @@ date: 2025-05-14 10:00:00 sidebar: false --- +_2025 年 5 月 14 日_ + import { ImageAlt } from '../../../theme/components/ImageAlt'; # Rslib: Build library with Rspack From 1c6d8c81f57706ea21a3d47bf78e3692a15a10fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=B4=E9=99=88=E5=A8=81?= Date: Tue, 13 May 2025 19:06:13 +0800 Subject: [PATCH 5/9] chore: update --- website/docs/en/blog/introducing-rslib.mdx | 2 ++ website/docs/zh/blog/introducing-rslib.mdx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/website/docs/en/blog/introducing-rslib.mdx b/website/docs/en/blog/introducing-rslib.mdx index 81361f8c7..1154be643 100644 --- a/website/docs/en/blog/introducing-rslib.mdx +++ b/website/docs/en/blog/introducing-rslib.mdx @@ -13,6 +13,8 @@ import { ImageAlt } from '../../../theme/components/ImageAlt'; We are excited to introduce Rslib — **a library development tool based on Rspack**. Developed by ByteDance Web Infra Team, Rslib helps developers create JavaScript libraries and UI component libraries in a simple and intuitive way while enjoying the ultimate development experience brought by [Rspack](https://rspack.dev/) and [Rsbuild](https://rsbuild.dev/). +> Repo：https://github.com/web-infra-dev/rslib + ## Why Rslib In the past, webpack was mainly used for bundling web applications. When developing JavaScript libraries, developers typically introduced excellent bundlers like esbuild or Rollup, which could output high-quality ESM and CJS output to better meet JavaScript library bundling needs. diff --git a/website/docs/zh/blog/introducing-rslib.mdx b/website/docs/zh/blog/introducing-rslib.mdx index 6a9868037..e46e11bed 100644 --- a/website/docs/zh/blog/introducing-rslib.mdx +++ b/website/docs/zh/blog/introducing-rslib.mdx @@ -13,6 +13,8 @@ import { ImageAlt } from '../../../theme/components/ImageAlt'; 我们很高兴地向大家介绍 Rslib —— **一款基于 Rspack 的库开发工具**。Rslib 由字节跳动 Web Infra 团队开发，能够帮助开发者以简单直观的方式创建 JavaScript 库和 UI 组件库，并享受 [Rspack](https://rspack.dev/zh/) 和 [Rsbuild](https://rsbuild.dev/zh/) 带来的极致开发体验。 +> 仓库地址：https://github.com/web-infra-dev/rslib + ## 为什么要做 Rslib 过去，webpack 主要用于打包 web 应用，当开发 JavaScript 库时，开发者通常会引入 esbuild 或 Rollup 等优秀的打包工具，它们能够输出高质量的 ESM 和 CJS 产物，更好地满足 JavaScript 库的打包需求。 From 7b8d80d72cb4a19590217b74e9a71933dd605567 Mon Sep 17 00:00:00 2001 From: Timeless0911 <50201324+Timeless0911@users.noreply.github.com> Date: Tue, 13 May 2025 19:09:55 +0800 Subject: [PATCH 6/9] Update website/docs/en/blog/introducing-rslib.mdx Co-authored-by: neverland --- website/docs/en/blog/introducing-rslib.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/en/blog/introducing-rslib.mdx b/website/docs/en/blog/introducing-rslib.mdx index 1154be643..4e6da55c4 100644 --- a/website/docs/en/blog/introducing-rslib.mdx +++ b/website/docs/en/blog/introducing-rslib.mdx @@ -125,7 +125,7 @@ Beyond common JavaScript library development solutions, based on Rspack and the Currently, Rspack / Rsbuild / Rspress and other projects in the Rstack toolchain are using Rslib for building, with tens of thousands of weekly downloads, serving multiple businesses within ByteDance, and is also the [recommended solution](https://module-federation.io/guide/basic/rsbuild.html#rslib-module) for Module Federation modules. -Rslib is currently in 0.x stage. We will release stable version 1.0 after further optimizing output output and confirming the final API and configuration design. You can track the progress of version 1.0 [milestone](https://github.com/web-infra-dev/rslib/milestone/1) on GitHub. +Rslib is currently in 0.x stage. We plan to release v1.0 after further optimizing the output and stabilizing the final API and configuration design. You can track the progress of version 1.0 [milestone](https://github.com/web-infra-dev/rslib/milestone/1) on GitHub. ## Start using Rslib From 1e1cc211aeaf7703b334561cf3de43546db92993 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=B4=E9=99=88=E5=A8=81?= Date: Tue, 13 May 2025 19:26:45 +0800 Subject: [PATCH 7/9] chore: update --- website/docs/en/blog/introducing-rslib.mdx | 42 ++++++++++++++++++--- website/docs/zh/blog/introducing-rslib.mdx | 44 ++++++++++++++++++---- website/theme/components/ImageAlt.tsx | 1 + 3 files changed, 74 insertions(+), 13 deletions(-) diff --git a/website/docs/en/blog/introducing-rslib.mdx b/website/docs/en/blog/introducing-rslib.mdx index 4e6da55c4..dfb9f928c 100644 --- a/website/docs/en/blog/introducing-rslib.mdx +++ b/website/docs/en/blog/introducing-rslib.mdx @@ -39,7 +39,12 @@ Therefore, we created Rslib. **Based on the well-designed configurations and plu We hope Rslib can provide more powerful features for library developers and become an important part of the Rspack ecosystem, continuously promoting the development of unified toolchains based on Rspack. -![Rslib in Rstack ecosystem](https://assets.rspack.dev/others/assets/rslib/rslib-in-rstack.png) +Rslib in Rstack ecosystem The location of Rslib in the Rstack ecosystem @@ -59,11 +64,21 @@ Rslib provides a comprehensive library building solution that covers most curren For TypeScript declaration files (d.ts), besides supporting d.ts file generation and related post-processing based on TypeScript Compiler API, it also supports bundling d.ts files using [@microsoft/api-extractor](https://www.npmjs.com/package/@microsoft/api-extractor), suitable for handling complex dependency scenarios. - ![Multiple formats in one configuration file](https://assets.rspack.dev/others/assets/rslib/multiple-formats-config.png) + Multiple formats in one configuration file Multiple formats in one configuration file - ![Clean ESM output](https://assets.rspack.dev/others/assets/rslib/simple-esm-output.png) + Clean ESM output Clean ESM output @@ -71,7 +86,12 @@ Rslib provides a comprehensive library building solution that covers most curren Rslib supports both bundle and bundleless build modes during build process. For bundleless scenarios, it also supports [output path redirection](/config/lib/redirect) feature, solving common issues with alias replacement in JavaScript and d.ts output paths, as well as strict path reference requirements in ESM. - ![bundleless output structure](https://assets.rspack.dev/rslib/rslib-bundleless-mode.png) + bundleless output structure bundleless output structure @@ -81,7 +101,12 @@ Rslib provides a comprehensive library building solution that covers most curren Leveraging Rsbuild's plugin system and ecosystem, Rslib can directly reuse solutions for Sass, Less, Stylus, CSS Modules, and Tailwind CSS. Whether in bundle or bundleless scenarios, users can process styles just like building web application, directly through configuration or installing corresponding plugins. - ![Support multiple style solutions](https://assets.rspack.dev/others/assets/rslib/multiple-styles-config.png) + Support multiple style solutions Support multiple style solutions @@ -115,7 +140,12 @@ Beyond common JavaScript library development solutions, based on Rspack and the - Use [ESLint plugin](https://github.com/rspack-contrib/rsbuild-plugin-eslint) for ESLint validation during development. - Use [publint plugin](https://github.com/rspack-contrib/rsbuild-plugin-publint) to check if the library's package.json is configured correctly. - ![Use publint to check package.json](https://assets.rspack.dev/others/assets/rslib/publint-screenshot.png) + Use publint to check package.json Use publint to check package.json diff --git a/website/docs/zh/blog/introducing-rslib.mdx b/website/docs/zh/blog/introducing-rslib.mdx index e46e11bed..bba5e0538 100644 --- a/website/docs/zh/blog/introducing-rslib.mdx +++ b/website/docs/zh/blog/introducing-rslib.mdx @@ -39,7 +39,12 @@ import { ImageAlt } from '../../../theme/components/ImageAlt'; 我们希望 Rslib 能为库开发者提供更强大的能力，并成为 Rspack 生态中的重要组成部分，持续推动基于 Rspack 的统一工具链的发展。 -![Rslib 在 Rstack 生态中的位置](https://assets.rspack.dev/others/assets/rslib/rslib-in-rstack.png) +Rslib 在 Rstack 生态中的位置 Rslib 在 Rstack 生态中的位置 @@ -59,11 +64,21 @@ Rslib 提供了一套全面的库构建解决方案，涵盖了目前大部分 对于 TypeScript 类型声明文件（d.ts），除了支持基于 TypeScript Compiler API 生成 d.ts 文件及相关后处理，也支持基于 [@microsoft/api-extractor](https://www.npmjs.com/package/@microsoft/api-extractor) 对 d.ts 文件进行打包，适合处理依赖复杂的场景。 - ![一个配置文件中包含多种格式](https://assets.rspack.dev/others/assets/rslib/multiple-formats-config.png) + 一个配置文件中包含多种格式 一个配置文件中包含多种格式 - ![纯净的 ESM 产物](https://assets.rspack.dev/others/assets/rslib/simple-esm-output.png) + 纯净的 ESM 产物 纯净的 ESM 产物 @@ -71,7 +86,12 @@ Rslib 提供了一套全面的库构建解决方案，涵盖了目前大部分 Rslib 支持在构建时选择打包（bundle）或仅做转换（bundleless）这两种常见的构建模式。对于 bundleless 场景，还支持了 [产物路径重定向](/config/lib/redirect) 功能，从而解决了常见的 JavaScript 和 d.ts 产物路径中别名替换以及 ESM 要求严格引用路径的问题。 - ![bundleless 产物结构](https://assets.rspack.dev/rslib/rslib-bundleless-mode.png) + bundleless 产物结构 bundleless 产物结构 @@ -81,7 +101,12 @@ Rslib 提供了一套全面的库构建解决方案，涵盖了目前大部分 借助 Rsbuild 的插件系统和生态，Rslib 可以直接复用 Sass、Less、Stylus、CSS Modules、Tailwind CSS 的解决方案。无论是在 bundle 还是 bundleless 的场景下，用户都可以像构建 web 应用一样，直接通过配置或安装相应插件来进行样式的处理。 - ![支持多种样式解决方案](https://assets.rspack.dev/others/assets/rslib/multiple-styles-config.png) + 支持多种样式解决方案 支持多种样式解决方案 @@ -115,9 +140,14 @@ Rslib 提供了一套全面的库构建解决方案，涵盖了目前大部分 - 使用 [ESLint 插件](https://github.com/rspack-contrib/rsbuild-plugin-eslint) 在开发时进行 ESLint 校验。 - 使用 [publint 插件](https://github.com/rspack-contrib/rsbuild-plugin-publint) 检查开发的库的 package.json 是否配置正确。 - ![使用 publint 检查 package.json 正确性](https://assets.rspack.dev/others/assets/rslib/publint-screenshot.png) + 使用 publint 检查 package.json 正确性 - 使用 publint 检查 package.json 的正确性 + 使用 publint 检查 package.json 的正确性 > 更多插件的信息请参考 [Rsbuild 插件总览](https://rsbuild.dev/zh/plugins/list/)。 diff --git a/website/theme/components/ImageAlt.tsx b/website/theme/components/ImageAlt.tsx index 93a110ce6..269fbd8ea 100644 --- a/website/theme/components/ImageAlt.tsx +++ b/website/theme/components/ImageAlt.tsx @@ -4,6 +4,7 @@ export const ImageAlt = (props: { children?: React.ReactNode }) => { style={{ textAlign: 'center', fontSize: '0.8rem', + margin: '0.5rem 0', color: '#999', }} > From b45b26c46437bd5a40787702b7541b291dbdd1ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=B4=E9=99=88=E5=A8=81?= Date: Tue, 13 May 2025 20:31:28 +0800 Subject: [PATCH 8/9] chore: update --- website/docs/en/blog/introducing-rslib.mdx | 8 +++++++- website/docs/zh/blog/index.mdx | 2 +- website/docs/zh/blog/introducing-rslib.mdx | 10 ++++++++-- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/website/docs/en/blog/introducing-rslib.mdx b/website/docs/en/blog/introducing-rslib.mdx index dfb9f928c..528214d0d 100644 --- a/website/docs/en/blog/introducing-rslib.mdx +++ b/website/docs/en/blog/introducing-rslib.mdx @@ -155,7 +155,13 @@ Beyond common JavaScript library development solutions, based on Rspack and the Currently, Rspack / Rsbuild / Rspress and other projects in the Rstack toolchain are using Rslib for building, with tens of thousands of weekly downloads, serving multiple businesses within ByteDance, and is also the [recommended solution](https://module-federation.io/guide/basic/rsbuild.html#rslib-module) for Module Federation modules. -Rslib is currently in 0.x stage. We plan to release v1.0 after further optimizing the output and stabilizing the final API and configuration design. You can track the progress of version 1.0 [milestone](https://github.com/web-infra-dev/rslib/milestone/1) on GitHub. +Rslib is currently in the 0.x stage and we plan to release v1.0 after achieving the following key goals: + +- Stabilize the final configuration and API design +- Optimize the quality of the build output +- Support bundleless mode for Vue, Solid and more frameworks + +You can track the progress by checking v1.0 [Milestone](https://github.com/web-infra-dev/rslib/milestone/1) on GitHub. ## Start using Rslib diff --git a/website/docs/zh/blog/index.mdx b/website/docs/zh/blog/index.mdx index 8bda52896..8ccb63add 100644 --- a/website/docs/zh/blog/index.mdx +++ b/website/docs/zh/blog/index.mdx @@ -7,7 +7,7 @@ sidebar: false 在此查看有关 Rslib 的最新文章和发布公告。 -## [Rslib: Build library with Rspack](/blog/introducing-rslib) +## [Rspack 生态升级！全新库开发工具 Rslib 发布](/blog/introducing-rslib) > 2025 年 5 月 14 日 diff --git a/website/docs/zh/blog/introducing-rslib.mdx b/website/docs/zh/blog/introducing-rslib.mdx index bba5e0538..37dfa8242 100644 --- a/website/docs/zh/blog/introducing-rslib.mdx +++ b/website/docs/zh/blog/introducing-rslib.mdx @@ -7,7 +7,7 @@ _2025 年 5 月 14 日_ import { ImageAlt } from '../../../theme/components/ImageAlt'; -# Rslib: Build library with Rspack +# Rspack 生态升级！全新库开发工具 Rslib 发布 ![banner](https://assets.rspack.dev/rslib/rslib-banner.png) @@ -155,7 +155,13 @@ Rslib 提供了一套全面的库构建解决方案，涵盖了目前大部分 目前 Rstack 工具链中的 Rspack / Rsbuild / Rspress 等项目已经使用 Rslib 进行构建，周下载量数万，在字节内部已经服务了多个业务，同时也是 Module Federation 模块的 [推荐解决方案](https://module-federation.io/guide/basic/rsbuild.html#rslib-module)。 -Rslib 目前处于 0.x 阶段，我们将在进一步优化产物输出，并确认最终 API 和配置的设计后发布 1.0 稳定版。你可以在 GitHub 上查看 1.0 版本的 [里程碑](https://github.com/web-infra-dev/rslib/milestone/1) 追踪进展。 +Rslib 目前处于 0.x 阶段，我们计划在达成以下关键目标后发布 v1.0 版本： + +- 确认最终配置和 API 的设计 +- 优化构建产物的质量 +- 支持 Vue、Solid 等更多框架的 bundleless 开发模式 + +你可以通过在 GitHub 中查看 v1.0 版本的 [里程碑](https://github.com/web-infra-dev/rslib/milestone/1) 追踪进展。 ## 开始使用 Rslib From 8462f819dc20f3f3a93f6b5fc9714b573e11fc2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=B4=E9=99=88=E5=A8=81?= Date: Tue, 13 May 2025 20:42:00 +0800 Subject: [PATCH 9/9] chore: update --- pnpm-lock.yaml | 31 +++++++++++++++++++++++++++++++ website/package.json | 1 + website/rspress.config.ts | 33 ++++++++++++++++++++++++++++++++- 3 files changed, 64 insertions(+), 1 deletion(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index db70fb248..32aaededc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1039,6 +1039,9 @@ importers: '@rspress/plugin-llms': specifier: 2.0.0-beta.5 version: 2.0.0-beta.5(@rspress/core@2.0.0-beta.5(@types/react@19.1.3)(acorn@8.14.0)(webpack@5.98.0)) + '@rspress/plugin-rss': + specifier: 2.0.0-beta.5 + version: 2.0.0-beta.5(rspress@2.0.0-beta.5(@types/react@19.1.3)(acorn@8.14.0)(webpack@5.98.0)) '@rstack-dev/doc-ui': specifier: 1.8.0 version: 1.8.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0) @@ -2617,6 +2620,12 @@ packages: peerDependencies: '@rspress/runtime': ^2.0.0-beta.5 + '@rspress/plugin-rss@2.0.0-beta.5': + resolution: {integrity: sha512-2xhB+ufQ6vYgE3FFAk6Dah624VF4wXi6n40g9iEOP2VMBMV3ZcFImR2nQ+34uej7pClTnn7fD6JaR0sfFcAyAQ==} + engines: {node: '>=18.0.0'} + peerDependencies: + rspress: ^2.0.0-beta.5 + '@rspress/plugin-shiki@2.0.0-beta.5': resolution: {integrity: sha512-LK9UH7PzxwDg89cbeCBPxYtIO3gQol5xzoXYoeTsD7If9UIxVGFCJVF6BvHdes24fZa39jtiomxUDOXF6LuT7w==} engines: {node: '>=18.0.0'} @@ -4218,6 +4227,10 @@ packages: picomatch: optional: true + feed@4.2.2: + resolution: {integrity: sha512-u5/sxGfiMfZNtJ3OvQpXcvotFpYkL0n9u9mM2vkui2nGo8b4wvDkJ8gAkYqbA8QpGyFCv3RK0Z+Iv+9veCS9bQ==} + engines: {node: '>=0.4.0'} + figures@3.2.0: resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==} engines: {node: '>=8'} @@ -7121,6 +7134,10 @@ packages: utf-8-validate: optional: true + xml-js@1.6.11: + resolution: {integrity: sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==} + hasBin: true + xtend@4.0.2: resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==} engines: {node: '>=0.4'} @@ -8819,6 +8836,12 @@ snapshots: '@rspress/runtime': 2.0.0-beta.5 medium-zoom: 1.1.0 + '@rspress/plugin-rss@2.0.0-beta.5(rspress@2.0.0-beta.5(@types/react@19.1.3)(acorn@8.14.0)(webpack@5.98.0))': + dependencies: + '@rspress/shared': 2.0.0-beta.5 + feed: 4.2.2 + rspress: 2.0.0-beta.5(@types/react@19.1.3)(acorn@8.14.0)(webpack@5.98.0) + '@rspress/plugin-shiki@2.0.0-beta.5': dependencies: '@rspress/shared': 2.0.0-beta.5 @@ -10706,6 +10729,10 @@ snapshots: optionalDependencies: picomatch: 4.0.2 + feed@4.2.2: + dependencies: + xml-js: 1.6.11 + figures@3.2.0: dependencies: escape-string-regexp: 1.0.5 @@ -14131,6 +14158,10 @@ snapshots: ws@8.18.0: {} + xml-js@1.6.11: + dependencies: + sax: 1.4.1 + xtend@4.0.2: {} y18n@5.0.8: {} diff --git a/website/package.json b/website/package.json index 0b51e6095..b8564d2e0 100644 --- a/website/package.json +++ b/website/package.json @@ -13,6 +13,7 @@ "@rsbuild/plugin-sass": "^1.3.1", "@rslib/tsconfig": "workspace:*", "@rspress/plugin-llms": "2.0.0-beta.5", + "@rspress/plugin-rss": "2.0.0-beta.5", "@rstack-dev/doc-ui": "1.8.0", "@shikijs/transformers": "^3.4.0", "@types/node": "^22.8.1", diff --git a/website/rspress.config.ts b/website/rspress.config.ts index 09f192fc1..37b13e006 100644 --- a/website/rspress.config.ts +++ b/website/rspress.config.ts @@ -1,13 +1,44 @@ import path from 'node:path'; import { pluginSass } from '@rsbuild/plugin-sass'; import { pluginLlms } from '@rspress/plugin-llms'; +import { pluginRss } from '@rspress/plugin-rss'; import { transformerNotationHighlight } from '@shikijs/transformers'; import { pluginGoogleAnalytics } from 'rsbuild-plugin-google-analytics'; import { pluginFontOpenSans } from 'rspress-plugin-font-open-sans'; import { defineConfig } from 'rspress/config'; +const siteUrl = 'https://lib.rsbuild.dev'; + export default defineConfig({ - plugins: [pluginFontOpenSans(), pluginLlms()], + plugins: [ + pluginFontOpenSans(), + pluginLlms(), + pluginRss({ + siteUrl, + feed: [ + { + id: 'blog-rss', + test: '/blog', + title: 'Rslib Blog', + language: 'en', + output: { + type: 'rss', + filename: 'blog-rss.xml', + }, + }, + { + id: 'blog-rss-zh', + test: '/zh/blog', + title: 'Rslib 博客', + language: 'zh-CN', + output: { + type: 'rss', + filename: 'blog-rss-zh.xml', + }, + }, + ], + }), + ], root: path.join(__dirname, 'docs'), lang: 'en', base: '/',