Summary

Background

While developing the Client, I encountered an issue affecting the development experience - the development version code was being bundled and minified. This led to efficiency problems.
For example, I couldn't view component names through the React dev tools plugin, and it was difficult to locate target files.

Here is my dev workflow：

• Startup:
  1. Launch an examples project, such as the build:analysis command for rspress-minimal
  2. Sequentially start the start commands for packages/client and packages/components
• Development:
  1. Local file changes trigger repackaging of the package
  2. Wait for packaging to complete before refreshing the browser to see effects

Solution

1. packages/components uses modernjs for bundling, with sourcemap config added
2. packages/client uses rsbuild for building, through add NODE_ENV=development environment variable to the script start to trigger development mode
3. Since client rebundles the components content, through add source-map-loader to ensure components code can be properly restored

old：

new：