feat: make more packages support esm exports

e2e/cases/babel/preset-node/index.test.ts

@@ -0,0 +1,15 @@
+import { build, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
+
+rspackOnlyTest(
+  'should run babel with @rsbuild/babel-preset/node correctly',
+  async () => {
+    await build({
+      cwd: __dirname,
+      runServer: true,
+    });
+
+    const { foo } = await import('./dist/server/index.js');
+    expect(foo).toEqual(1);
+  },
+);

e2e/cases/babel/preset/rsbuild.config.ts → e2e/cases/babel/preset-node/rsbuild.config.ts

@@ -1,6 +1,9 @@
 import { pluginBabel } from '@rsbuild/plugin-babel';
 
 export default {
+  output: {
+    targets: ['node'],
+  },
   plugins: [
     pluginBabel({
       babelLoaderOptions: (_, { addPresets }) => {

e2e/cases/babel/preset-node/src/index.js

@@ -0,0 +1,3 @@
+console.log('hello');
+
+export const foo = 1;

e2e/cases/babel/preset/index.test.ts → e2e/cases/babel/preset-web/index.test.ts

@@ -2,7 +2,7 @@ import { build, gotoPage, rspackOnlyTest } from '@e2e/helper';
 import { expect } from '@playwright/test';
 
 rspackOnlyTest(
-  'should run babel with @rsbuild/babel-preset correctly',
+  'should run babel with @rsbuild/babel-preset/web correctly',
   async ({ page }) => {
     const rsbuild = await build({
       cwd: __dirname,

e2e/cases/babel/preset-web/rsbuild.config.ts

@@ -0,0 +1,11 @@
+import { pluginBabel } from '@rsbuild/plugin-babel';
+
+export default {
+  plugins: [
+    pluginBabel({
+      babelLoaderOptions: (_, { addPresets }) => {
+        addPresets([require.resolve('@rsbuild/babel-preset/node')]);
+      },
+    }),
+  ],
+};

e2e/cases/mjs-artifact/test.mjs

@@ -1,3 +1,6 @@
+import { getBabelConfigForNode } from '@rsbuild/babel-preset/node';
+import { getBabelConfigForWeb } from '@rsbuild/babel-preset/web';
+import * as monorepoUtils from '@rsbuild/monorepo-utils';
 import { pluginAssetsRetry } from '@rsbuild/plugin-assets-retry';
 import { pluginBabel } from '@rsbuild/plugin-babel';
 import { pluginCheckSyntax } from '@rsbuild/plugin-check-syntax';
@@ -17,6 +20,7 @@ import { pluginStyledComponents } from '@rsbuild/plugin-styled-components';
 import { pluginStylus } from '@rsbuild/plugin-stylus';
 import { pluginSvelte } from '@rsbuild/plugin-svelte';
 import { pluginSvgr } from '@rsbuild/plugin-svgr';
+import { pluginSwc } from '@rsbuild/plugin-swc';
 import { pluginToml } from '@rsbuild/plugin-toml';
 import { pluginTypeCheck } from '@rsbuild/plugin-type-check';
 import { pluginUmd } from '@rsbuild/plugin-umd';
@@ -26,6 +30,7 @@ import { pluginVue2 } from '@rsbuild/plugin-vue2';
 import { pluginVue2Jsx } from '@rsbuild/plugin-vue2-jsx';
 import { pluginYaml } from '@rsbuild/plugin-yaml';
 import * as shared from '@rsbuild/shared';
+import { webpackProvider } from '@rsbuild/webpack';
 
 export default {
   shared,
@@ -56,4 +61,9 @@ export default {
   pluginToml,
   pluginYaml,
   pluginMdx,
+  pluginSwc,
+  getBabelConfigForWeb,
+  getBabelConfigForNode,
+  webpackProvider,
+  monorepoUtils,
 };

e2e/package.json

@@ -24,6 +24,7 @@
     "@playwright/test": "1.44.0",
     "@rsbuild/babel-preset": "workspace:*",
     "@rsbuild/core": "workspace:*",
+    "@rsbuild/monorepo-utils": "workspace:*",
     "@rsbuild/plugin-assets-retry": "workspace:*",
     "@rsbuild/plugin-babel": "workspace:*",
     "@rsbuild/plugin-check-syntax": "workspace:*",

packages/compat/babel-preset/modern.config.ts

@@ -1,3 +1,15 @@
-import baseConfig from '../../../scripts/modern.base.config';
+import { moduleTools } from '@modern-js/module-tools';
+import { buildConfigWithMjs } from '../../../scripts/modern.base.config';
 
-export default baseConfig;
+export default {
+  plugins: [moduleTools()],
+  buildConfig: buildConfigWithMjs.map((config) => {
+    config.input = [
+      'src/index.ts',
+      'src/web.ts',
+      'src/node.ts',
+      'src/pluginLockCorejsVersion.ts',
+    ];
+    return config;
+  }),
+};

packages/compat/babel-preset/package.json

@@ -9,22 +9,25 @@
     "directory": "packages/babel-preset"
   },
   "license": "MIT",
-  "type": "commonjs",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
     },
     "./web": {
       "types": "./dist/web.d.ts",
-      "default": "./dist/web.js"
+      "require": "./dist/web.cjs",
+      "import": "./dist/web.js"
     },
     "./node": {
       "types": "./dist/node.d.ts",
-      "default": "./dist/node.js"
+      "require": "./dist/node.cjs",
+      "import": "./dist/node.js"
     }
   },
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {

packages/compat/babel-preset/src/web.ts

@@ -48,7 +48,7 @@ export const getBabelConfigForWeb = (options: WebPresetOptions) => {
     ]);
   }
 
-  config.plugins?.push(join(__dirname, './pluginLockCorejsVersion'));
+  config.plugins?.push(join(__dirname, './pluginLockCorejsVersion.cjs'));
 
   return config;
 };

packages/compat/babel-preset/tests/__snapshots__/web.test.ts.snap

@@ -24,7 +24,7 @@ exports[`should allow to enable legacy decorator 1`] = `
         "version": "7.24.5",
       },
     ],
-    "<ROOT>/packages/compat/babel-preset/src/pluginLockCorejsVersion",
+    "<ROOT>/packages/compat/babel-preset/src/pluginLockCorejsVersion.cjs",
   ],
   "presets": [
     [
@@ -84,7 +84,7 @@ exports[`should allow to enable specific version decorator 1`] = `
         "version": "7.24.5",
       },
     ],
-    "<ROOT>/packages/compat/babel-preset/src/pluginLockCorejsVersion",
+    "<ROOT>/packages/compat/babel-preset/src/pluginLockCorejsVersion.cjs",
   ],
   "presets": [
     [
@@ -134,7 +134,7 @@ exports[`should provide web preset as expected 1`] = `
         "version": "7.24.5",
       },
     ],
-    "<ROOT>/packages/compat/babel-preset/src/pluginLockCorejsVersion",
+    "<ROOT>/packages/compat/babel-preset/src/pluginLockCorejsVersion.cjs",
   ],
   "presets": [
     [
@@ -225,7 +225,7 @@ exports[`should support inject core-js polyfills by entry 1`] = `
         "version": "7.24.5",
       },
     ],
-    "<ROOT>/packages/compat/babel-preset/src/pluginLockCorejsVersion",
+    "<ROOT>/packages/compat/babel-preset/src/pluginLockCorejsVersion.cjs",
   ],
   "presets": [
     [
@@ -278,7 +278,7 @@ exports[`should support inject core-js polyfills by usage 1`] = `
         "version": "7.24.5",
       },
     ],
-    "<ROOT>/packages/compat/babel-preset/src/pluginLockCorejsVersion",
+    "<ROOT>/packages/compat/babel-preset/src/pluginLockCorejsVersion.cjs",
   ],
   "presets": [
     [

packages/compat/plugin-swc/modern.config.ts

@@ -1,3 +1,13 @@
-import baseConfig from '../../../scripts/modern.base.config';
+import { moduleTools } from '@modern-js/module-tools';
+import { buildConfigWithMjs } from '../../../scripts/modern.base.config';
 
-export default baseConfig;
+export default {
+  plugins: [moduleTools()],
+  buildConfig: buildConfigWithMjs.map((config) => {
+    if (config.format === 'cjs') {
+      // add loader to entry
+      config.input = ['src/index.ts', 'src/loader.ts'];
+    }
+    return config;
+  }),
+};

packages/compat/plugin-swc/package.json

@@ -8,26 +8,15 @@
     "directory": "packages/compat/plugin-swc"
   },
   "license": "MIT",
-  "type": "commonjs",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./loader": {
-      "types": "./dist/loader.d.ts",
-      "default": "./dist/loader.js"
-    },
-    "./plugin": {
-      "types": "./dist/plugin.d.ts",
-      "default": "./dist/plugin.js"
-    },
-    "./binding": {
-      "types": "./dist/binding.d.ts",
-      "default": "./dist/binding.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
   },
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "types": "./dist/index.d.ts",
   "files": [
     "dist"

packages/compat/plugin-swc/src/minimizer.ts

@@ -3,11 +3,11 @@ import {
   CSS_REGEX,
   type NormalizedConfig,
   color,
+  deepmerge,
   getSwcMinimizerOptions,
   parseMinifyOptions,
 } from '@rsbuild/shared';
 import type { webpack } from '@rsbuild/webpack';
-import { merge } from 'lodash';
 import { minify, minifyCss } from './binding';
 import { JS_REGEX } from './constants';
 import type { CssMinifyOptions, JsMinifyOptions, Output } from './types';
@@ -43,7 +43,7 @@ export class SwcMinimizerPlugin {
     const { minifyJs, minifyCss } = parseMinifyOptions(options.rsbuildConfig);
     this.minifyOptions = {
       jsMinify: minifyJs
-        ? merge(
+        ? deepmerge(
             this.getDefaultJsMinifyOptions(options.rsbuildConfig),
             normalize(options.jsMinify, {}),
           )

packages/compat/plugin-swc/src/plugin.ts

@@ -77,7 +77,7 @@ export const pluginSwc = (options: PluginSwcOptions = {}): RsbuildPlugin => ({
           rule
             .test(test || SCRIPT_REGEX)
             .use(CHAIN_ID.USE.SWC)
-            .loader(path.resolve(__dirname, './loader'))
+            .loader(path.resolve(__dirname, './loader.cjs'))
             .options(removeUselessOptions(swcConfig) satisfies TransformConfig);
 
           if (include) {
@@ -113,7 +113,7 @@ export const pluginSwc = (options: PluginSwcOptions = {}): RsbuildPlugin => ({
           .resolve.set('fullySpecified', false)
           .end()
           .use(CHAIN_ID.USE.SWC)
-          .loader(path.resolve(__dirname, './loader'))
+          .loader(path.resolve(__dirname, './loader.cjs'))
           .options(removeUselessOptions(mainConfig) satisfies TransformConfig);
       },
     });