chore: migrate CommonJS rspack configs to ESM (#423)

Author: chenjiahan

pnpm-lock.yaml

@@ -1,9 +1,10 @@
-const { rspack } = require('@rspack/core');
-const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
-const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');
+// @ts-check
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
 
-/** @type {import('@rspack/cli').Configuration} */
-module.exports = {
+export default defineConfig({
   entry: {
     main: './src/index.tsx',
   },
@@ -54,4 +55,4 @@ module.exports = {
   experiments: {
     css: true,
   },
-};
+});

rsdoctor/rspack/rspack.config.js rsdoctor/rspack/rspack.config.mjsrsdoctor/rspack/rspack.config.js renamed to rsdoctor/rspack/rspack.config.mjs

@@ -1,16 +1,13 @@
 // @ts-check
 import path from 'node:path';
-import { fileURLToPath } from 'node:url';
 import { defineConfig } from '@rspack/cli';
 import { rspack } from '@rspack/core';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
 export default defineConfig({
   entry: './src/index.ts',
   resolve: {
     tsConfig: {
-      configFile: path.resolve(__dirname, 'tsconfig.json'),
+      configFile: path.resolve(import.meta.dirname, 'tsconfig.json'),
     },
     extensions: ['...', '.ts'],
   },

rspack/basic-ts/rspack.config.mjs

@@ -1,13 +1,9 @@
 // @ts-check
-
-import { createRequire } from 'node:module';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { defineConfig } from '@rspack/cli';
 import { rspack } from '@rspack/core';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const require = createRequire(import.meta.url);
 const isProduction = process.env.NODE_ENV === 'production';
 
 export default defineConfig({
@@ -17,7 +13,7 @@ export default defineConfig({
   resolve: {
     extensions: ['...', '.jsx'],
     alias: {
-      '@swc/helpers': path.dirname(require.resolve('@swc/helpers/package.json')),
+      '@swc/helpers': path.dirname(fileURLToPath(import.meta.resolve('@swc/helpers/package.json'))),
     },
   },
   module: {
@@ -56,7 +52,7 @@ export default defineConfig({
                   [
                     '@swc/plugin-relay',
                     {
-                      rootDir: __dirname,
+                      rootDir: import.meta.dirname,
                       artifactDirectory: 'src/__generated__',
                       language: 'typescript',
                     },

rspack/builtin-swc-loader/rspack.config.mjs

@@ -1,7 +1,9 @@
-const { rspack } = require('@rspack/core');
-const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
+
+export default defineConfig({
   entry: {
     main: './src/index.tsx',
   },
@@ -55,5 +57,4 @@ const config = {
       ],
     }),
   ],
-};
-module.exports = config;
+});

rspack/cra-ts/rspack.config.js rspack/cra-ts/rspack.config.mjsrspack/cra-ts/rspack.config.js renamed to rspack/cra-ts/rspack.config.mjs

@@ -1,8 +1,9 @@
-const { rspack } = require('@rspack/core');
-const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
 
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+export default defineConfig({
   entry: {
     main: './src/index.jsx',
   },
@@ -56,5 +57,4 @@ const config = {
       ],
     }),
   ],
-};
-module.exports = config;
+});

rspack/cra/rspack.config.js rspack/cra/rspack.config.mjsrspack/cra/rspack.config.js renamed to rspack/cra/rspack.config.mjs

@@ -1,7 +1,8 @@
-const { rspack } = require('@rspack/core');
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
 
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+export default defineConfig({
   entry: './src/index.js',
   module: {
     rules: [
@@ -27,6 +28,4 @@ const config = {
       minSize: 0,
     },
   },
-};
-
-module.exports = config;
+});

…ack/css-chunking-plugin/rspack.config.js …ck/css-chunking-plugin/rspack.config.mjsrspack/css-chunking-plugin/rspack.config.js renamed to rspack/css-chunking-plugin/rspack.config.mjs rspack/css-chunking-plugin/rspack.config.js renamed to rspack/css-chunking-plugin/rspack.config.mjs

@@ -1,8 +1,9 @@
-const path = require('path');
-const { rspack } = require('@rspack/core');
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
 
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+export default defineConfig({
   entry: './src/index.js',
   module: {
     parser: {
@@ -19,12 +20,12 @@ const config = {
     rules: [
       {
         test: /\.css$/,
-        exclude: path.resolve(__dirname, 'src/legacy'),
+        exclude: path.resolve(import.meta.dirname, 'src/legacy'),
         type: 'css/auto',
       },
       {
         // files in src/legacy and ends with .css will be CSS Modules
-        include: path.resolve(__dirname, 'src/legacy'),
+        include: path.resolve(import.meta.dirname, 'src/legacy'),
         test: /\.css$/,
         type: 'css/module',
         parser: {
@@ -47,6 +48,4 @@ const config = {
       template: './index.html',
     }),
   ],
-};
-
-module.exports = config;
+});

…arser-generator-options/rspack.config.js …rser-generator-options/rspack.config.mjsrspack/css-parser-generator-options/rspack.config.js renamed to rspack/css-parser-generator-options/rspack.config.mjs rspack/css-parser-generator-options/rspack.config.js renamed to rspack/css-parser-generator-options/rspack.config.mjs

@@ -0,0 +1,26 @@
+// @ts-check
+import path from 'node:path';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
+  entry: './index',
+  output: {
+    path: path.resolve(import.meta.dirname, 'dist'),
+  },
+  resolve: {
+    extensions: ['...', '.ts', '.tsx', '.js', '.jsx'],
+  },
+  plugins: [
+    new rspack.DllReferencePlugin({
+      manifest: path.resolve(import.meta.dirname, '../dll/dist/alpha.manifest.json'),
+      extensions: ['.js', '.ts'],
+    }),
+    new rspack.DllReferencePlugin({
+      manifest: path.resolve(import.meta.dirname, '../dll/dist/beta.manifest.json'),
+      scope: 'beta',
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    }),
+  ],
+  mode: 'development',
+});