mcashier-components
用于 POS 项目的 Web 移动端基础 React UI 组件。
使用
安装依赖
npm i mcashier-components -S
在项目中导入
; <Button/>
按需引入
采用以上导入方式会把所以组件打包进你的代码中,需要给你的 Webpack 配置加一个 Loader,相关配置如下:
const path = ; moduleexports = module: rules: test: /\.js$/ use: 'ui-component-loader?lib=mcashier-components&style=index.css' 'ts-loader' include: path ;
这样配置你的 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
文件中,要符合以下规范:
; // @ 要导出组件的 Props 接口,这会用于生成组件的文档,属性的注释会出现在文档中
组件实现代码规范
组件的实现入口在 index.tsx
中,要符合以下规范:
;;// @ 要记得导入全局重置样式;; /** * @ 这里写组件的名称和介绍,这会用于生成组件的文档 * **按钮**-点击后会触发一个操作。 */ // @ 最后要记得导出组件;
在 TypeScript 代码的注释中,都支持 Markdown 语法,用于控制生成对应文档的样式。
组件文档规范
组件的实现入口在 readme.md
中,要符合以下规范:
### 不同类型
#### 默认
```js
<Button>我是按钮点击我</Button>
```
#### primary
```js
<Button type='primary'>我是按钮点击我</Button>
```
#### ghost
```js
<Button type='ghost'>我是按钮点击我</Button>
```
文档中要罗列出组件的所有使用场景,要归类,且加上文字说明。
文档中的组件代码,例如 <Button>我是按钮点击我</Button>
会在文档中生成对应可操作的组件实例。
SCSS 代码规范
组件的样式入口在 index.scss
中,要符合以下规范:
// @ 记得变量,并且尽量使用全局变量 ; // @ 所有组件都采用一样的前缀 mc- .mc-button