飞项组件库

概要

• 飞项 pc 组件库以 react、typescript、sass、styled-components 作为核心

• 使用 rollup 作为组件库构建，使用 storybook 作为组件库文档

组件库版本更新：

1. 先git add . 和 git commit -m 写好当前的备注信息
2. npm version patch （有3种参数 major 主版本、minor 次版本、patch小版本，最常用就是patch小版本）
3. 运行 yarn build-fy-publish
4. 上传完成后，git push --tags （tags 必须要，可以推送 npm version命令打好的tag 以便于以后组件库的tag维护）

运行

# 安装依赖
pnpm install

# 调试组件&编写storybook
pnpm start

# 自动化新建组件 (可选步骤，可以自己手动创建)
pnpm run create-com

# 构建组件库
pnpm run build
# 构建组件库 开启 sourcemap
pnpm run build:dev

# 构建storybook 文档
pnpm run build-storybook

# build 与 publish
pnpm run build-publish

• 新建组件的时候 最好使用 pnpm run create-com 来自动初始化

要点

1、导出文件 index.ts 组件导出路径必须以相对路径导出，不同类型的请分开写 export

正确实例

import FlyBasePopper from './modules/Popper/FlyBasePopper';
import FlyTooltip from './modules/Popper/FlyTooltip';
import { FlyBasePopperCtrl } from './modules/Popper/FlyBasePopper/controller';
import { useCreation } from './hook/useCreation';
import { useEventListener } from './hook/useEventListener';
import { useHover } from './hook/useHover';
import { useMemoizedFn } from './hook/useMemoizedFn';

// popper
export { FlyBasePopper, FlyTooltip, FlyBasePopperCtrl };

// hook
export { useCreation, useEventListener, useHover, useMemoizedFn };

目录

├── dist                    打包后目录
│  ├── assets
│  ├── components
│  ├── index.d.ts
│  └── index.min.js
|
├── plugin                 rollup 插件
│  └── iconfont.js
|
├── shell                  常用node脚本
│  └── ....js
|
├── src
│  ├── assets               静态资源
│  ├── components           组件核心目录
│  ├── hook                 react 核心使用的hook 库
│  ├── stories_utils        storybook 使用的工具函数
│  ├── types                组件库全局使用的  类型
│  ├── utils                全局工具类
│  ├── index.scss
│  ├── index.stories.mdx    storybook 首页md文档
│  ├── index.ts             组件导出文件 ps:添加组件后必须导出
│  └── typings.d.ts         全局ts
|
├── templates               组件模版文件
├── rollup.config.js
├── package.json
├── tsconfig.json
└── yarn.lock

规范

使用 lowercase_with_underscores 风格命名库和源文件名，使用 UpperCamelCase 风格命名组件目录。

一些文件系统不区分大小写，所以很多项目要求文件名必须是小写字母。 使用分隔符这种形式可以保证命名的可读性。使用下划线作为分隔符可确保名称仍然是有效标识符。

├── components                  组件核心目录
│  └── Button                   Button组件
|      ├── common               公用目录
│      |   ├── base_utils.ts    工具方法
|      |   ├── base_ctrl.ts     基础控制器
|      |   └── ....
│      ├── BaseButton           BaseButton组件组件
│      |   ├── index.tsx        组件核心文件
|      |   ├── index.css        样式
|      |   ├── utils.ts         该组件提供的工具方法、控制器等
|      |   └── ...
│      └── CheckButton  ...

使用 UpperCamelCase 风格命名类型。

Classes（类名）、 enums（枚举类型）、 type | interface（类型定义）、tsx | jsx (组件定义)。

class SliderMenu { ... }

enum MenuType {...}

type Props = {...}

interface MenuItem {...}

// 组件
function Button(){...}

const GroupButton = ()=>{...}

使用 lowerCamelCase 风格来命名其他的标识符。

类成员、类型定义参数、函数名、变量、参数以及命名参数等 除了第一个单词，每个单词首字母都应大写，并且不使用分隔符。

class HttpRequest {
    private httpRequest
}

type Props = {
    primary:boolean
}

interface IProps {
    primary:boolean
}


function getList(defaultParams:any){...}

const postList = (defaultParams:any)=>{...}

const httpRequest = 'xxx'