#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

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 add a 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, and use 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

Rslib set target to "node" by default 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 optional ESM shims to ensure proper use across different module system. Node.js's built-in packages will be externalized by default.