宜搭 JSX 脚手架工具

一个用于快速创建宜搭 JSX 组件项目的脚手架工具。

功能特性

• 快速初始化宜搭 JSX 项目
• 自动生成符合规范的页面结构
• 支持创建子组件
• 自动配置 Rollup 打包配置
• 符合宜搭开发规范

安装

全局安装

npm install -g @liuxianhua1996/yida-jsx

本地安装

npm install @liuxianhua1996/yida-jsx

使用方法

1. 初始化新项目

yida-cli init <project-name>

示例：

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. 创建新页面

在项目根目录下运行：

yida-cli page <page-name>

示例：

yida-cli page visit

这会在 src/pages/ 目录下创建一个新的页面文件夹，包含：

• index.js - 页面逻辑（didMount, onSubmit 等）
• index.jsx - 页面主视图（包含 function render）
• index.css - 页面主样式
• components/ - 存放该页面专用的子组件

3. 创建新组件

yida-cli component <component-name> <page-name>

示例：

yida-cli component Header visit

这会在指定页面的 components/ 目录下创建组件文件夹，包含：

• <ComponentName>.jsx - 组件源码
• <ComponentName>.css - 组件专用样式

4. 打包项目

npm run build

4. 打包项目

npm run build

5. 打包指定页面

npm run build:page <page-name>

6. 开发模式（监听文件变化）

npm run dev

命令选项

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)

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)

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 文件中导入组件：

import ComponentName from './components/ComponentName/ComponentName';

Q: 如何自定义模板？

A: 修改 cli/templates.js 文件中的模板内容。

许可证

ISC