Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions website/docs/en/guide/advanced/module-federation.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import MF from '../start/components/MF.mdx';
import { Tab, Tabs } from 'rspress/theme';

# Module Federation

Expand Down Expand Up @@ -356,10 +355,8 @@ export default defineConfig({

## Examples

[Rslib Module Federation Example](https://github.com/web-infra-dev/rslib/tree/main/examples/module-federation)
You can refer to the example projects in [Rslib Module Federation Example](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib/module-federation).

- `mf-host`: Rsbuild App Consumer
- `mf-react-component`: Rslib Module, which is both a producer and a consumer, provides the module to the `mf-host` as a producer, and consumes the `mf-remote`
- `mf-remote`: Rsbuild App Producer

[Rslib Module Federation Storybook Example](https://github.com/web-infra-dev/rslib/tree/main/examples/module-federation/mf-react-component)
4 changes: 2 additions & 2 deletions website/docs/en/guide/advanced/storybook.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -98,5 +98,5 @@ Check out more details in the [Storybook Rsbuild documentation](https://storyboo

## Example

- [React component library + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/rslib-react-component)
- [Vue component library + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/rslib-vue3-component)
- [React component library + Rslib + Storybook](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib/react-storybook)
- [Vue component library + Rslib + Storybook](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib/vue-storybook)
2 changes: 1 addition & 1 deletion website/docs/en/guide/solution/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ When developing a library that runs in the browser, you can package it in both [

When publishing to npm, you can choose not to [minify](/config/rsbuild/output#outputminify) your code or to minify it while providing a [sourcemap](/config/rsbuild/output#outputsourcemap) to enhance the debugging experience for users of your library. For styling, you can use CSS, or CSS pre-processors like Sass, Less, or Stylus, or apply PostCSS for CSS post-processing. Tools like Tailwind CSS can also help in building your styles. Using CSS Modules to create CSS modules is another option.

In terms of resource management, Rslib handles static assets used in your code, such as SVG and PNG files. You can also build a component library of [React](/guide/solution/react), [Preact](https://github.com/web-infra-dev/rslib/tree/main/examples/preact-component-bundle-false), or other frameworks, and use [Storybook](/guide/advanced/storybook) for UI component development and testing.
In terms of resource management, Rslib handles static assets used in your code, such as SVG and PNG files. You can also build a component library of [React](/guide/solution/react), [Preact](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib/preact), or other frameworks, and use [Storybook](/guide/advanced/storybook) for UI component development and testing.

Refer to the solutions in this chapter to learn how to use Rslib to develop browser libraries for different frameworks.

Expand Down
2 changes: 1 addition & 1 deletion website/docs/en/guide/solution/nodejs.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Node.js

In this document, you will learn how to build a Node.js library using Rslib.
In this document, you will learn how to build a Node.js library using Rslib. You can check out Node.js related example projects in [Examples](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib).

## Create Node.js project

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

In this document, you will learn how to build a React component library with Rslib. You can check out React related demo projects in the [examples](https://github.com/web-infra-dev/rslib/tree/main/examples).
In this document, you will learn how to build a React component library with Rslib. You can check out React related example projects in [Examples](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib).

## Create React project

Expand Down
2 changes: 1 addition & 1 deletion website/docs/en/guide/solution/vue.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Vue

In this document, you will learn how to build a Vue component library using Rslib. You can check out Vue related demo projects in the [examples](https://github.com/web-infra-dev/rslib/tree/main/examples).
In this document, you will learn how to build a Vue component library using Rslib. You can check out Vue related example projects in [Examples](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib).

::: note

Expand Down
5 changes: 1 addition & 4 deletions website/docs/zh/guide/advanced/module-federation.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import MF from '../start/components/MF.mdx';
import { Tab, Tabs } from 'rspress/theme';

# 模块联邦

Expand Down Expand Up @@ -355,10 +354,8 @@ export default defineConfig({

## 示例

[Rslib 模块联邦示例](https://github.com/web-infra-dev/rslib/tree/main/examples/module-federation)
你可以在 [Rslib 模块联邦示例](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib/module-federation) 中查看相关项目。

- `mf-host`: Rsbuild App 消费者
- `mf-react-component`: Rslib Module, 同时是消费者和生产者, 作为生产者向 `mf-host` 提供模块, 并消费 `mf-remote`
- `mf-remote`: Rsbuild App 生产者

[Rslib 模块联邦 Storybook 示例](https://github.com/web-infra-dev/rslib/tree/main/examples/module-federation/mf-react-component)
4 changes: 2 additions & 2 deletions website/docs/zh/guide/advanced/storybook.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -98,5 +98,5 @@ npx storybook build // 构建静态文件

## 示例

- [React 组件库 + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/rslib-react-component)
- [Vue 组件库 + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/vue3)
- [React 组件库 + Rslib + Storybook](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib/react-storybook)
- [Vue 组件库 + Rslib + Storybook](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib/vue-storybook)
2 changes: 1 addition & 1 deletion website/docs/zh/guide/solution/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

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

在资源处理方面,Rslib 处理代码中使用的静态资源,例如 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 处理代码中使用的静态资源,例如 SVG 和 PNG 文件。你还可以构建[React](/guide/solution/react)、[Preact](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib/preact) 或其他框架,使用 [Storybook](/guide/advanced/storybook) 进行 UI 组件开发和测试。

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

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

在本文档中,你将学习如何使用 Rslib 构建 Node.js 库。
在本文档中,你将学习如何使用 Rslib 构建 Node.js 库,你可在 [示例](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib) 中查看 Node.js 相关演示项目

## 创建 Node.js 项目

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

在本文档中,你将学习如何使用 Rslib 构建 React 组件库,你可在 [示例](https://github.com/web-infra-dev/rslib/tree/main/examples) 中查看 React 相关演示项目。
在本文档中,你将学习如何使用 Rslib 构建 React 组件库,你可在 [示例](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib) 中查看 React 相关演示项目。

## 创建 React 项目

Expand Down
2 changes: 1 addition & 1 deletion website/docs/zh/guide/solution/vue.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Vue

在本文档中,你将学习如何使用 Rslib 构建 Vue 组件库你可在 [示例](https://github.com/web-infra-dev/rslib/tree/main/examples) 中查看 Vue 相关演示项目。
在本文档中,你将学习如何使用 Rslib 构建 Vue 组件库你可在 [示例](https://github.com/rspack-contrib/rstack-examples/tree/main/rslib) 中查看 Vue 相关演示项目。

::: note

Expand Down
Loading