feat: 添加路由加载状态管理和加载页面组件
笑笑 authored at 2025-05-18 00:10:24
3.13 KiB
cube-front
import path from 'path';
import { type PluginOption, type ResolvedConfig } from 'vite';
import { type ConfigRoute } from '../typings.d';
import fs from 'fs';
import type { MicroAppConfig } from '../microAppRouter';

export default function vitePluginCubeFront() {
  const virtualModuleNamePrefix = 'cube';
  const virtualModuleIdPrefix = 'virtual:cube-front-';
  const resolvedVirtualModuleIdPrefix = '\0' + virtualModuleIdPrefix;

  // 虚拟模块名称常量

  const appName = 'app';
  const microAppsName = 'micro-apps';

  /** 配置信息 */
  let config: ResolvedConfig & { routes: ConfigRoute[]; };
  /** 包含路由信息的字符串代码 */
  let routesStr: string | undefined;

  const viteCubeApp: PluginOption = {
    name: `vite:${virtualModuleNamePrefix}-${appName}`,
    enforce: 'post',
    config: (_config, _m) => {
      return {
        // resolve: {
        //   alias: {
        //     'cube-front': path.resolve(__dirname, './'),
        //   },
        // },
      };
    },
    configResolved: (_config) => {
      // console.log('configResolved--------------------', config)
    },
    resolveId(id: string) {
      if (id === virtualModuleIdPrefix + appName) {
        return resolvedVirtualModuleIdPrefix + appName;
      }
    },
    load(id: string) {
      if (id === resolvedVirtualModuleIdPrefix + appName) {
        return `
        export const msg = "from virtual module"
        export { default as App } from 'cube-front/core/App.vue'
        `;
      }
    },
    transform(code: string, _id: string) {
      return code;
    },
    transformIndexHtml(html: string) {
      return html;
    },
  };

  // 新增应用配置插件
  const viteCubeAppNames: PluginOption = {
    name: `vite:${virtualModuleNamePrefix}-${microAppsName}`,
    enforce: 'post',
    configResolved: (cfg) => {
      config = cfg as ResolvedConfig & { routes: ConfigRoute[]; };
    },
    resolveId(id: string) {
      if (id === virtualModuleIdPrefix + microAppsName) {
        return resolvedVirtualModuleIdPrefix + microAppsName;
      }
    },
    load(id: string) {
      if (id === resolvedVirtualModuleIdPrefix + microAppsName) {
        try {
          // 读取microAppConfig.json文件
          const configPath = path.resolve(config.root, 'configs/microAppConfig.json');
          const microAppConfigs = JSON.parse(fs.readFileSync(configPath, 'utf-8')) as Array<MicroAppConfig>;

          // 构建应用配置代码
          const microAppConfigsStrList = microAppConfigs.map((app) => {
            return {
              name: app.name,
              prefix: app.prefix,
              module: `() => import('${app.packageName || app.name}')`
            };
          });

          let code = `
const microAppConfigs = ${JSON.stringify(microAppConfigsStrList)}
export default microAppConfigs
`;
          code = code.replace(/"(\(\)\s+=>\s+import\([^\)]+\))"/g, '$1'); // 去掉属性名的引号
          return code;
        } catch (error) {
          console.error('Failed to load microAppConfig.json', error);
          return `
const microAppConfigs = []
export default microAppConfigs
`;
        }
      }
    },
  };

  return [viteCubeApp, viteCubeAppNames];
}