qiankun 工具与资源 #

// vite.config.js
import { defineConfig } from 'vite';
import qiankun from '@qiankunjs/vite-plugin';

export default defineConfig({
  plugins: [
    qiankun({
      name: 'micro-app',
      entry: '/entry',
      // 其他配置
    })
  ]
});

// 启用开发者工具
if (process.env.NODE_ENV === 'development') {
  // qiankun 内置开发工具
  window.__QIANKUN_DEVELOPMENT__ = true;
  
  // 自定义调试工具
  import('./devtools').then(module => {
    module.setupDevTools();
  });
}

// devtools.js - 自定义调试工具
export class QiankunDevTools {
  constructor() {
    this.panel = null;
    this.isOpen = false;
    this.apps = new Map();
  }

  init() {
    this.createPanel();
    this.setupEventListeners();
    this.startMonitoring();
  }

  createPanel() {
    this.panel = document.createElement('div');
    this.panel.id = 'qiankun-devtools-panel';
    this.panel.innerHTML = `
      <div class="qiankun-devtools">
        <div class="header">
          <h3>qiankun DevTools</h3>
          <button onclick="window.qiankunDevTools.toggle()">×</button>
        </div>
        <div class="content">
          <div class="apps-section">
            <h4>Registered Apps</h4>
            <div id="apps-list"></div>
          </div>
          <div class="state-section">
            <h4>Global State</h4>
            <pre id="global-state"></pre>
          </div>
          <div class="actions">
            <button onclick="window.qiankunDevTools.refresh()">Refresh</button>
            <button onclick="window.qiankunDevTools.clearLogs()">Clear Logs</button>
          </div>
        </div>
      </div>
    `;
    
    document.body.appendChild(this.panel);
    this.updateAppsList();
  }

  updateAppsList() {
    const appsList = document.getElementById('apps-list');
    const apps = this.getRegisteredApps();
    
    appsList.innerHTML = apps.map(app => `
      <div class="app-item">
        <span class="app-name">${app.name}</span>
        <span class="app-status">${app.status}</span>
      </div>
    `).join('');
  }

  getRegisteredApps() {
    // 获取已注册的微应用信息
    return Array.from(this.apps.entries()).map(([name, app]) => ({
      name,
      status: app.getStatus ? app.getStatus() : 'unknown',
      entry: app.entry || 'unknown'
    }));
  }

  setupEventListeners() {
    // 监听键盘快捷键
    document.addEventListener('keydown', (e) => {
      if (e.ctrlKey && e.key === 'q' && e.shiftKey) {
        e.preventDefault();
        this.toggle();
      }
    });
  }

  startMonitoring() {
    // 开始监控微应用状态
    setInterval(() => {
      this.updateAppsList();
      this.updateGlobalState();
    }, 1000);
  }

  updateGlobalState() {
    if (window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__) {
      const stateElement = document.getElementById('global-state');
      stateElement.textContent = JSON.stringify(
        this.getGlobalState(), 
        null, 2
      );
    }
  }

  getGlobalState() {
    // 获取全局状态
    if (window.__QIANKUN_GLOBAL_STATE__) {
      return window.__QIANKUN_GLOBAL_STATE__;
    }
    return {};
  }

  toggle() {
    this.panel.style.display = this.isOpen ? 'none' : 'block';
    this.isOpen = !this.isOpen;
  }

  refresh() {
    location.reload();
  }

  clearLogs() {
    console.clear();
  }
}

// 全局访问
window.qiankunDevTools = new QiankunDevTools();
window.qiankunDevTools.init();

// webpack-qiankun-config.js
const path = require('path');

class QiankunWebpackPlugin {
  constructor(options = {}) {
    this.options = {
      name: options.name || 'micro-app',
      entry: options.entry || '/entry',
      ...options
    };
  }

  apply(compiler) {
    // 配置输出
    compiler.options.output = {
      ...compiler.options.output,
      library: this.options.name,
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${this.options.name}`,
      globalObject: 'window',
    };

    // 配置开发服务器
    if (compiler.options.mode === 'development') {
      compiler.options.devServer = {
        ...compiler.options.devServer,
        headers: {
          'Access-Control-Allow-Origin': '*',
        },
        hot: true,
      };
    }

    // 添加插件
    compiler.hooks.afterEnvironment.tap('QiankunPlugin', () => {
      // 自定义配置逻辑
    });
  }
}

module.exports = QiankunWebpackPlugin;

// vite-qiankun-plugin.js
import { createHtmlPlugin } from 'vite-plugin-html';

export function qiankunPlugin(options = {}) {
  const { name = 'micro-app', enableBase = false } = options;

  return {
    name: 'qiankun',
    config(config) {
      config.build = {
        ...config.build,
        rollupOptions: {
          ...config.build?.rollupOptions,
          output: {
            ...config.build?.rollupOptions?.output,
            format: 'umd',
            entryFileNames: '[name].js',
            chunkFileNames: '[name].js',
            assetFileNames: '[name].[ext]',
          }
        }
      };

      config.define = {
        ...config.define,
        __QIANKUN_APP_NAME__: JSON.stringify(name),
        __QIANKUN_ENABLE_BASE__: enableBase,
      };
    },

    transformIndexHtml(html) {
      if (enableBase) {
        return html.replace(
          '<head>',
          '<head><base href="/" />'
        );
      }
      return html;
    }
  };
}

// qiankun-app-template.js
module.exports = {
  templates: {
    react: {
      files: [
        'src/main.jsx',
        'src/App.jsx',
        'src/index.css',
        'public/index.html'
      ],
      dependencies: ['react', 'react-dom', 'react-router-dom'],
      devDependencies: ['@vitejs/plugin-react']
    },
    vue: {
      files: [
        'src/main.js',
        'src/App.vue',
        'src/router/index.js',
        'public/index.html'
      ],
      dependencies: ['vue', 'vue-router'],
      devDependencies: ['@vitejs/plugin-vue']
    }
  }
};

// 使用全局状态 hook
import { useGlobalState } from '@qiankunjs/use-global-state';

function UserProfile() {
  const [user, setUser] = useGlobalState('user');
  const [theme, setTheme] = useGlobalState('theme');

  return (
    <div>
      <h1>{user?.name}</h1>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Switch to {theme === 'light' ? 'dark' : 'light'} mode
      </button>
    </div>
  );
}

// 微应用路由配置
import { createQiankunRouter } from '@qiankunjs/router';
import { createRouter, createWebHistory } from 'vue-router';

export function createMicroRouter(basePath = '') {
  const router = createRouter({
    history: createWebHistory(basePath),
    routes: [
      { path: '/', component: () => import('./views/Home.vue') },
      { path: '/profile', component: () => import('./views/Profile.vue') },
    ]
  });

  return createQiankunRouter(router);
}

// 测试工具使用示例
import { 
  createMockMicroApp, 
  simulateAppLifecycle, 
  testCommunication 
} from '@qiankunjs/test-utils';

describe('Micro App Tests', () => {
  test('should handle lifecycle correctly', async () => {
    const mockApp = createMockMicroApp({
      name: 'test-app',
      entry: '//localhost:3001'
    });

    // 模拟应用生命周期
    await simulateAppLifecycle(mockApp, {
      bootstrap: true,
      mount: true,
      unmount: true
    });

    expect(mockApp.getStatus()).toBe('NOT_MOUNTED');
  });

  test('should communicate with main app', async () => {
    const communicationResult = await testCommunication({
      mainApp: createMockMainApp(),
      microApp: createMockMicroApp()
    });

    expect(communicationResult.success).toBe(true);
    expect(communicationResult.data).toBeDefined();
  });
});

// cypress/support/commands.js
Cypress.Commands.add('loadMicroApp', (appName, options = {}) => {
  cy.window().then(win => {
    return win.loadMicroApp({
      name: appName,
      entry: options.entry || `//localhost:3001`,
      container: options.container || '#subapp-container'
    });
  });
});

Cypress.Commands.add('switchMicroApp', (appName) => {
  cy.visit(`/${appName}`);
  cy.get(`#subapp-container`).should('exist');
});

// 性能监控工具
class QiankunPerformanceMonitor {
  constructor() {
    this.metrics = {
      appLoadTimes: new Map(),
      resourceLoadTimes: new Map(),
      memoryUsage: [],
      renderTimes: new Map()
    };
  }

  startAppLoad(appName) {
    this.metrics.appLoadTimes.set(appName, {
      startTime: performance.now(),
      startMemory: this.getMemoryUsage()
    });
  }

  endAppLoad(appName) {
    const startData = this.metrics.appLoadTimes.get(appName);
    if (startData) {
      const endTime = performance.now();
      const endMemory = this.getMemoryUsage();
      
      const loadTime = endTime - startData.startTime;
      const memoryDelta = endMemory - startData.startMemory;
      
      return {
        loadTime,
        memoryDelta,
        timestamp: new Date().toISOString()
      };
    }
  }

  getMemoryUsage() {
    return performance.memory ? performance.memory.usedJSHeapSize : 0;
  }

  generateReport() {
    const report = {
      apps: {},
      summary: {
        totalApps: this.metrics.appLoadTimes.size,
        averageLoadTime: 0,
        totalMemoryDelta: 0
      }
    };

    let totalLoadTime = 0;
    let totalMemoryDelta = 0;

    for (const [appName, data] of this.metrics.appLoadTimes) {
      const result = this.endAppLoad(appName);
      if (result) {
        report.apps[appName] = result;
        totalLoadTime += result.loadTime;
        totalMemoryDelta += result.memoryDelta;
      }
    }

    report.summary.averageLoadTime = totalLoadTime / this.metrics.appLoadTimes.size;
    report.summary.totalMemoryDelta = totalMemoryDelta;

    return report;
  }
}

// 全局性能监控实例
window.qiankunPerfMonitor = new QiankunPerformanceMonitor();

// 错误监控工具
class QiankunErrorMonitor {
  constructor(options = {}) {
    this.options = {
      reportUrl: options.reportUrl || '/api/errors',
      sampleRate: options.sampleRate || 1.0, // 采样率
      maxErrors: options.maxErrors || 100, // 最大错误数量
      ...options
    };
    
    this.errors = [];
    this.init();
  }

  init() {
    // 监听 JavaScript 错误
    window.addEventListener('error', (event) => {
      this.handleError({
        type: 'javascript',
        message: event.error.message,
        stack: event.error.stack,
        filename: event.filename,
        lineno: event.lineno,
        colno: event.colno,
        microAppName: this.getCurrentMicroAppName()
      });
    });

    // 监听未捕获的 Promise 错误
    window.addEventListener('unhandledrejection', (event) => {
      this.handleError({
        type: 'promise',
        message: event.reason.message || event.reason,
        stack: event.reason.stack,
        microAppName: this.getCurrentMicroAppName()
      });
    });

    // 监听 qiankun 特定错误
    if (window.__QIANKUN__) {
      // qiankun 错误处理
    }
  }

  handleError(error) {
    // 采样控制
    if (Math.random() > this.options.sampleRate) {
      return;
    }

    // 添加时间戳和上下文
    error.timestamp = new Date().toISOString();
    error.context = {
      url: window.location.href,
      userAgent: navigator.userAgent,
      microApp: error.microAppName
    };

    this.errors.push(error);

    // 限制错误数量
    if (this.errors.length > this.options.maxErrors) {
      this.errors = this.errors.slice(-this.options.maxErrors);
    }

    // 上报错误
    this.reportError(error);

    // 控制台输出
    if (process.env.NODE_ENV === 'development') {
      console.error('qiankun error:', error);
    }
  }

  async reportError(error) {
    try {
      await fetch(this.options.reportUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          error,
          type: 'qiankun-error',
          timestamp: new Date().toISOString()
        })
      });
    } catch (reportError) {
      console.error('Failed to report error:', reportError);
    }
  }

  getCurrentMicroAppName() {
    // 根据当前路由或全局变量获取当前微应用名称
    const path = window.location.pathname;
    const appRoutes = {
      '/user': 'user-center',
      '/product': 'product-center',
      '/order': 'order-center'
    };

    for (const [route, appName] of Object.entries(appRoutes)) {
      if (path.startsWith(route)) {
        return appName;
      }
    }

    return 'unknown';
  }

  getErrors() {
    return [...this.errors];
  }

  clearErrors() {
    this.errors = [];
  }
}

// 初始化错误监控
window.qiankunErrorMonitor = new QiankunErrorMonitor({
  reportUrl: '/api/qiankun-errors',
  sampleRate: 0.8
});

// .husky/pre-commit
#!/usr/bin/env sh
. "$(dirname "$0")/_/husky.sh"

npm run lint-staged
npm run test:unit