Solution#

In this chapter, we will introduce how to use Rslib to development libraries for browser and Node.js. We will also cover how to create libraries for different UI frameworks.

Browser Target#

Rslib outputs code for the browser by default, so no additional configuration is necessary to get started.

When developing a library that runs in the browser, you can package it in both ESM and CJS formats for integration with application bundlers. Configuring the package conditional exports to ESM output allows for better tree shaking. Additionally, you can create UMD format output for direct browser use and even generate Module Federation formats for dynamic loading by other applications. Configure Browserslist according to the target browser support to determine the downgrade syntax of the output, or adding polyfill for API compatibility.

When publishing to npm, you can choose not to minify your code or to minify it while providing a sourcemap 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, Preact, or other frameworks, using 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.

Node.js Target#

By setting set target to "node" to development libraries for Node.js.

You can create a pure ESM package or a dual package that supports both ESM and CJS as needed. In CJS output, import.meta.url will be automatically shimmed for compatibility and __dirname and __filename got an optional ESM shims to ensure proper use across different module system. Node.js's built-in packages will be externalized by default, simplifying the configuration.