Wondering what’s next for npm?Check out our public roadmap! »

    mcashier-components
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

    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


    开发

    技术堆栈

    开发流程

    1. 通过 npm run dev 命令启动开发模式
    2. 修改或新增 React 组件代码,开发完后提交代码

    如果你是新增组件,你可以直接通过 npm run new ComponentName 去新建一个叫做 ComponentName 的组件。

    构建和代码校验 CI 会自动执行,你需要关注的只有2个命令就是 npm run devnpm 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;
      }
    }

    Install

    npm i mcashier-components

    DownloadsWeekly Downloads

    2

    Version

    0.0.1

    License

    none

    Last publish

    Collaborators

    • avatar