@4399ywkf/cli 0.0.22 → 1.0.2

package/dist/templates/routes.ts

@@ -0,0 +1,70 @@
+export interface RouteItem {
+  path?: string;
+  wrappers?: string[];
+  component?: string | (() => React.JSX.Element);
+  redirect?: string;
+  routes?: RouteItem[];
+  [any: string]: any;
+}
+
+export interface IRouteConventionExportProps {
+  routeProps?: Record<string, any>;
+}
+
+export interface IRoute extends IRouteConventionExportProps {
+  id: string;
+  path?: string;
+  index?: boolean;
+  parentId?: string;
+  redirect?: string;
+  loading?: string | React.ReactNode;
+  absPath?: string;
+  file?: string;
+  name?: string;
+  title?: string;
+  cname?: string;
+  key?: string;
+  perarr?: string;
+  microApp?: string;
+  entry?: string;
+  [key: string]: any;
+}
+
+export interface IClientRoute extends IRoute {
+  element: React.ReactNode;
+  children?: IClientRoute[];
+  routes?: IClientRoute[];
+}
+
+export interface IRoutesById {
+  [id: string]: IRoute;
+}
+
+export interface IRouteComponents {
+  [id: string]: any;
+}
+
+export interface RenderClientOpts {
+  /**
+   * react dom 渲染的的目标 dom
+   * @doc 一般不需要改，微前端的时候会变化
+   */
+  rootElement?: HTMLElement;
+  /**
+   * 设置路由 base，部署项目到非根目录下时使用。
+   */
+  basename?: string;
+  /**
+   * loading 中展示的组件 dom （全局加载组件）。
+   */
+  loadingComponent?: () => React.ReactNode;
+  /**
+   * 自定义错误边界组件
+   */
+  errorBoundary?: React.ComponentType<{ error: Error; retry: () => void }>;
+}
+
+export interface IMemo {
+  id: number;
+  ret: any;
+}

package/dist/templates/routes.tsx

@@ -0,0 +1,18 @@
+import React, { lazy } from "react";
+import { createBrowserRouter, Navigate } from "react-router";
+
+export const createRouter = (basename?: string) => {
+  return createBrowserRouter([
+    {
+      path: "/",
+      element: <Navigate to="/base" replace />,
+    },
+    {
+      path: "/base",
+      Component: lazy(() => import("@/pages/base")),
+    },
+  ], {
+    basename: basename || "/",
+  });
+};
+

package/dist/templates/rspack/paths.js

@@ -0,0 +1,12 @@
+const fs = require('fs')
+const path = require('path')
+
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+const resolveOwn = relativePath => path.resolve(__dirname, '.', relativePath);
+
+
+module.exports = {
+  resolveApp,
+  resolveOwn
+}

package/dist/templates/rspack/plugins/RoutesConventionsRspackPlugin.js

@@ -0,0 +1,100 @@
+require("esbuild-register");
+const { getConventionRoutes } = require("../../router/routesConvention");
+const { getRoutes } = require("../../router/getRoutes");
+const path = require("path");
+const fs = require("fs");
+
+class RoutesConventionsRspackPlugin {
+  constructor(options = {}) {
+    this.options = {
+      base: "src/pages",
+      exclude: [
+        /\/components?\//,
+        /\/models\//,
+        /\/utils?\//,
+        /^_/,
+        /\.d\.ts$/,
+        /\.(test|spec|e2e)\.(ts|tsx|js|jsx)$/,
+      ],
+      ...options,
+    };
+  }
+
+  generateRoutes() {
+    const routesFilePath = path.resolve(process.cwd(), "src/routes.ts");
+
+    if (fs.existsSync(routesFilePath)) {
+      try {
+        delete require.cache[routesFilePath];
+        const routesModule = require(routesFilePath);
+        const configRoutes = routesModule.routes;
+
+        if (
+          configRoutes &&
+          Array.isArray(configRoutes) &&
+          configRoutes.length > 0
+        ) {
+          console.log("📋 使用配置式路由...", configRoutes);
+          return getRoutes(configRoutes);
+        } else {
+          console.log("📋 routes文件存在但为空，使用约定式路由...");
+        }
+      } catch (error) {
+        console.warn("⚠️ 读取routes文件失败，使用约定式路由...", error.message);
+      }
+    } else {
+      console.log("📋 routes文件不存在，使用约定式路由...");
+    }
+
+    const routes = getConventionRoutes({
+      base: path.resolve(process.cwd(), this.options.base),
+      prefix: "pages/",
+      exclude: this.options.exclude,
+    });
+    return routes;
+  }
+
+  apply(compiler) {
+    const pluginName = "RoutesConventionsRspackPlugin";
+
+    compiler.hooks.beforeCompile.tapAsync(pluginName, (params, callback) => {
+      try {
+        console.log("🚀 生成约定式路由...");
+        const routes = this.generateRoutes();
+
+        // 找到 DefinePlugin 并更新路由数据
+        const definePlugin = compiler.options.plugins.find(
+          (plugin) => plugin.constructor.name === "DefinePlugin"
+        );
+        console.log("注入数据 -------->", routes, definePlugin);
+
+        if (definePlugin && definePlugin.definitions) {
+          definePlugin.definitions["__CONVENTION_ROUTES__"] =
+            JSON.stringify(routes);
+        } else if (definePlugin) {
+          // 对于 rspack，直接修改 DefinePlugin 的内部定义
+          // rspack 的 DefinePlugin 可能将定义存储在不同的属性中
+          if (!definePlugin.definitions) {
+            definePlugin.definitions = {};
+          }
+          definePlugin.definitions["__CONVENTION_ROUTES__"] =
+            JSON.stringify(routes);
+
+          // 或者尝试直接访问 rspack DefinePlugin 的内部结构
+          // 可能需要访问 definePlugin.options 或其他属性
+          if (definePlugin.options) {
+            definePlugin.options["__CONVENTION_ROUTES__"] =
+              JSON.stringify(routes);
+          }
+        }
+
+        callback();
+      } catch (error) {
+        console.error("❌ 生成约定式路由失败:", error);
+        callback(error);
+      }
+    });
+  }
+}
+
+module.exports = RoutesConventionsRspackPlugin;

package/dist/templates/rspack/rspack.config.mjs

@@ -0,0 +1,186 @@
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import path from './paths.js';
+import fs from 'fs';
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
+import dotenv from 'dotenv';
+import { createRequire } from 'module';
+
+// 创建 require 函数用于 require.resolve
+const require = createRequire(import.meta.url);
+
+// 复用现有的环境变量加载逻辑
+dotenv.config({ path: path.resolveApp('./config/env/.env.public') });
+
+let extraConfig = {};
+try {
+  const envFile = path.resolveApp(`./config/env/.env.${process.env.NODE_ENV}`);
+  if (fs.existsSync(envFile)) {
+    extraConfig = dotenv.parse(fs.readFileSync(envFile));
+  }
+} catch (error) {
+  console.warn('环境变量文件读取失败:', error.message);
+}
+
+for (const key in extraConfig) {
+  process.env[key] = extraConfig[key];
+}
+
+const APP_CNAME = process.env.APP_CNAME || 'Chat应用';
+const APP_NAME = process.env.APP_NAME || 'chat';
+const OUTPUT_PATH = process.env.OUTPUT_PATH || 'dist';
+const PUBLIC_PATH = process.env.PUBLIC_PATH || '/';
+
+export default defineConfig({
+  entry: [path.resolveApp('./src/index')],
+
+  resolve: {
+    extensions: ['.ts', '.tsx', '.jsx', '.js', '.json'],
+    alias: {
+      '@': path.resolveApp('./src'),
+      '@config': path.resolveApp('./config'),
+      '@store': path.resolveApp('./store'),
+      '@locales': path.resolveApp('./locales'),
+    },
+    fallback: {
+      path: require.resolve('path-browserify'),
+      process: require.resolve('process/browser.js'),
+      buffer: require.resolve('buffer'),
+      util: require.resolve('util'),
+      stream: require.resolve('stream-browserify'),
+      crypto: require.resolve('crypto-browserify'),
+      zlib: require.resolve('browserify-zlib'),
+      querystring: require.resolve('querystring-es3'),
+      url: require.resolve('url'),
+      assert: require.resolve('assert'),
+      fs: false,
+      net: false,
+      tls: false,
+      os: false,
+      https: false,
+      http: false,
+    },
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.[jt]sx?$/,
+        include: [
+          path.resolveApp('src'),
+          path.resolveApp('config'),
+          path.resolveApp('store'),
+          path.resolveApp('packages'),
+        ],
+        exclude: [path.resolveApp('node_modules')],
+        use: [
+          {
+            loader: 'builtin:swc-loader',
+            options: {
+              jsc: {
+                parser: {
+                  syntax: 'typescript',
+                  tsx: true,
+                  decorators: true,
+                },
+                transform: {
+                  react: {
+                    runtime: 'automatic',
+                  },
+                },
+                target: 'es2015',
+              },
+              sourceMaps: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(png|jpg|jpeg|gif|webp|m3u8|exr|hdr|json)$/,
+        include: [path.resolveApp('config')],
+        exclude: [path.resolveApp('src'), path.resolveApp('store')],
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10 * 1024,
+          },
+        },
+      },
+      {
+        test: /\.md$/,
+        include: [path.resolveApp('src')],
+        type: 'asset/source',
+      },
+      {
+        test: /\.svg$/,
+        use: ['@svgr/webpack'],
+      },
+    ],
+  },
+
+  plugins: [
+    new rspack.ProvidePlugin({
+      process: 'process/browser.js',
+      Buffer: ['buffer', 'Buffer'],
+    }),
+    new rspack.DefinePlugin({
+      'process.env': JSON.stringify(process.env),
+      // ["__CONVENTION_ROUTES__"]: JSON.stringify([]),
+    }),
+    new rspack.HtmlRspackPlugin({
+      template: path.resolveApp('./config/public/index.html'),
+      filename: 'index.html',
+      inject: 'body',
+      hash: true,
+      minify: process.env.NODE_ENV === 'production',
+      favicon: path.resolveApp('./config/public/favicon.ico'),
+      templateParameters: {
+        title: APP_CNAME,
+        mountRoot: APP_NAME,
+      },
+    }),
+    new rspack.CopyRspackPlugin({
+      patterns: [
+        {
+          from: path.resolveApp('./config/public/images'),
+          to: 'public/images',
+        },
+      ],
+    }),
+    process.env.RSDOCTOR &&
+      new RsdoctorRspackPlugin({
+        // 插件选项
+      }),
+    // new RoutesConventionsRspackPlugin({
+    //   base: "src/pages",
+    //   exclude: [
+    //     /\/components?\//,
+    //     /\/models\//,
+    //     /\/utils?\//,
+    //     /^_/,
+    //     /\.d\.ts$/,
+    //     /\.(test|spec|e2e)\.(ts|tsx|js|jsx)$/,
+    //   ],
+    // }),
+  ],
+
+  output: {
+    assetModuleFilename: 'images/[hash][ext]',
+    library: `${APP_CNAME}-[name]`,
+    chunkFilename: '[name].[contenthash].js',
+    libraryTarget: 'umd',
+    globalObject: 'window',
+    chunkLoadingGlobal: `chunk_global_${APP_NAME}`,
+    publicPath: PUBLIC_PATH,
+    path: path.resolveApp(OUTPUT_PATH),
+  },
+
+  ignoreWarnings: [
+    {
+      module: /@testing-library\/react/,
+      message: /export 'act'/,
+    },
+  ],
+
+  devtool: 'source-map',
+});

package/dist/templates/rspack/rspack.dev.mjs

@@ -0,0 +1,219 @@
+import { defineConfig } from '@rspack/cli';
+import { merge } from 'webpack-merge';
+import { rspack } from '@rspack/core';
+import baseConfig from './rspack.config.mjs';
+import path from './paths.js';
+import fs from 'fs';
+
+const HOST = process.env.APP_HOST;
+const PORT = process.env.APP_PORT;
+
+// 存储构建进度
+let progress = 0;
+let status = '';
+let detailInfo = '';
+const hijackPage = true;
+
+const handler = (percentage, statusMsg, info) => {
+  status = statusMsg;
+  progress = percentage;
+  detailInfo = info;
+};
+
+export default merge(baseConfig, {
+  mode: 'development',
+  devtool: 'inline-source-map',
+
+  output: {
+    filename: '[name].bundle.js',
+    clean: false,
+  },
+
+  stats: 'errors-only',
+
+  devServer: {
+    host: HOST,
+    port: PORT,
+    compress: true,
+    historyApiFallback: true,
+    hot: true,
+    allowedHosts: 'all',
+    client: {
+      overlay: false,
+      progress: true,
+    },
+  },
+
+  module: {
+    rules: [
+      // Less 处理 - antd
+      {
+        test: /\.less$/,
+        include: [
+          /[\\/]node_modules[\\/].*antd/,
+          /[\\/]node_modules[\\/]@4399ywkf[\\/]design/,
+        ],
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+          {
+            loader: 'less-loader',
+            options: {
+              sourceMap: true,
+              lessOptions: {
+                strictMath: false,
+                math: 'always',
+                javascriptEnabled: true,
+              },
+            },
+          },
+        ],
+      },
+      // Less 处理 - 项目文件
+      {
+        test: /\.less$/,
+        include: [path.resolveApp('src')],
+        exclude: [path.resolveApp('node_modules')],
+        oneOf: [
+          {
+            test: /\.module\.less$/,
+            use: [
+              {
+                loader: 'style-loader',
+              },
+              {
+                loader: 'css-loader',
+                options: {
+                  sourceMap: true,
+                  modules: {
+                    localIdentName: '[path][name]__[local]--[hash:base64:5]',
+                  },
+                  importLoaders: 2,
+                },
+              },
+              {
+                loader: 'less-loader',
+                options: {
+                  sourceMap: true,
+                  lessOptions: {
+                    javascriptEnabled: true,
+                    math: 'always',
+                  },
+                },
+              },
+            ],
+          },
+          {
+            use: [
+              {
+                loader: 'style-loader',
+              },
+              {
+                loader: 'css-loader',
+                options: {
+                  sourceMap: true,
+                },
+              },
+              {
+                loader: 'less-loader',
+                options: {
+                  sourceMap: true,
+                  lessOptions: {
+                    javascriptEnabled: true,
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+      // Sass 处理
+      {
+        test: /\.s[ac]ss$/i,
+        include: [path.resolveApp('src')],
+        exclude: [path.resolveApp('node_modules')],
+        oneOf: [
+          {
+            test: /\.module\.s[ac]ss$/,
+            use: [
+              {
+                loader: 'style-loader',
+              },
+              {
+                loader: 'css-loader',
+                options: {
+                  sourceMap: true,
+                  modules: {
+                    localIdentName: '[path][name]__[local]--[hash:base64:5]',
+                  },
+                  importLoaders: 2,
+                },
+              },
+              {
+                loader: 'sass-loader',
+                options: {
+                  sourceMap: true,
+                  sassOptions: {
+                    outputStyle: 'compressed',
+                  },
+                },
+              },
+            ],
+          },
+          {
+            use: [
+              {
+                loader: 'style-loader',
+              },
+              {
+                loader: 'css-loader',
+                options: {
+                  sourceMap: true,
+                },
+              },
+              {
+                loader: 'sass-loader',
+                options: {
+                  sourceMap: true,
+                  sassOptions: {
+                    outputStyle: 'compressed',
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+      // CSS 处理 - TailwindCSS
+      {
+        test: /\.css$/,
+        include: [path.resolveApp('src/index.css')],
+        use: ['style-loader', 'css-loader', 'postcss-loader'],
+      },
+      // CSS 处理 - 其他 CSS
+      {
+        test: /\.css$/,
+        include: [path.resolveApp('src'), path.resolveApp('node_modules')],
+        exclude: [path.resolveApp('src/index.css')],
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+});