> For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt.

# 总览

在本章中，将介绍如何使用 Rslib 开发浏览器和 Node.js 的库。我们还将介绍如何为不同的 UI 框架创建库。

## Browser target

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

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

在资源处理方面，Rslib 可以处理代码中使用的 SVG 和 PNG 等静态资源，并支持为 ESM 库编译 [Web Worker](/zh/guide/advanced/web-workers.md)。你还可以构建 [React](/zh/guide/solution/react.md)、[Preact](https://github.com/rstackjs/rstack-examples/tree/main/rslib/preact) 或其他框架的组件库，并使用 [Storybook](/zh/guide/advanced/storybook.md) 进行 UI 组件开发和测试。

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



## Node.js target

Rslib 默认将 [target](/zh/config/rsbuild/output.md#outputtarget) 设置为 `"node"`，以方便开发 Node.js 中使用的库。

你可以创建一个 [pure ESM](/zh/guide/basic/output-format.md#esm--cjs) 包或者 [dual package](/zh/guide/basic/output-format.md#esm--cjs) 同时按需支持 ESM 和 CJS。在 CJS 输出中，由于兼容性 `import.meta.url` 会被自动 [shimmed](/zh/config/lib/shims.md)，同时 `__dirname` 和 `__filename` 有可选的 ESM shims，以确保在不同的模块系统中正确使用。Node.js 中的 built-in packages 会被 [默认 externalized](/zh/guide/advanced/third-party-deps.md)。