mcashier-components
v0.0.1
Published
用于 POS 项目的 Web 移动端基础 React UI 组件
Downloads
4
Readme
mcashier-components
用于 POS 项目的 Web 移动端基础 React UI 组件。
使用
安装依赖
npm i mcashier-components -S
在项目中导入
import { Button } from 'mcashier-components';
<Button/>
按需引入
采用以上导入方式会把所以组件打包进你的代码中,需要给你的 Webpack 配置加一个 Loader,相关配置如下:
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: ['ui-component-loader?lib=mcashier-components&style=index.css', 'ts-loader'],
include: path.resolve(__dirname,'node_modules/mcashier-components')
},
]
},
};
这样配置你的 Webpack 后,当你只引入了 Button
组件时就只会打包进 Button
组件相关的代码。
Loader 的详细使用和原理见项目文档 ui-component-loader。
开发
技术堆栈
- 开发语言:TypeScript
- 样式语言:SCSS
- 测试框架:Jest
- 文档生成:react-styleguidist
- 构建:Webpack
- 代码校验:Stylelint + tslint
开发流程
- 通过 npm run dev 命令启动开发模式
- 修改或新增 React 组件代码,开发完后提交代码
如果你是新增组件,你可以直接通过 npm run new ComponentName 去新建一个叫做 ComponentName 的组件。
构建和代码校验 CI 会自动执行,你需要关注的只有2个命令就是 npm run dev
和 npm run new
。
所有的 Npm Script 列表含义如下:
- dev:启动开发模式
- new:快速新增组件
- build:构建出需要发布出去的资源,包括项目文档和 Npm 包
- test:运行单元测试
- lint:scss:检查 SCSS 代码风格
- lint:ts:检查 TypeScript 代码风格
- lint:检查所有代码风格
目录结构
|-- components @ 所有组件都放到这里面
| |-- Button @ 一个组件的代码都放到一个目录里,目录名称采用驼峰
| | |-- __tests__ @ 单元测试
| | | |-- __snapshots__ @ 生成的快照文件
| | | | `-- props.test.tsx.snap
| | | `-- props.test.tsx @ 一个单元测试文件,单测文件必须以 test.tsx 结尾
| | |-- index.scss @ 组件的样式
| | |-- index.tsx @ 组件的入口
| | |-- props.tsx @ 组件的属性接口定义
| | `-- readme.md @ 组件的文档
| |-- common @ 所有组件都用的上的代码
| | |-- reset.scss @ 全局样式重置于class
| | |-- util.tsx @ 工具函数
| | `-- var.scss @ 全局样式变量
| `-- index.ts @ 导出所有组件
|-- es @ 构建出的ES6版的Npm包目录
|-- lib @ 构建出的ES5版的Npm包目录
|-- styleguide @ 构建出的组件文档网站资源目录
组件规范
组件目录规范
components/Button
|-- __tests__
| `-- props.test.tsx @ 一个单元测试文件,单测文件必须以 test.tsx 结尾
|-- index.scss @ 组件的样式
|-- index.tsx @ 组件的入口
|-- props.tsx @ 组件的属性接口定义
`-- readme.md @ 组件的文档
组件的属性接口定义代码规范
组件的属性接口定义代码在props.tsx
文件中,要符合以下规范:
import {ButtonHTMLAttributes} from 'react';
// @ 要导出组件的 Props 接口,这会用于生成组件的文档,属性的注释会出现在文档中
export interface IButtonProps extends ButtonHTMLAttributes<any> {
/**
* 按钮大小
*/
size?: 'small' | 'large';
}
组件实现代码规范
组件的实现入口在 index.tsx
中,要符合以下规范:
import {Component} from 'react';
import {IButtonProps} from './props';
// @ 要记得导入全局重置样式
import '../common/reset.scss';
import './index.scss';
/**
* @ 这里写组件的名称和介绍,这会用于生成组件的文档
* **按钮**-点击后会触发一个操作。
*/
export class Button extends Component<IButtonProps, any> {
}
// @ 最后要记得导出组件
export default Button;
在 TypeScript 代码的注释中,都支持 Markdown 语法,用于控制生成对应文档的样式。
组件文档规范
组件的实现入口在 readme.md
中,要符合以下规范:
### 不同类型
#### 默认
```js
<Button>我是按钮点击我</Button>
```
#### primary
```js
<Button type='primary'>我是按钮点击我</Button>
```
#### ghost
```js
<Button type='ghost'>我是按钮点击我</Button>
```
文档中要罗列出组件的所有使用场景,要归类,且加上文字说明。
文档中的组件代码,例如 <Button>我是按钮点击我</Button>
会在文档中生成对应可操作的组件实例。
SCSS 代码规范
组件的样式入口在 index.scss
中,要符合以下规范:
// @ 记得变量,并且尽量使用全局变量
@import "../common/var";
// @ 所有组件都采用一样的前缀 mc-
.mc-button {
color: $tintColor;
// @ 子属性用 _ 连接,子元素用 - 连接
&_small {
padding: 0.5rem;
font-size: 0.8rem;
}
&_large {
padding: 0.8rem;
font-size: 1.3rem;
}
}