npm - generator-mico-cli - Versions diffs - 0.2.22 → 0.2.23 - Mend

generator-mico-cli 0.2.22 → 0.2.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/generators/subapp-umd/templates/README.md ADDED Viewed

@@ -0,0 +1,94 @@
+# <%= AppName %>
+UMD 组件包，基于 Webpack 构建，支持通过 `<script>` 标签加载。
+## 快速开始
+### 安装依赖
+```bash
+# 在项目根目录执行
+pnpm install
+```
+### 本地开发
+```bash
+pnpm dev
+```
+启动后可通过两种方式使用：
+| URL | 用途 |
+|---|---|
+| `http://localhost:<%= devPort %>/` | HTML 预览页，独立调试组件 |
+| `http://localhost:<%= devPort %>/<%= appName %>.umd.js` | UMD JS 文件，供主应用联调 |
+DevTools Sources 面板中可在 `webpack://<%= appName %>/src/` 下定位原始 TypeScript 源码进行断点调试。
+### 构建
+```bash
+pnpm build
+```
+产物输出到 `dist/` 目录：
+- `dist/<%= appName %>.umd.js` — UMD bundle
+- `dist/<%= appName %>.css` — 样式文件（如有）
+### 在浏览器中使用
+```html
+<!-- 1. 加载 React（宿主环境提供） -->
+<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+<!-- 2. 加载 UMD 组件 -->
+<link rel="stylesheet" href="path/to/<%= appName %>.css" />
+<script src="path/to/<%= appName %>.umd.js"></script>
+<!-- 3. 使用 -->
+<script>
+  var App = window['<%= umdGlobalName %>'].default;
+  var root = ReactDOM.createRoot(document.getElementById('root'));
+  root.render(React.createElement(App));
+</script>
+```
+### 主应用联调
+在主应用的 mock 菜单中配置 `jsUrls` 指向本地 dev server：
+```json
+{
+  "jsUrls": ["//localhost:<%= devPort %>/<%= appName %>.umd.js"]
+}
+```
+## 目录结构
+```
+<%= appName %>/
+├── public/
+│   └── index.html          # 本地开发预览页
+├── src/
+│   ├── index.ts            # UMD 入口
+│   ├── App.tsx             # 主组件
+│   └── App.less            # 样式
+├── webpack.config.js       # Webpack 配置
+├── tsconfig.json           # TypeScript 配置
+└── package.json
+```
+## 全局变量
+UMD 包加载后，可通过 `window.<%= umdGlobalName %>` 访问导出内容。
+## External 依赖
+以下依赖不打入包体，需由宿主环境提供：
+| 包名 | 全局变量 |
+|---|---|
+| `react` | `React` |
+| `react-dom` | `ReactDOM` |

package/generators/subapp-umd/templates/package.json ADDED Viewed

@@ -0,0 +1,35 @@
+{
+  "name": "<%= packageScope %>/<%= appName %>",
+  "version": "0.0.1",
+  "description": "UMD package - <%= appName %>",
+  "main": "./dist/<%= appName %>.umd.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "webpack serve --mode development",
+    "build": "webpack --mode production",
+    "build:development": "webpack --mode development",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@mico-platform/ui": ">=0.0.13"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.26",
+    "@types/react-dom": "^18.3.7",
+    "css-loader": "^7.1.2",
+    "style-loader": "^4.0.0",
+    "html-webpack-plugin": "^5.6.3",
+    "less": "^4.3.0",
+    "less-loader": "^12.2.0",
+    "mini-css-extract-plugin": "^2.9.2",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.8.3",
+    "webpack": "^5.99.9",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.1"
+  }
+}

package/generators/subapp-umd/templates/public/index.html ADDED Viewed

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title><%= AppName %> - UMD Dev Preview</title>
+  <style>
+    body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
+    #root { padding: 24px; }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <!-- React (external, provided by host environment) -->
+  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+  <!-- UMD Bundle -->
+  <script src="/<%= appName %>.umd.js"></script>
+  <script>
+    var mod = window['<%= umdGlobalName %>'];
+    var App = mod && (mod.default || mod.App || mod);
+    if (App) {
+      var root = ReactDOM.createRoot(document.getElementById('root'));
+      root.render(React.createElement(App));
+    } else {
+      document.getElementById('root').innerHTML =
+        '<p style="color:red">Error: window.<%= umdGlobalName %> not found. Check UMD global name.</p>';
+    }
+  </script>
+</body>
+</html>

package/generators/subapp-umd/templates/src/App.less ADDED Viewed

@@ -0,0 +1,15 @@
+.<%= appName %>-container {
+  padding: 16px;
+  h2 {
+    margin: 0 0 8px;
+    font-size: 20px;
+    color: #1d2129;
+  }
+  p {
+    margin: 0;
+    color: #86909c;
+    font-size: 14px;
+  }
+}

package/generators/subapp-umd/templates/src/App.tsx ADDED Viewed

@@ -0,0 +1,13 @@
+import React from 'react';
+import './App.less';
+const App: React.FC = () => {
+  return (
+    <div className="<%= appName %>-container">
+      <h2><%= AppName %></h2>
+      <p>UMD component is working.</p>
+    </div>
+  );
+};
+export default App;

package/generators/subapp-umd/templates/src/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default } from './App';
2	+ export { default as App } from './App';

package/generators/subapp-umd/templates/tsconfig.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "declaration": true,
+    "declarationMap": true,
+    "declarationDir": "./dist",
+    "outDir": "./dist",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/generators/subapp-umd/templates/webpack.config.js ADDED Viewed

@@ -0,0 +1,68 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+module.exports = (env, argv) => {
+  const isProd = argv.mode === 'production';
+  const outputFilename = '<%= appName %>.umd.js';
+  return {
+    entry: './src/index.ts',
+    output: {
+      path: path.resolve(__dirname, 'dist'),
+      filename: outputFilename,
+      publicPath: '/',
+      library: '<%= umdGlobalName %>',
+      libraryTarget: 'umd',
+      umdNamedDefine: true,
+      globalObject: 'typeof self !== "undefined" ? self : this',
+      clean: true,
+    },
+    externals: {
+      react: 'React',
+      'react-dom': 'ReactDOM',
+      '@mico-platform/ui': 'micoUI',
+    },
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        },
+        {
+          test: /\.less$/,
+          use: ['style-loader', 'css-loader', 'less-loader'],
+        },
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
+        },
+      ],
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: './public/index.html',
+        inject: false,
+      }),
+      ...(isProd
+        ? [new MiniCssExtractPlugin({ filename: '<%= appName %>.css' })]
+        : []),
+    ],
+    devtool: isProd ? false : 'source-map',
+    devServer: {
+      port: <%= devPort %>,
+      hot: true,
+      open: false,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+      },
+      static: {
+        directory: path.join(__dirname, 'public'),
+      },
+    },
+  };
+};

package/lib/utils.js CHANGED Viewed

@@ -109,7 +109,8 @@ const TEMPLATE_EXTENSIONS = new Set([
   '.less',
   '.md',
   '.mdc',
-  '.sh'
+  '.sh',
+  '.html'
 ]);
 /**

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "generator-mico-cli",
-  "version": "0.2.22",
+  "version": "0.2.23",
   "description": "Yeoman generator for Mico CLI projects",
   "keywords": ["yeoman-generator", "generator", "cli"],
   "license": "MIT",