docs

Feature

• npm start：本地开发环境
• npm run start:ep：本地开发环境
• npm run build：构建用于发布到 npm 的包
• npm run test：组件测试
• npm publish：发布 npm 包

TODO

• 统一的构建环境（Docker）;
• 自动化的 CI/CD 流程及能力提供（静态代码扫描、单元测试、构建、发布 npm 包）；

业务中使用

import React from 'react';
import '@nefficiency/component/dist/style/ned.css'; // 一般在业务顶层引入，避免重复引入
import { Button, ConfigProvider } from '@nefficiency/component';

const App: React.FC = () => {
  return (
    <ConfigProvider>
      <Button>点击按钮</Button>
    </ConfigProvider>
  );
};

export default App;

工程规范

目录约定

.
├── src # 组件所在目录
...
├──── Component ## 组件
├────── index.tsx
├—————— style
├———————— index.less
├—————— index.md
├—————— demo
├——————── *.tsx
├── lessvars
├──── om.js
├──── ep.js

样式（less）

层级关系

| 文件 | 作用 | | :----------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ./lessvars/{om\|ep}.js | 必选，overmind/ep 主题的样式变量定义。1. 通常针对颜色、主次色、布局大小等视觉层面的抽象元素进行变量定义；2. 用于对引入样式变量（ant 样式变量）的覆盖。 | | style/index.less | 必选，组件的样式定义。1. 声明依赖的 less 文件（内部依赖和外部依赖）； 2. 组件的样式定义，尽量使用颜色、主次色、布局等视觉定义的基础变量； 3. 对引入的外部样式的覆盖。 |

不同类型组件的样式

| 类型 | 样式说明 | | :----------------------------- | :----------------------------------------------------------------------------- | | 基于 antd 组件二次开发的组件 | 由于 antd 内的样式 className 结构较为复杂，一般会引用 antd 为该组件定义的 less | | 基于较为简单组件二次开发的组件 | 摒弃其自定义样式，为其定义新样式 | | 直接开发新组件 | 无历史包袱，直接定义新样式 |

样式名命名规范

采用前缀+组件名的形式

.ned-button
.ned-button-primary
.ned-button-primary-danger

git 分支约定

分支命名和使用

master：主分支，与 npm 上的发布的资源，保持完全一致。

develop：开发分支，feature 和 bugfix 分支从该分支创建。

feature/*：特性分支，用于开发新功能/组件，合入 develop 后删除。

bugfix/*：bug 修复分支，用于非紧急 bug 修复，合入 develop 后删除。

hotfix/*：紧急修复分支，从 master 创建，修复后合并至 master 上线，同时再合并至 develop 以保证 master 和 develop 同步。

commit message 规范

💥 Added(compiler): Added 'comments' option\n 新增功能

🐛 Fixed(compiler): Fixed some bug\n 修复 bug

📝 docs(compiler): add some docs\n 新增文档说明

💄 UI(compilery): better styles\n UI 样式调整

🎨 chore(compiler): do something\n 其他

正则说明：

/^(((\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]) )?(revert: )?(feat|Added|Fixed|fix|docs|UI|refactor|⚡perf|workflow|build|CI|typos|chore|tests|types|wip|release|dep)(\(.+\))?: .{1,50}/

组件开发流程

组件开发需求  ——>  交互视觉设计  ——>  交互视觉评审  ——>  技术评审（API设计）
                                                        |
                                                        ∨
发布NPM包    <——  交互视觉验收  <——  代码Review  <——  组件开发与测试

其他建议

• 社区开源组件有很多值得学习的地方
• 不要过早抽象，可以先实现，再抽象