yida-jsx 1.0.0

package/README.md

@@ -0,0 +1,230 @@
+# 宜搭 JSX 脚手架工具
+
+一个用于快速创建宜搭 JSX 组件项目的脚手架工具。
+
+## 功能特性
+
+- 快速初始化宜搭 JSX 项目
+- 自动生成符合规范的页面结构
+- 支持创建子组件
+- 自动配置 Rollup 打包配置
+- 符合宜搭开发规范
+
+## 安装
+
+### 全局安装
+
+```bash
+npm install -g @liuxianhua1996/yida-jsx
+```
+
+### 本地安装
+
+```bash
+npm install @liuxianhua1996/yida-jsx
+```
+
+## 使用方法
+
+### 1. 初始化新项目
+
+```bash
+yida-cli init <project-name>
+```
+
+示例：
+```bash
+yida-cli init my-yida-project
+```
+
+这会创建以下目录结构：
+
+```
+project/
+├── src/
+│   ├── pages/           # 页面目录
+│   │   └── visit/       # 示例页面
+│   │       ├── index.js
+│   │       ├── index.jsx
+│   │       ├── index.css
+│   │       └── components/
+│   └── utils/           # 工具函数
+│       └── date.js
+├── rollup.config.mjs    # Rollup 配置
+├── package.json         # 项目配置
+└── .gitignore          # Git 忽略文件
+```
+
+### 2. 创建新页面
+
+在项目根目录下运行：
+
+```bash
+yida-cli page <page-name>
+```
+
+示例：
+```bash
+yida-cli page visit
+```
+
+这会在 `src/pages/` 目录下创建一个新的页面文件夹，包含：
+- `index.js` - 页面逻辑（didMount, onSubmit 等）
+- `index.jsx` - 页面主视图（包含 function render）
+- `index.css` - 页面主样式
+- `components/` - 存放该页面专用的子组件
+
+### 3. 创建新组件
+
+```bash
+yida-cli component <component-name> <page-name>
+```
+
+示例：
+```bash
+yida-cli component Header visit
+```
+
+这会在指定页面的 `components/` 目录下创建组件文件夹，包含：
+- `<ComponentName>.jsx` - 组件源码
+- `<ComponentName>.css` - 组件专用样式
+
+### 4. 打包项目
+
+```bash
+npm run build
+```
+
+### 4. 打包项目
+
+```bash
+npm run build
+```
+### 5. 打包指定页面
+
+```bash
+npm run build:page <page-name>
+```
+
+### 6. 开发模式（监听文件变化）
+
+```bash
+npm run dev
+```
+
+## 命令选项
+
+```bash
+yida-cli --help          # 显示帮助信息
+yida-cli --version       # 显示版本号
+```
+
+## 项目结构说明
+
+```
+project/
+├── src/
+│   ├── pages/                    # 页面根目录
+│   │   └── visit/                # 访客页面根目录
+│   │       ├── index.js          # 页面逻辑（didMount, onSubmit 等）
+│   │       ├── index.jsx         # 页面主视图（包含 function render）
+│   │       ├── index.css         # 页面主样式
+│   │       │
+│   │       ├── components/       # 存放该页面专用的子组件
+│   │       │   └── Header/       # Header 组件文件夹
+│   │       │       ├── Header.jsx  # Header 源码
+│   │       │       └── Header.css  # Header 专用样式
+│   │       │
+│   │       └── out/              # 打包产物目录（由 Rollup 自动生成）
+│   │           ├── index.js       # 每一行都是 export function ...
+│   │           ├── index.jsx      # 已嵌套 Header 源码的 render 函数
+│   │           └── index.css      # 已合并 Header.css 的全量样式
+│   │
+│   └── utils/                     # 全局共享工具
+│       └── date.js                # formatDate 等
+│
+├── rollup.config.mjs             # 核心打包逻辑
+└── package.json                  # 项目依赖配置文件
+```
+
+## 开发规范
+
+### JSX 组件规范
+
+- 禁止使用原生 React Hooks（useState, useRef, useEffect 等）
+- 交互逻辑必须写在 JS 面板，JSX 仅负责渲染 UI
+- 禁止使用可选链（?.），必须使用 && 进行逻辑判断
+- 必须同时实现 PC 和 Mobile 端组件
+- 所有组件逻辑必须包裹在 `render` 方法中
+
+### JS 面板规范
+
+- JS 面板一定要有 `export function didMount()` 方法
+- 所有变量必须加模块前缀（如 `sales_`）
+- 在 JSX 中绑定事件，在 JS 面板定义逻辑
+
+### CSS 样式规范
+
+- 普通组件隔离：类名前必须带 `:root`
+- 模态框样式禁止带 `:root`，但需确保类名唯一
+- 严禁使用 Tailwind CSS
+
+## 示例代码
+
+### 页面逻辑 (index.js)
+
+```javascript
+import { formatDate } from '../../utils/date'; 
+
+export function didMount() {
+  console.log('页面加载完成');
+  this.initData();
+}
+
+export function onNameChange(val) {
+  this.setState({ name: val });
+}
+
+export function onSubmit() {
+  const date = formatDate(Date.now());
+  console.log('提交数据', this.state, date);
+}
+```
+
+### 页面视图 (index.jsx)
+
+```jsx
+import React from 'react';
+import Header from './components/Header';
+
+export default function render() {
+  const { title } = this.state;
+  return (
+    <div className="page">
+      <Header title={title} />
+      <div className="content">内容区</div>
+    </div>
+  );
+}
+```
+
+## 常见问题
+
+### Q: 如何在项目中使用 CLI 命令？
+
+A: 确保在项目根目录（包含 package.json 和 rollup.config.mjs 的目录）中运行命令。
+
+### Q: 创建的组件如何使用？
+
+A: 在页面的 JSX 文件中导入组件：
+```jsx
+import ComponentName from './components/ComponentName/ComponentName';
+```
+
+### Q: 如何自定义模板？
+
+A: 修改 `cli/templates.js` 文件中的模板内容。
+
+## 许可证
+
+ISC

package/cli/index.js

@@ -0,0 +1,125 @@
+#!/usr/bin/env node
+
+import { createProject, createPage, createComponent } from './templates.js';
+import path from 'path';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+function printHelp() {
+  console.log(`
+宜搭 JSX 脚手架 CLI
+
+用法:
+  yida-cli <command> [options]
+
+命令:
+  init <project-name>     初始化新项目
+  page <page-name>        创建新页面
+  component <name> [page] 创建新组件
+
+选项:
+  -h, --help              显示帮助信息
+  -v, --version           显示版本号
+
+示例:
+  yida-cli init my-project
+  yida-cli page visit
+  yida-cli component Header visit
+  `);
+}
+
+function printVersion() {
+  console.log('yida-cli v1.0.0');
+}
+
+function getProjectDir() {
+  let currentDir = process.cwd();
+  
+  while (currentDir !== path.parse(currentDir).root) {
+    if (fs.existsSync(path.join(currentDir, 'package.json')) && 
+        fs.existsSync(path.join(currentDir, 'rollup.config.mjs'))) {
+      return currentDir;
+    }
+    currentDir = path.dirname(currentDir);
+  }
+  
+  throw new Error('未找到项目根目录，请在项目目录中运行此命令');
+}
+
+async function main() {
+  const args = process.argv.slice(2);
+  const command = args[0];
+
+  try {
+    switch (command) {
+      case 'init': {
+        const projectName = args[1];
+        if (!projectName) {
+          console.error('错误: 请指定项目名称');
+          console.log('用法: yida-cli init <project-name>');
+          process.exit(1);
+        }
+        const targetDir = args[2] || process.cwd();
+        createProject(projectName, targetDir);
+        break;
+      }
+
+      case 'page': {
+        const pageName = args[1];
+        if (!pageName) {
+          console.error('错误: 请指定页面名称');
+          console.log('用法: yida-cli page <page-name>');
+          process.exit(1);
+        }
+        const projectDir = getProjectDir();
+        createPage(pageName, projectDir);
+        break;
+      }
+
+      case 'component': {
+        const componentName = args[1];
+        if (!componentName) {
+          console.error('错误: 请指定组件名称');
+          console.log('用法: yida-cli component <component-name> [page-name]');
+          process.exit(1);
+        }
+        const pageName = args[2];
+        if (!pageName) {
+          console.error('错误: 请指定页面名称');
+          console.log('用法: yida-cli component <component-name> <page-name>');
+          process.exit(1);
+        }
+        const projectDir = getProjectDir();
+        createComponent(componentName, pageName, projectDir);
+        break;
+      }
+
+      case '-h':
+      case '--help':
+        printHelp();
+        break;
+
+      case '-v':
+      case '--version':
+        printVersion();
+        break;
+
+      default:
+        if (!command) {
+          printHelp();
+        } else {
+          console.error(`未知命令: ${command}`);
+          console.log('运行 "yida-cli --help" 查看帮助信息');
+          process.exit(1);
+        }
+    }
+  } catch (error) {
+    console.error('错误:', error.message);
+    process.exit(1);
+  }
+}
+
+main();

package/cli/templates.js

@@ -0,0 +1,485 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const templates = {
+  indexJs: (pageName) => `import { formatDate } from '../../utils/date'; 
+
+// 必须导出的生命周期
+export function didMount() {
+  console.log('${pageName} 页面加载完成');
+  this.initData(); 
+}
+
+// 自定义方法
+export function onNameChange(val) {
+  this.setState({ name: val });
+}
+
+export function onSubmit() {
+  const date = formatDate(Date.now());
+  console.log('提交数据', this.state, date);
+}
+`,
+
+  indexJsx: (pageName) => `// 主入口
+import React from 'react';
+
+export default function render() {
+  const { title } = this.state;
+  return (
+    <div className="${pageName}-page">
+      <div className="${pageName}-header">
+        <h1>{title || '${pageName} 页面'}</h1>
+      </div>
+      <div className="${pageName}-content">内容区</div>
+    </div>
+  );
+}
+`,
+
+  indexCss: (pageName) => `:root .${pageName}-page {
+  width: 100%;
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+:root .${pageName}-header {
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+:root .${pageName}-content {
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+`,
+
+  componentJsx: (componentName) => `import React from 'react';
+
+export default function ${componentName}({ title }) {
+  return (
+    <div className="${componentName.toLowerCase()}-container">
+      <h2>{title || '${componentName}'}</h2>
+    </div>
+  );
+}
+`,
+
+  componentCss: (componentName) => `:root .${componentName.toLowerCase()}-container {
+  padding: 16px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+}
+`,
+
+  utilsDate: () => `export function formatDate(timestamp) {
+  const date = new Date(timestamp);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return \`\${year}-\${month}-\${day}\`;
+}
+
+export function formatDateTime(timestamp) {
+  const date = new Date(timestamp);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+  return \`\${year}-\${month}-\${day} \${hours}:\${minutes}:\${seconds}\`;
+}
+`,
+
+  packageJson: (projectName) => `{
+  "name": "${projectName}",
+  "version": "1.0.0",
+  "description": "宜搭 JSX 项目",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "build": "rollup -c",
+    "build:page": "node scripts/build-page.js",
+    "dev": "rollup -c -w",
+    "dev:page": "node scripts/dev-page.js"
+  },
+  "keywords": ["yida", "jsx"],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "@babel/preset-react": "^7.28.5",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "rollup": "^4.57.1"
+  }
+}
+`,
+
+  rollupConfig: () => `import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const pagesDir = path.resolve(__dirname, 'src/pages');
+
+const targetPage = process.env.PAGE_NAME;
+
+function recursiveParser(filePath, context) {
+  if (context.files.has(filePath)) return "";
+  context.files.add(filePath);
+
+  let code = fs.readFileSync(filePath, "utf-8");
+  const dir = path.dirname(filePath);
+
+  code = code.replace(/import\\s+['"](..+?\\.css)['"];?\\r?\\n?/g, (m, p) => {
+    const fullPath = path.resolve(dir, p);
+    if (fs.existsSync(fullPath)) {
+      context.css.push(
+        \`/* From: \${path.basename(fullPath)} */\\n\${fs.readFileSync(fullPath, "utf-8")}\`,
+      );
+    }
+    return "";
+  });
+
+  code = code.replace(/import\\s+['"](..+?\\.js)['"];?\\r?\\n?/g, (m, p) => {
+    const fullPath = path.resolve(dir, p);
+    if (fs.existsSync(fullPath) && !fullPath.endsWith("index.js")) {
+      context.logic.push(
+        \`/* Logic From: \${path.basename(fullPath)} */\\n\${fs.readFileSync(fullPath, "utf-8")}\`,
+      );
+    }
+    return "";
+  });
+
+  let childJSXDefinitions = "";
+  const jsxImportRegex =
+    /import\\s+[\\w\\s{},]+\\s+from\\s+['"](..+?)['"];?\\r?\\n?/g;
+  code = code.replace(jsxImportRegex, (match, importPath) => {
+    let childPath = path.resolve(dir, importPath);
+    if (!fs.existsSync(childPath)) {
+      if (fs.existsSync(childPath + ".jsx")) childPath += ".jsx";
+      else if (fs.existsSync(childPath + ".js")) childPath += ".js";
+      else return "";
+    }
+    childJSXDefinitions += recursiveParser(childPath, context) + "\\n";
+    return "";
+  });
+
+  code = code.replace(/import\\s+[\\s\\S]*?from\\s+['"].*?['"];?\\s*/g, "");
+  code = code.replace(/['"]?react['"]?;?\\s*/g, "");
+
+  const isMainEntry = filePath.endsWith("index.jsx");
+  if (isMainEntry) {
+    const renderFuncRegex = /(function\\s+render\\s*\\([^)]*\\)\\s*\\{)/;
+
+    code = code
+      .replace(/export\\s+default\\s+function\\s+render/, "function render")
+      .replace(/export\\s+default\\s+render/, "")
+      .replace(/export\\s+\\{\\s*render\\s+as\\s+default\\s*\\}\\s*;?/g, "");
+
+    if (renderFuncRegex.test(code)) {
+      code = code.replace(renderFuncRegex, \`$1\\n\${childJSXDefinitions}\`);
+    }
+  } else {
+    code = code
+      .replace(/export\\s+default\\s+/g, "")
+      .replace(/export\\s+function\\s+/g, "function ")
+      .replace(/export\\s+/g, "");
+  }
+
+  return code.trim();
+}
+
+function logicCleanerPlugin(extraLogic = []) {
+  return {
+    name: "logic-cleaner-plugin",
+    renderChunk(code) {
+      let combinedCode = extraLogic.join("\\n\\n") + "\\n\\n" + code;
+
+      let cleanCode = combinedCode.replace(/export\\s+\\{\\s*[\\s\\S]*?\\};?/g, "");
+
+      cleanCode = cleanCode.replace(/^export\\s+/gm, "");
+      cleanCode = cleanCode.replace(
+        /^(async\\s+)?function\\s+(\\w+)/gm,
+        "export $1function $2",
+      );
+
+      return cleanCode.trim();
+    },
+  };
+}
+
+function buildPage(pageName) {
+  const pagePath = path.join(pagesDir, pageName);
+  const outDir = path.join(pagePath, "out");
+  
+  if (!fs.existsSync(pagePath)) {
+    console.error(\`错误: 页面目录不存在: \${pagePath}\`);
+    return null;
+  }
+  
+  if (!fs.existsSync(outDir)) fs.mkdirSync(outDir, { recursive: true });
+
+  const context = { css: [], logic: [], files: Set.prototype };
+  context.files = new Set();
+
+  if (fs.existsSync(path.join(pagePath, "index.jsx"))) {
+    const finalViewCode = recursiveParser(
+      path.join(pagePath, "index.jsx"),
+      context,
+    );
+
+    fs.writeFileSync(path.join(outDir, "index.jsx"), finalViewCode);
+
+    const mainCssPath = path.join(pagePath, "index.css");
+    if (fs.existsSync(mainCssPath))
+      context.css.push(fs.readFileSync(mainCssPath, "utf-8"));
+    fs.writeFileSync(
+      path.join(outDir, "index.css"),
+      context.css.join("\\n\\n"),
+    );
+
+    return {
+      input: path.join(pagePath, "index.js"),
+      output: { file: path.join(outDir, "index.js"), format: "es" },
+      plugins: [
+        resolve({ browser: true }),
+        commonjs(),
+        logicCleanerPlugin(context.logic),
+      ],
+    };
+  }
+  
+  return null;
+}
+
+const buildTasks = [];
+
+if (fs.existsSync(pagesDir)) {
+  const pages = fs
+    .readdirSync(pagesDir)
+    .filter((dir) => fs.statSync(path.join(pagesDir, dir)).isDirectory());
+
+  if (targetPage) {
+    console.log(\`📦 单独打包页面: \${targetPage}\`);
+    const task = buildPage(targetPage);
+    if (task) {
+      buildTasks.push(task);
+    }
+  } else {
+    console.log(\`📦 全量打包所有页面 (\${pages.length} 个)\`);
+    pages.forEach((pageName) => {
+      const task = buildPage(pageName);
+      if (task) {
+        buildTasks.push(task);
+      }
+    });
+  }
+}
+
+export default buildTasks;
+`,
+
+  gitignore: () => `# 依赖
+node_modules/
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# 构建输出
+dist/
+build/
+src/pages/*/out/
+*.log
+*.tsbuildinfo
+
+# 编辑器和 IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+.DS_Store
+
+# 临时文件
+*.tmp
+*.temp
+.cache/
+.temp/
+
+# 测试覆盖率
+coverage/
+.nyc_output/
+
+# 环境变量
+.env
+.env.local
+.env.*.local
+
+# 系统文件
+Thumbs.db
+Desktop.ini
+
+# 调试日志
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Rollup 缓存
+.rollup.cache/
+
+# 其他
+*.tgz
+`,
+
+  buildPageScript: () => `import { execSync } from 'child_process';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const args = process.argv.slice(2);
+const pageName = args[0];
+
+if (!pageName) {
+  console.error('❌ 请指定页面名称');
+  console.log('用法: node scripts/build-page.js <页面名称>');
+  console.log('示例: node scripts/build-page.js visit');
+  process.exit(1);
+}
+
+try {
+  console.log(\`📦 开始打包页面: \${pageName}\`);
+  
+  const command = \`set PAGE_NAME=\${pageName}&& rollup -c\`;
+  
+  execSync(command, {
+    stdio: 'inherit',
+    shell: true,
+    cwd: path.join(__dirname, '..')
+  });
+  
+  console.log(\`✅ 页面 \${pageName} 打包完成\`);
+} catch (error) {
+  console.error('❌ 打包失败:', error.message);
+  process.exit(1);
+}
+`,
+
+  devPageScript: () => `import { execSync } from 'child_process';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const args = process.argv.slice(2);
+const pageName = args[0];
+
+if (!pageName) {
+  console.error('❌ 请指定页面名称');
+  console.log('用法: node scripts/dev-page.js <页面名称>');
+  console.log('示例: node scripts/dev-page.js visit');
+  process.exit(1);
+}
+
+try {
+  console.log(\`📦 开始监听页面: \${pageName}\`);
+  
+  const command = \`set PAGE_NAME=\${pageName}&& rollup -c -w\`;
+  
+  execSync(command, {
+    stdio: 'inherit',
+    shell: true,
+    cwd: path.join(__dirname, '..')
+  });
+} catch (error) {
+  console.error('❌ 监听失败:', error.message);
+  process.exit(1);
+}
+`
+};
+
+export function createProject(projectName, targetDir) {
+  const projectPath = path.join(targetDir, projectName);
+
+  if (fs.existsSync(projectPath)) {
+    throw new Error(`目录 ${projectName} 已存在`);
+  }
+
+  fs.mkdirSync(projectPath, { recursive: true });
+  fs.mkdirSync(path.join(projectPath, 'src'));
+  fs.mkdirSync(path.join(projectPath, 'src/pages'));
+  fs.mkdirSync(path.join(projectPath, 'src/utils'));
+  fs.mkdirSync(path.join(projectPath, 'scripts'));
+
+  fs.writeFileSync(path.join(projectPath, 'package.json'), templates.packageJson(projectName));
+  fs.writeFileSync(path.join(projectPath, 'rollup.config.mjs'), templates.rollupConfig());
+  fs.writeFileSync(path.join(projectPath, '.gitignore'), templates.gitignore());
+  fs.writeFileSync(path.join(projectPath, 'src/utils/date.js'), templates.utilsDate());
+  fs.writeFileSync(path.join(projectPath, 'scripts/build-page.js'), templates.buildPageScript());
+  fs.writeFileSync(path.join(projectPath, 'scripts/dev-page.js'), templates.devPageScript());
+
+  console.log(`✓ 项目 ${projectName} 创建成功`);
+  console.log(`✓ 请运行以下命令安装依赖：`);
+  console.log(`  cd ${projectName}`);
+  console.log(`  npm install`);
+}
+
+export function createPage(pageName, projectDir) {
+  const pagesDir = path.join(projectDir, 'src/pages');
+  const pagePath = path.join(pagesDir, pageName);
+
+  if (fs.existsSync(pagePath)) {
+    throw new Error(`页面 ${pageName} 已存在`);
+  }
+
+  fs.mkdirSync(pagePath, { recursive: true });
+  fs.mkdirSync(path.join(pagePath, 'components'));
+
+  fs.writeFileSync(path.join(pagePath, 'index.js'), templates.indexJs(pageName));
+  fs.writeFileSync(path.join(pagePath, 'index.jsx'), templates.indexJsx(pageName));
+  fs.writeFileSync(path.join(pagePath, 'index.css'), templates.indexCss(pageName));
+
+  console.log(`✓ 页面 ${pageName} 创建成功`);
+}
+
+export function createComponent(componentName, pageName, projectDir) {
+  const componentsDir = path.join(projectDir, 'src/pages', pageName, 'components');
+  const componentPath = path.join(componentsDir, componentName);
+
+  if (fs.existsSync(componentPath)) {
+    throw new Error(`组件 ${componentName} 已存在`);
+  }
+
+  fs.mkdirSync(componentPath, { recursive: true });
+
+  fs.writeFileSync(path.join(componentPath, `${componentName}.jsx`), templates.componentJsx(componentName));
+  fs.writeFileSync(path.join(componentPath, `${componentName}.css`), templates.componentCss(componentName));
+
+  console.log(`✓ 组件 ${componentName} 创建成功`);
+  console.log(`✓ 请在页面中引入组件：`);
+  console.log(`  import ${componentName} from './components/${componentName}/${componentName}';`);
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "yida-jsx",
+  "version": "1.0.0",
+  "description": "宜搭 JSX 组件开发脚手架工具",
+  "main": "index.js",
+  "type": "module",
+  "bin": {
+    "yida-cli": "./cli/index.js"
+  },
+  "files": [
+    "cli",
+    "rollup.config.mjs",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "build:page": "node scripts/build-page.js",
+    "dev": "rollup -c -w",
+    "dev:page": "node scripts/dev-page.js",
+    "init": "node cli/index.js init",
+    "page": "node cli/index.js page",
+    "component": "node cli/index.js component"
+  },
+  "keywords": [
+    "yida",
+    "jsx",
+    "scaffold",
+    "cli",
+    "宜搭"
+  ],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "@babel/preset-react": "^7.28.5",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "cross-env": "^7.0.3",
+    "rollup": "^4.57.1"
+  }
+}

package/rollup.config.mjs

@@ -0,0 +1,166 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const pagesDir = path.resolve(__dirname, "src/pages");
+
+const targetPage = process.env.PAGE_NAME;
+
+function recursiveParser(filePath, context) {
+  if (context.files.has(filePath)) return "";
+  context.files.add(filePath);
+
+  let code = fs.readFileSync(filePath, "utf-8");
+  const dir = path.dirname(filePath);
+
+  code = code.replace(/import\s+['"](\..+?\.css)['"];?\r?\n?/g, (m, p) => {
+    const fullPath = path.resolve(dir, p);
+    if (fs.existsSync(fullPath)) {
+      context.css.push(
+        `/* From: ${path.basename(fullPath)} */\n${fs.readFileSync(fullPath, "utf-8")}`,
+      );
+    }
+    return "";
+  });
+
+  code = code.replace(/import\s+['"](\..+?\.js)['"];?\r?\n?/g, (m, p) => {
+    const fullPath = path.resolve(dir, p);
+    if (fs.existsSync(fullPath) && !fullPath.endsWith("index.js")) {
+      context.logic.push(
+        `/* Logic From: ${path.basename(fullPath)} */\n${fs.readFileSync(fullPath, "utf-8")}`,
+      );
+    }
+    return "";
+  });
+
+  let childJSXDefinitions = "";
+  const jsxImportRegex =
+    /import\s+[\w\s{},]+\s+from\s+['"](\..+?)['"];?\r?\n?/g;
+  code = code.replace(jsxImportRegex, (match, importPath) => {
+    let childPath = path.resolve(dir, importPath);
+    if (!fs.existsSync(childPath)) {
+      if (fs.existsSync(childPath + ".jsx")) childPath += ".jsx";
+      else if (fs.existsSync(childPath + ".js")) childPath += ".js";
+      else return "";
+    }
+    childJSXDefinitions += recursiveParser(childPath, context) + "\n";
+    return "";
+  });
+
+  code = code.replace(/import\s+[\s\S]*?from\s+['"].*?['"];?\s*/g, "");
+  code = code.replace(/['"]?react['"]?;?\s*/g, "");
+
+  const isMainEntry = filePath.endsWith("index.jsx");
+  if (isMainEntry) {
+    const renderFuncRegex = /(function\s+render\s*\([^)]*\)\s*\{)/;
+
+    code = code
+      .replace(/export\s+default\s+function\s+render/, "function render")
+      .replace(/export\s+default\s+render/, "")
+      .replace(/export\s+\{\s*render\s+as\s+default\s*\}\s*;?/g, "");
+
+    if (renderFuncRegex.test(code)) {
+      code = code.replace(renderFuncRegex, `$1\n${childJSXDefinitions}`);
+    }
+  } else {
+    code = code
+      .replace(/export\s+default\s+/g, "")
+      .replace(/export\s+function\s+/g, "function ")
+      .replace(/export\s+/g, "");
+  }
+
+  return code.trim();
+}
+
+function logicCleanerPlugin(extraLogic = []) {
+  return {
+    name: "logic-cleaner-plugin",
+    renderChunk(code) {
+      let combinedCode = extraLogic.join("\n\n") + "\n\n" + code;
+
+      let cleanCode = combinedCode.replace(/export\s+\{\s*[\s\S]*?\};?/g, "");
+
+      cleanCode = cleanCode.replace(/^export\s+/gm, "");
+      cleanCode = cleanCode.replace(
+        /^(async\s+)?function\s+(\w+)/gm,
+        "export $1function $2",
+      );
+
+      return cleanCode.trim();
+    },
+  };
+}
+
+function buildPage(pageName) {
+  const pagePath = path.join(pagesDir, pageName);
+  const outDir = path.join(pagePath, "out");
+  
+  if (!fs.existsSync(pagePath)) {
+    console.error(`错误: 页面目录不存在: ${pagePath}`);
+    return null;
+  }
+  
+  if (!fs.existsSync(outDir)) fs.mkdirSync(outDir, { recursive: true });
+
+  const context = { css: [], logic: [], files: Set.prototype };
+  context.files = new Set();
+
+  if (fs.existsSync(path.join(pagePath, "index.jsx"))) {
+    const finalViewCode = recursiveParser(
+      path.join(pagePath, "index.jsx"),
+      context,
+    );
+
+    fs.writeFileSync(path.join(outDir, "index.jsx"), finalViewCode);
+
+    const mainCssPath = path.join(pagePath, "index.css");
+    if (fs.existsSync(mainCssPath))
+      context.css.push(fs.readFileSync(mainCssPath, "utf-8"));
+    fs.writeFileSync(
+      path.join(outDir, "index.css"),
+      context.css.join("\n\n"),
+    );
+
+    return {
+      input: path.join(pagePath, "index.js"),
+      output: { file: path.join(outDir, "index.js"), format: "es" },
+      plugins: [
+        resolve({ browser: true }),
+        commonjs(),
+        logicCleanerPlugin(context.logic),
+      ],
+    };
+  }
+  
+  return null;
+}
+
+const buildTasks = [];
+
+if (fs.existsSync(pagesDir)) {
+  const pages = fs
+    .readdirSync(pagesDir)
+    .filter((dir) => fs.statSync(path.join(pagesDir, dir)).isDirectory());
+
+  if (targetPage) {
+    console.log(`📦 单独打包页面: ${targetPage}`);
+    const task = buildPage(targetPage);
+    if (task) {
+      buildTasks.push(task);
+    }
+  } else {
+    console.log(`📦 全量打包所有页面 (${pages.length} 个)`);
+    pages.forEach((pageName) => {
+      const task = buildPage(pageName);
+      if (task) {
+        buildTasks.push(task);
+      }
+    });
+  }
+}
+
+export default buildTasks;