解决方案#

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

Browser target#

开发在浏览器中运行的库时，可以将其打包为 ESM 和 CJS 格式，用于与 app 的 bundler 集成。将包 conditional-exports 配置为 ESM 输出可以更好地进行 treeshaking。此外，你可以创建 UMD 格式输出以供浏览器直接使用，甚至可以生成 模块联邦 格式以供其他应用程序动态加载。根据目标浏览器支持配置 Browserslist以确定输出的降级语法，或添加 polyfill 用于兼容 API。

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

在资源处理方面，Rslib 处理代码中使用的静态资源，例如 SVG 和 PNG 文件。你还可以构建React、Preact 或其他框架，使用 Storybook 进行 UI 组件开发和测试。

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

Node.js target#

Rslib 默认将 target 设置为 "node"，以方便开发 Node.js 中使用的库。

你可以创建一个 pure ESM 包或者 dual package 同时按需支持 ESM 和 CJS。在 CJS 输出中，由于兼容性 import.meta.url 会被自动 shimmed，同时 __dirname 和 __filename 有可选的 ESM shims，以确保在不同的模块系统中正确使用。Node.js 中的 built-in packages 会被 默认 externalized。