generator-mico-cli 0.1.18

package/generators/micro-react/templates/turbo.json

@@ -0,0 +1,68 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "globalEnv": ["CDN_PUBLIC_PATH"],
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "inputs": [
+        "$TURBO_DEFAULT$",
+        ".env",
+        ".env.local",
+        ".env.production",
+        ".env.production.local"
+      ],
+      "outputs": ["dist/**"]
+    },
+    "build:development": {
+      "dependsOn": ["^build:development"],
+      "inputs": [
+        "$TURBO_DEFAULT$",
+        ".env",
+        ".env.local",
+        ".env.development",
+        ".env.development.local"
+      ],
+      "outputs": ["dist/**"]
+    },
+    "build:testing": {
+      "dependsOn": ["^build:testing"],
+      "inputs": [
+        "$TURBO_DEFAULT$",
+        ".env",
+        ".env.local",
+        ".env.testing",
+        ".env.testing.local"
+      ],
+      "outputs": ["dist/**"]
+    },
+    "build:production": {
+      "dependsOn": ["^build:production"],
+      "inputs": [
+        "$TURBO_DEFAULT$",
+        ".env",
+        ".env.local",
+        ".env.production",
+        ".env.production.local"
+      ],
+      "outputs": ["dist/**"]
+    },
+    "build:local": {
+      "dependsOn": ["^build:local"],
+      "inputs": ["$TURBO_DEFAULT$", ".env", ".env.local"],
+      "outputs": ["dist/**"]
+    },
+    "dev": {
+      "cache": false,
+      "persistent": true
+    },
+    "lint": {
+      "outputs": []
+    },
+    "lint:fix": {
+      "outputs": []
+    },
+    "test": {
+      "outputs": []
+    }
+  }
+}

package/generators/subapp-react/ignore-list.json

@@ -0,0 +1,7 @@
+[
+  "node_modules",
+  "dist",
+  ".umi",
+  ".umi-production",
+  ".turbo"
+]

package/generators/subapp-react/index.js

@@ -0,0 +1,189 @@
+'use strict';
+
+const Generator = require('yeoman-generator');
+const fs = require('node:fs');
+const path = require('node:path');
+const {
+  toKebab,
+  toPascal,
+  collectFiles,
+  transformDestPath,
+  isTemplateFile,
+  setupErrorHandlers
+} = require('../../lib/utils');
+
+const IGNORE_LIST = require('./ignore-list.json');
+
+// 安装全局错误处理
+setupErrorHandlers();
+
+module.exports = class extends Generator {
+  initializing() {
+    this.monorepoRoot = process.cwd();
+    const appsDir = path.join(this.monorepoRoot, 'apps');
+    const workspaceFile = path.join(this.monorepoRoot, 'pnpm-workspace.yaml');
+
+    if (!fs.existsSync(appsDir)) {
+      console.error('');
+      console.error('❌ Error: apps directory not found.');
+      console.error('');
+      console.error('   This generator must be run from a monorepo root that contains an "apps" directory.');
+      console.error(`   Current directory: ${this.monorepoRoot}`);
+      console.error('');
+      console.error('   Usage:');
+      console.error('     cd /path/to/your-monorepo');
+      console.error('     mico create subapp-react');
+      console.error('');
+      process.exit(1);
+    }
+
+    if (!fs.existsSync(workspaceFile)) {
+      console.warn('');
+      console.warn('⚠️  Warning: pnpm-workspace.yaml not found.');
+      console.warn('   Make sure you are in the correct monorepo.');
+      console.warn('');
+    }
+  }
+
+  _detectPackageScope() {
+    // 尝试从 packages/shared-styles/package.json 读取
+    const sharedStylesPath = path.join(this.monorepoRoot, 'packages/shared-styles/package.json');
+    if (fs.existsSync(sharedStylesPath)) {
+      try {
+        const pkg = JSON.parse(fs.readFileSync(sharedStylesPath, 'utf-8'));
+        if (pkg.name && pkg.name.startsWith('@')) {
+          const match = pkg.name.match(/^(@[^/]+)\//);
+          if (match) return match[1];
+        }
+      } catch (e) {
+        // 忽略解析错误
+      }
+    }
+
+    // 尝试从根 package.json 读取
+    const rootPkgPath = path.join(this.monorepoRoot, 'package.json');
+    if (fs.existsSync(rootPkgPath)) {
+      try {
+        const pkg = JSON.parse(fs.readFileSync(rootPkgPath, 'utf-8'));
+        if (pkg.name) {
+          return `@${pkg.name}`;
+        }
+      } catch (e) {
+        // 忽略解析错误
+      }
+    }
+
+    return null;
+  }
+
+  async prompting() {
+    try {
+      if (!this.monorepoRoot) {
+        console.error('');
+        console.error('❌ Error: Internal error - monorepoRoot not initialized.');
+        console.error('');
+        process.exit(1);
+      }
+
+      const detectedScope = this._detectPackageScope();
+
+      this.answers = await this.prompt([
+        {
+          type: 'input',
+          name: 'appName',
+          message: 'Sub app name',
+          default: 'subapp',
+          filter: (input) => toKebab(input),
+          validate: (input) => {
+            const value = toKebab(input);
+            if (!value) return 'App name is required';
+            const destDir = path.join(this.monorepoRoot, 'apps', value);
+            if (fs.existsSync(destDir)) {
+              return `Target already exists: apps/${value}`;
+            }
+            return true;
+          }
+        },
+        {
+          type: 'input',
+          name: 'packageScope',
+          message: 'Package scope',
+          default: detectedScope || '@my-project',
+          validate: (input) => {
+            if (!input) return 'Package scope is required';
+            if (!input.startsWith('@')) return 'Package scope must start with @';
+            return true;
+          }
+        }
+      ]);
+
+      this.appName = toKebab(this.answers.appName);
+      this.appNamePascal = toPascal(this.appName);
+      this.packageScope = this.answers.packageScope;
+      this.templateDir = this.templatePath('homepage');
+      this.destDir = path.join(this.monorepoRoot, 'apps', this.appName);
+    } catch (error) {
+      console.error('');
+      console.error('❌ Error during prompting:');
+      console.error(`   ${error.message}`);
+      console.error('');
+      process.exit(1);
+    }
+  }
+
+  writing() {
+    try {
+      if (!fs.existsSync(this.templateDir)) {
+        console.error('');
+        console.error('❌ Error: Template directory not found.');
+        console.error(`   Expected: ${this.templateDir}`);
+        console.error('');
+        process.exit(1);
+      }
+
+      const templateData = {
+        appName: this.appName,
+        AppName: this.appNamePascal,
+        packageScope: this.packageScope
+      };
+
+      const files = collectFiles(this.templateDir, this.templateDir, IGNORE_LIST);
+
+      if (files.length === 0) {
+        console.error('');
+        console.error('❌ Error: No template files found.');
+        console.error(`   Template directory: ${this.templateDir}`);
+        console.error('');
+        process.exit(1);
+      }
+
+      for (const relPath of files) {
+        const srcPath = path.join(this.templateDir, relPath);
+        const destRelPath = transformDestPath(relPath);
+        const destPath = path.join(this.destDir, destRelPath);
+
+        if (isTemplateFile(relPath)) {
+          this.fs.copyTpl(srcPath, destPath, templateData);
+        } else {
+          this.fs.copy(srcPath, destPath);
+        }
+      }
+    } catch (error) {
+      console.error('');
+      console.error('❌ Error during file generation:');
+      console.error(`   ${error.message}`);
+      console.error('');
+      process.exit(1);
+    }
+  }
+
+  end() {
+    this.log('');
+    this.log('✅ 子应用创建成功！');
+    this.log('');
+    this.log(`   cd apps/${this.appName}`);
+    this.log('   pnpm install');
+    this.log('   pnpm dev');
+    this.log('');
+  }
+};

package/generators/subapp-react/templates/homepage/.env

@@ -0,0 +1,4 @@
+# Default: 5
+CHECK_TIMEOUT=10
+DID_YOU_KNOW=none
+PORT=8010

package/generators/subapp-react/templates/homepage/README.md

@@ -0,0 +1,116 @@
+# <%= appName %> 子应用
+
+qiankun 微前端子应用，基于 UmiJS Max 构建。
+
+## 快速开始
+
+### 安装依赖
+
+```bash
+# 在项目根目录执行
+pnpm install
+```
+
+### 启动开发服务
+
+```bash
+# 方式一：在项目根目录执行
+pnpm -C apps/<%= appName %> dev
+
+# 方式二：进入子应用目录执行
+cd apps/<%= appName %>
+pnpm dev
+```
+
+## 环境变量配置
+
+在 `apps/<%= appName %>/.env.local` 文件中配置环境变量（如果不存在请创建）：
+
+```bash
+# 开发服务器端口号（默认 8000）
+PORT=8001
+
+# 其他环境变量示例
+# MOCK=none  # 禁用 mock 数据
+```
+
+> **提示**：`.env.local` 文件不会被 Git 追踪，适合存放本地开发配置。
+
+## 常用命令
+
+| 命令 | 说明 |
+|---|---|
+| `pnpm dev` | 启动开发服务器 |
+| `pnpm start` | 同 `pnpm dev` |
+| `pnpm build` | 生产环境构建 |
+| `pnpm build:development` | 开发环境构建 |
+| `pnpm build:testing` | 测试环境构建 |
+| `pnpm build:production` | 生产环境构建 |
+| `pnpm setup` | 初始化 Umi 配置 |
+
+## 目录结构
+
+```
+<%= appName %>/
+├── config/                  # Umi 配置目录
+│   ├── config.ts            # 基础配置
+│   ├── config.dev.ts        # 开发环境配置
+│   ├── config.prod.ts       # 生产环境配置
+│   ├── config.testing.ts    # 测试环境配置
+│   └── routes.ts            # 路由配置
+├── mock/                    # Mock 数据
+│   └── api.mock.ts
+├── src/
+│   ├── app.tsx              # Umi 运行时配置
+│   ├── assets/              # 静态资源
+│   ├── common/              # 公共模块
+│   │   ├── logger.ts        # 日志工具
+│   │   ├── mainApp.ts       # 主应用通信
+│   │   └── request.ts       # 请求封装
+│   ├── pages/               # 页面组件
+│   ├── styles/              # 样式文件
+│   └── global.less          # 全局样式
+├── .env.local               # 本地环境变量（需自行创建）
+├── package.json
+└── tsconfig.json
+```
+
+## 微前端配置
+
+本应用作为 qiankun 子应用运行，关键配置：
+
+```typescript
+// config/config.ts
+{
+  mountElementId: '<%= appName %>-root',  // 挂载元素 ID
+  qiankun: {
+    slave: {},  // 启用子应用模式
+  },
+}
+```
+
+## 共享依赖
+
+如项目配置了共享样式包，可在 Less 文件中引入：
+
+```less
+@import '@your-scope/shared-styles/variables';
+```
+
+## 相关文档
+
+### 项目文档
+
+- [项目根目录 README](../../README.md)
+
+### UmiJS 官方文档
+
+| 文档 | 说明 |
+|---|---|
+| [快速上手](https://umijs.org/docs/guides/getting-started) | 环境准备、创建项目、启动与部署 |
+| [目录结构](https://umijs.org/docs/guides/directory-structure) | 项目目录约定 |
+| [路由](https://umijs.org/docs/guides/routes) | 路由配置与约定式路由 |
+| [环境变量](https://umijs.org/docs/guides/env-variables) | `.env` 文件与环境变量配置 |
+| [Mock 数据](https://umijs.org/docs/guides/mock) | 本地 Mock 数据配置 |
+| [微前端](https://umijs.org/docs/max/micro-frontend) | qiankun 微前端集成 |
+| [配置](https://umijs.org/docs/api/config) | 完整配置项参考 |

package/generators/subapp-react/templates/homepage/_gitignore

@@ -0,0 +1,9 @@
+/node_modules
+/.env.local
+/.umirc.local.ts
+/config/config.local.ts
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/dist
+.swc

package/generators/subapp-react/templates/homepage/config/config.dev.ts

@@ -0,0 +1,59 @@
+// https://umijs.org/config/
+
+import { defineConfig } from '@umijs/max';
+
+/**
+ * 开发环境配置
+ * - 不配置 externals，直接打包依赖，方便独立运行调试
+ * - 生产环境通过 config.prod.ts 配置 externals 复用主应用依赖
+ */
+const config: ReturnType<typeof defineConfig> = {
+  publicPath: '/',
+  base: '/',
+
+  define: {
+    'process.env.NODE_ENV': 'development',
+  },
+  // /**
+  //  * @name 脚本加载配置
+  //  * @description 开发环境独立运行时，通过 CDN 加载公共依赖
+  //  * 作为微前端子应用运行时，这些库由主应用提供
+  //  */
+  // headScripts: [
+  //   'https://unpkg.com/react@18/umd/react.development.js',
+  //   'https://unpkg.com/react-dom@18/umd/react-dom.development.js',
+  //   'https://unpkg.com/@arco-design/web-react@latest/dist/arco.min.js',
+  // ],
+
+  // /**
+  //  * @name 样式加载配置
+  //  * @description 开发环境独立运行时加载 Arco Design CSS
+  //  */
+  // links: [
+  //   {
+  //     rel: 'stylesheet',
+  //     href: 'https://unpkg.com/@arco-design/web-react@latest/dist/css/arco.min.css',
+  //   },
+  // ],
+
+  // /**
+  //  * @name 外部依赖配置
+  //  * @description 开发环境也需要 externals，配合 CDN 使用
+  //  */
+  // externals: {
+  //   react: 'window.React',
+  //   'react-dom': 'window.ReactDOM',
+  //   '@arco-design/web-react': 'window.arco',
+  // },
+  /**
+   * @name 样式加载配置
+   * @description 开发环境独立运行时加载 Arco Design CSS
+   * 作为微前端子应用运行时，样式由主应用提供
+   */
+  styles: [
+    // Arco Design 基础样式
+    'https://unpkg.com/@arco-design/web-react@2.66.6/dist/css/arco.min.css',
+  ],
+};
+
+export default defineConfig(config);

package/generators/subapp-react/templates/homepage/config/config.prod.ts

@@ -0,0 +1,41 @@
+// https://umijs.org/config/
+
+import { defineConfig } from '@umijs/max';
+const { CDN_PUBLIC_PATH } = process.env;
+
+const PUBLIC_PATH: string = CDN_PUBLIC_PATH
+? `${CDN_PUBLIC_PATH.replace(/\/?$/, '/') }homepage/`
+: '/homepage/';
+
+const config: ReturnType<typeof defineConfig> = {
+  // 生产环境：将所有代码打包到一个文件
+  extraBabelPlugins: ['babel-plugin-dynamic-import-node'],
+
+  // 禁用代码分割，只输出一个 JS 和一个 CSS
+  chainWebpack(memo) {
+    // 禁用 splitChunks
+    memo.optimization.splitChunks(false);
+    // 禁用 runtimeChunk
+    memo.optimization.runtimeChunk(false);
+    return memo;
+  },
+  publicPath: PUBLIC_PATH,
+
+
+  /**
+   * @name 外部依赖配置
+   * @description 将大型公共库排除打包，运行时从主应用获取
+   * @doc https://umijs.org/docs/api/config#externals
+   *
+   * 作为 qiankun 子应用时，这些库由主应用提供：
+   * - react / react-dom: 主应用已加载，避免多实例问题
+   * - @arco-design/web-react: 主应用已加载，复用组件和样式
+   */
+  externals: {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    '@arco-design/web-react': 'arco',
+  },
+};
+
+export default defineConfig(config);

package/generators/subapp-react/templates/homepage/config/config.testing.ts

@@ -0,0 +1,40 @@
+// https://umijs.org/config/
+
+import { defineConfig } from '@umijs/max';
+const { CDN_PUBLIC_PATH } = process.env;
+
+const PUBLIC_PATH: string = CDN_PUBLIC_PATH
+  ? `${CDN_PUBLIC_PATH.replace(/\/?$/, '/')}homepage/`
+  : '/homepage/';
+
+const config: ReturnType<typeof defineConfig> = {
+  // 测试环境：将所有代码打包到一个文件
+  extraBabelPlugins: ['babel-plugin-dynamic-import-node'],
+
+  // 禁用代码分割，只输出一个 JS 和一个 CSS
+  chainWebpack(memo) {
+    // 禁用 splitChunks
+    memo.optimization.splitChunks(false);
+    // 禁用 runtimeChunk
+    memo.optimization.runtimeChunk(false);
+    return memo;
+  },
+  publicPath: PUBLIC_PATH,
+
+  /**
+   * @name 外部依赖配置
+   * @description 将大型公共库排除打包，运行时从主应用获取
+   * @doc https://umijs.org/docs/api/config#externals
+   *
+   * 作为 qiankun 子应用时，这些库由主应用提供：
+   * - react / react-dom: 主应用已加载，避免多实例问题
+   * - @arco-design/web-react: 主应用已加载，复用组件和样式
+   */
+  externals: {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    '@arco-design/web-react': 'arco',
+  },
+};
+
+export default defineConfig(config);

package/generators/subapp-react/templates/homepage/config/config.ts

@@ -0,0 +1,102 @@
+// https://umijs.org/config/
+
+import { defineConfig } from '@umijs/max';
+import routes from './routes';
+
+/**
+ * @name 使用公共路径
+ * @description 部署时的路径
+ */
+const PUBLIC_PATH = '/dist/<%= appName %>/';
+
+const config: ReturnType<typeof defineConfig> = {
+  /**
+   * @name 挂载元素 ID
+   * @description React 应用挂载的 DOM 元素 id
+   */
+  mountElementId: '<%= appName %>-root',
+
+  /**
+   * @name 基础路径
+   * @description 子应用的路由前缀
+   */
+  base: '/',
+
+  /**
+   * @name 开启 hash 模式
+   * @description 让 build 之后的产物包含 hash 后缀
+   */
+  hash: false,
+
+  publicPath: PUBLIC_PATH,
+
+  /**
+   * @name 路由配置
+   */
+  routes,
+
+  /**
+   * @name moment 的国际化配置
+   */
+  ignoreMomentLocale: true,
+
+  /**
+   * @name 快速热更新配置
+   */
+  fastRefresh: true,
+
+  //============== 以下都是 max 的插件配置 ===============
+
+  /**
+   * @name 网络请求配置
+   * @doc https://umijs.org/docs/max/request
+   */
+  request: {},
+
+  /**
+   * @name 数据流插件
+   * @doc https://umijs.org/docs/max/data-flow
+   */
+  model: {},
+
+  /**
+   * @name 全局初始状态
+   */
+  initialState: {},
+
+  /**
+   * @name layout 插件
+   * @description 禁用内置 layout，子应用使用自定义布局
+   */
+  layout: false,
+
+  /**
+   * @name 其他配置
+   */
+  esbuildMinifyIIFE: true,
+
+  define: {
+    'process.env.NODE_ENV': process.env.NODE_ENV,
+  },
+
+  /**
+   * @name qiankun 微前端配置
+   * @description 作为子应用
+   * @doc https://umijs.org/docs/max/micro-frontend
+   */
+  qiankun: {
+    slave: {},
+  },
+
+  /**
+   * @name 代码拆分配置
+   * @description 确保动态 import 的模块打包为独立 chunk
+   * @doc https://umijs.org/docs/api/config#codeSplitting
+   */
+  codeSplitting: {
+    jsStrategy: 'granularChunks',
+  },
+};
+
+export default defineConfig(config);
+

package/generators/subapp-react/templates/homepage/config/routes.ts

@@ -0,0 +1,7 @@
+/**
+ * @name 路由配置
+ * @description homepage 子应用的路由配置
+ */
+export default [
+  { path: '/<%= appName %>', component: '@/pages/index' },
+];