Revert "chore: use rspack as the client-side build tool for the plugin (#5575)" (#5608)

This reverts commit 388353dc5a.

packages/core/build/package.json

@@ -9,15 +9,6 @@
   },
   "typings": "./index.d.ts",
   "dependencies": {
-    "@svgr/webpack": "^8.1.0",
-    "@rspack/core": "1.0.14",
-    "css-loader": "^6.8.1",
-    "less": "^4.1.3",
-    "postcss": "^8.4.29",
-    "less-loader": "11.1.0",
-    "style-loader": "^3.3.3",
-    "postcss-loader": "^7.3.3",
-    "postcss-preset-env": "^9.1.2",
     "@babel/core": "7.25.2",
     "@babel/plugin-transform-modules-amd": "7.24.7",
     "@babel/preset-env": "7.25.4",

packages/core/build/src/buildPlugin.ts

@@ -16,10 +16,9 @@ import path from 'path';
 import { build as tsupBuild } from 'tsup';
 import { build as viteBuild } from 'vite';
 import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
-import { rspack } from '@rspack/core';
 
 import { EsbuildSupportExts, globExcludeFiles } from './constant';
-import { PkgLog, UserConfig, getPackageJson } from './utils';
+import { PkgLog, UserConfig, getEnvDefine, getPackageJson } from './utils';
 import {
   buildCheck,
   checkFileSize,
@@ -131,7 +130,6 @@ const external = [
   'ahooks',
   'lodash',
   'china-division',
-  'file-saver',
 ];
 const pluginPrefix = (
   process.env.PLUGIN_PACKAGE_PREFIX || '@nocobase/plugin-,@nocobase/preset-,@nocobase/plugin-pro-'
@@ -160,9 +158,7 @@ export function deleteServerFiles(cwd: string, log: PkgLog) {
 
 export function writeExternalPackageVersion(cwd: string, log: PkgLog) {
   log('write external version');
-  const sourceFiles = fg
+  const sourceFiles = fg.globSync(sourceGlobalFiles, { cwd, absolute: true }).map((item) => fs.readFileSync(item, 'utf-8'));
-    .globSync(sourceGlobalFiles, { cwd, absolute: true })
-    .map((item) => fs.readFileSync(item, 'utf-8'));
   const sourcePackages = getSourcePackages(sourceFiles);
   const excludePackages = getExcludePackages(sourcePackages, external, pluginPrefix);
   const data = excludePackages.reduce<Record<string, string>>((prev, packageName) => {
@@ -178,9 +174,7 @@ export function writeExternalPackageVersion(cwd: string, log: PkgLog) {
 export async function buildServerDeps(cwd: string, serverFiles: string[], log: PkgLog) {
   log('build plugin server dependencies');
   const outDir = path.join(cwd, target_dir, 'node_modules');
-  const serverFileSource = serverFiles
+  const serverFileSource = serverFiles.filter(item => validExts.includes(path.extname(item))).map((item) => fs.readFileSync(item, 'utf-8'));
-    .filter((item) => validExts.includes(path.extname(item)))
-    .map((item) => fs.readFileSync(item, 'utf-8'));
   const sourcePackages = getSourcePackages(serverFileSource);
   const includePackages = getIncludePackages(sourcePackages, external, pluginPrefix);
   const excludePackages = getExcludePackages(sourcePackages, external, pluginPrefix);
@@ -196,9 +190,7 @@ export async function buildServerDeps(cwd: string, serverFiles: string[], log: P
   if (excludePackages.length) {
     tips.push(`These packages ${chalk.yellow(excludePackages.join(', '))} will be ${chalk.italic('exclude')}.`);
   }
-  tips.push(
+  tips.push(`For more information, please refer to: ${chalk.blue('https://docs.nocobase.com/development/deps')}.`);
-    `For more information, please refer to: ${chalk.blue('https://docs.nocobase.com/development/others/deps')}.`,
-  );
   log(tips.join(' '));
 
   if (!includePackages.length) return;
@@ -276,34 +268,30 @@ export async function buildPluginServer(cwd: string, userConfig: UserConfig, sou
   const packageJson = getPackageJson(cwd);
   const serverFiles = fg.globSync(serverGlobalFiles, { cwd, absolute: true });
   buildCheck({ cwd, packageJson, entry: 'server', files: serverFiles, log });
-  const otherExts = Array.from(
+  const otherExts = Array.from(new Set(serverFiles.map((item) => path.extname(item)).filter((item) => !EsbuildSupportExts.includes(item))));
-    new Set(serverFiles.map((item) => path.extname(item)).filter((item) => !EsbuildSupportExts.includes(item))),
-  );
   if (otherExts.length) {
     log('%s will not be processed, only be copied to the dist directory.', chalk.yellow(otherExts.join(',')));
   }
 
   deleteServerFiles(cwd, log);
 
-  await tsupBuild(
+  await tsupBuild(userConfig.modifyTsupConfig({
-    userConfig.modifyTsupConfig({
+    entry: serverFiles,
-      entry: serverFiles,
+    splitting: false,
-      splitting: false,
+    clean: false,
-      clean: false,
+    bundle: false,
-      bundle: false,
+    silent: true,
-      silent: true,
+    treeshake: false,
-      treeshake: false,
+    target: 'node16',
-      target: 'node16',
+    sourcemap,
-      sourcemap,
+    outDir: path.join(cwd, target_dir),
-      outDir: path.join(cwd, target_dir),
+    format: 'cjs',
-      format: 'cjs',
+    skipNodeModulesBundle: true,
-      skipNodeModulesBundle: true,
+    loader: {
-      loader: {
+      ...otherExts.reduce((prev, cur) => ({ ...prev, [cur]: 'copy' }), {}),
-        ...otherExts.reduce((prev, cur) => ({ ...prev, [cur]: 'copy' }), {}),
+      '.json': 'copy',
-        '.json': 'copy',
+    },
-      },
+  }));
-    }),
-  );
 
   await buildServerDeps(cwd, serverFiles, log);
 }
@@ -328,198 +316,46 @@ export async function buildPluginClient(cwd: string, userConfig: UserConfig, sou
     return prev;
   }, {});
 
-  const entry = fg.globSync('index.{ts,tsx,js,jsx}', { absolute: false, cwd: path.join(cwd, 'src/client') });
+  const entry = fg.globSync('src/client/index.{ts,tsx,js,jsx}', { absolute: true, cwd });
   const outputFileName = 'index.js';
-  const compiler = rspack({
+
-    mode: 'production',
+  await viteBuild(userConfig.modifyViteConfig({
-    // mode: "development",
+    mode: process.env.NODE_ENV || 'production',
-    context: cwd,
+    define: getEnvDefine(),
-    entry: './src/client/' + entry[0],
+    logLevel: 'warn',
-    target: ['web', 'es5'],
+    build: {
-    output: {
+      minify: process.env.NODE_ENV === 'production',
-      path: outDir,
+      outDir,
-      filename: outputFileName,
+      cssCodeSplit: false,
-      publicPath: `/static/plugins/${packageJson.name}/dist/client/`,
+      emptyOutDir: true,
-      clean: true,
+      sourcemap,
-      library: {
+      lib: {
+        entry,
+        formats: ['umd'],
         name: packageJson.name,
-        type: 'umd',
+        fileName: () => outputFileName,
-        umdNamedDefine: true,
+      },
+      target: ['es2015', 'edge88', 'firefox78', 'chrome87', 'safari14'],
+      rollupOptions: {
+        cache: true,
+        external: [...Object.keys(globals), 'react', 'react/jsx-runtime'],
+        output: {
+          exports: 'named',
+          globals: {
+            react: 'React',
+            'react/jsx-runtime': 'jsxRuntime',
+            ...globals,
+          },
+        },
       },
     },
-    resolve: {
-      tsConfig: path.join(process.cwd(), 'tsconfig.json'),
-      extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.less', '.css'],
-    },
-    module: {
-      rules: [
-        {
-          test: /.less$/,
-          use: [
-            { loader: 'style-loader' },
-            { loader: 'css-loader' },
-            { loader: 'less-loader' },
-            {
-              loader: 'postcss-loader',
-              options: {
-                postcssOptions: {
-                  plugins: {
-                    'postcss-preset-env': {
-                      browsers: ['last 2 versions', '> 1%', 'cover 99.5%', 'not dead'],
-                    },
-                    autoprefixer: {},
-                  },
-                },
-              },
-            },
-          ],
-          type: 'javascript/auto',
-        },
-        {
-          test: /\.css$/,
-          use: [
-            'style-loader',
-            'css-loader',
-            {
-              loader: 'postcss-loader',
-              options: {
-                postcssOptions: {
-                  plugins: {
-                    'postcss-preset-env': {
-                      browsers: ['last 2 versions', '> 1%', 'cover 99.5%', 'not dead'],
-                    },
-                    autoprefixer: {},
-                  },
-                },
-              },
-            },
-          ],
-          type: 'javascript/auto',
-        },
-        {
-          test: /\.(png|jpe?g|gif)$/i,
-          type: 'asset',
-        },
-        {
-          test: /\.svg$/i,
-          issuer: /\.[jt]sx?$/,
-          use: ['@svgr/webpack'],
-        },
-        {
-          test: /\.jsx$/,
-          exclude: /[\\/]node_modules[\\/]/,
-          loader: 'builtin:swc-loader',
-          options: {
-            sourceMap: true,
-            jsc: {
-              parser: {
-                syntax: 'ecmascript',
-                jsx: true,
-              },
-              target: 'es5',
-            },
-          },
-        },
-        {
-          test: /\.tsx$/,
-          exclude: /[\\/]node_modules[\\/]/,
-          loader: 'builtin:swc-loader',
-          options: {
-            sourceMap: true,
-            jsc: {
-              parser: {
-                syntax: 'typescript',
-                tsx: true,
-              },
-              target: 'es5',
-            },
-          },
-        },
-        {
-          test: /\.ts$/,
-          exclude: /[\\/]node_modules[\\/]/,
-          loader: 'builtin:swc-loader',
-          options: {
-            sourceMap: true,
-            jsc: {
-              parser: {
-                syntax: 'typescript',
-              },
-              target: 'es5',
-            },
-          },
-        },
-      ],
-    },
     plugins: [
-      new rspack.DefinePlugin({
+      react(),
-        'process.env.NODE_ENV': JSON.stringify('production'),
+      cssInjectedByJsPlugin({ styleId: packageJson.name }),
-      }),
     ],
-    node: {
+  }));
-      global: true,
-    },
-    externals: {
-      react: 'React',
-      // 'react/jsx-runtime': 'jsxRuntime',
-      ...globals,
-    },
-    stats: 'errors-warnings',
-  });
 
-  return new Promise((resolve, reject) => {
+  checkFileSize(outDir, log);
-    compiler.run((err, stats) => {
-      if (err) {
-        reject(err);
-        return;
-      }
-      console.log(
-        stats.toString({
-          colors: true,
-        }),
-      );
-      resolve(null);
-    });
-  });
-  // await viteBuild(userConfig.modifyViteConfig({
-  //   mode: 'production',
-  //   define: {
-  //     'process.env.NODE_ENV': JSON.stringify('production'),
-  //   },
-  //   logLevel: 'warn',
-  //   build: {
-  //     minify: true,
-  //     outDir,
-  //     cssCodeSplit: false,
-  //     emptyOutDir: true,
-  //     sourcemap,
-  //     lib: {
-  //       entry,
-  //       formats: ['umd'],
-  //       name: packageJson.name,
-  //       fileName: () => outputFileName,
-  //     },
-  //     target: ['es2015', 'edge88', 'firefox78', 'chrome87', 'safari14'],
-  //     rollupOptions: {
-  //       cache: true,
-  //       external: [...Object.keys(globals), 'react', 'react/jsx-runtime'],
-  //       output: {
-  //         exports: 'named',
-  //         globals: {
-  //           react: 'React',
-  //           'react/jsx-runtime': 'jsxRuntime',
-  //           ...globals,
-  //         },
-  //       },
-  //     },
-  //   },
-  //   plugins: [
-  //     react(),
-  //     cssInjectedByJsPlugin({ styleId: packageJson.name }),
-  //   ],
-  // }));
-
-  // checkFileSize(outDir, log);
 }
 
 export async function buildPlugin(cwd: string, userConfig: UserConfig, sourcemap: boolean, log: PkgLog) {

packages/core/build/src/utils/buildPluginUtils.ts

@@ -112,7 +112,7 @@ export function checkDependencies(packageJson: Record<string, any>, log: Log) {
     chalk.yellow(packages.join(', ')),
     chalk.yellow('dependencies'),
     chalk.yellow('devDependencies'),
-    chalk.blue(chalk.blue('https://docs.nocobase.com/development/others/deps')),
+    chalk.blue(chalk.blue('https://docs.nocobase.com/development/deps')),
   );
 }
 

packages/core/client/src/application/utils/globalDeps.ts

@@ -41,7 +41,6 @@ import * as ReactRouter from 'react-router';
 import * as ReactRouterDom from 'react-router-dom';
 import jsxRuntime from 'react/jsx-runtime';
 import * as nocobaseClient from '../../index';
-import * as FileSaver from 'file-saver';
 
 import type { RequireJS } from './requirejs';
 
@@ -102,5 +101,4 @@ export function defineGlobalDeps(requirejs: RequireJS) {
   requirejs.define('ahooks', () => ahooks);
   requirejs.define('@emotion/css', () => emotionCss);
   requirejs.define('dayjs', () => dayjs);
-  requirejs.define('file-saver', () => FileSaver);
 }