Differences in usage between Rsbuild and Modern.js builder

[9aoy]

In Rsbuild, some capabilities no longer have built-in support. Such as, TypeScript type checker、babel translation.

[chenjiahan]

Config Changes

• styledComponents config changed: Extract the styledComponents plugin as a standalone package #24
• tools.inspector removed: Remove inspector plugin and update doc #92
• Rename html.disableHtmlFolder to html.outputStructure: Align the dist directory struct with other community tools #14
• tools.tsChecker -> pluginTypeCheck({ forkTsCheckerOptions: {} }) Extract the tsChecker plugin as a standalone package #65
• output.disableTsChecker -> pluginTypeCheck({ enable: false }) Extract the tsChecker plugin as a standalone package #65
• security.checkSyntax -> pluginCheckSyntax() Extract the checkSyntax plugin as a standalone package #263
• output.polyfill defaults to usage now perf: switch the default polyfill mode to usage #298

Other Changes

• Default browserslist changed: Adjust the default browserslist config #73
• The modern-web target is removed: Remove the modern-web build target #64
• plugin name changed: builderPluginXXX -> pluginXXX
• builder.serve is renamed to rsbuild.preview
• Most default PostCSS plugins are removed: [Feature]: Reduce builtin PostCSS plugins #115

[9aoy]

• Not compile JavaScript files under node_modules by default: Use rspack bulitin:swc-loader instead of transformByDefault #96

config and plugin changes

• extract svgr as a standalone package feat: extract svgr as a standalone package #201

Unsupported configurations:

• output.svgDefaultExport
• output.disableSvgr

[chenjiahan]

We can consider creating a @modern-js/rsbuild-plugin-comat-builder, and use this plugin to provide the compat configs, this allows PIA to reuse it.

[9aoy]

Use Rsbuild Server instead of Modern.js Server, the api and configurations have some breaking changes.

related issues

• Redesign the dev server, decouple with Modern.js server #3
• [Feature]: simplify rsbuild dev-related configurations #444

configuration changes

• tools.devServer.watch
• tools.devServer.liveReload
• tools.devServer.before (use dev.setupMiddlewares.unshift instead)
• tools.devServer.after (use dev.setupMiddlewares.push instead)
• tools.devServer.hot (use dev.hmr instead)
• tools.devServer.https (use server.https instead)
• tools.devServer.client => dev.client
• tools.devServer.setupMiddlewares => dev.setupMiddlewares
• tools.devServer.proxy => server.proxy
• tools.devServer.compress => server.compress
• tools.devServer.devMiddleware => dev.writeToDisk
• tools.devServer.headers => server.headers
• tools.devServer.historyApiFallback => server.historyApiFallback