架构-react组件库笔记

1.技术栈
    框架 react
    测试 jest+enzyme
    检查 eslint
    打包 webpack+gulp
    文档 bisheng
    钩子 husky
1.storybook(生成组件库文档)
    storybook是一个用于开发UI组件的开源工具，是UI组件的开发环境
    @storybook/react是React的运行环境
    @storybook/addon-essentials是storybook最好插件的合集
    1) 安装
        yarn add @storybook/react   @storybook/addon-essentials --dev
    2)配置
        1.添加.storybook\main.js文件
        2.button文件夹下添加Components.stories.mdx/Install.stories.mdx/Introduction.stories.mdx/button.stories.tsx文件
        3.package.json添加命令
            "storybook": "start-storybook -p 7006",
            "build-storybook": "build-storybook",
    3)使用
        npm run build //打包dist文件
        npm run storybook//生成文档
2.测试
    1)安装
        jest是一个令人愉快的 JavaScript 测试框架
        Enzyme 用于 React 的 JS 测试工具
        puppeteer是一个控制 headless Chrome 的 Node.js API
        jest-image-snapshot执行图像比较的Jest匹配器,对于视觉回归测试非常有用
        yarn add jest @types/jest  @wojtekmaj/enzyme-adapter-react-17 puppeteer @types/puppeteer jest-environment-puppeteer  @types/jest-environment-puppeteer jest-puppeteer  jest-image-snapshot @types/jest-image-snapshot --dev
        yarn add enzyme  @types/enzyme  --dev
    2.配置
        1)package.json文件添加命令
            "test:unit": "jest --config unit.jest.js",
            "test:e2e": "jest --config e2e.jest.js",
            "test": "npm run test:unit && npm run test:e2e",
        2)添加unit.jest.js文件,tests,e2e.jest.js,jest-puppeteer.config.js,button/unit,button/e2e文件夹
        3)使用
            npm run test:unit//测试组件
            npm run test:e2e // 生成代码测试覆盖率报告
            npm run test //同时执行上面两个命令
3.编译发布(gulp只负责编译依然保留文件目录结构，用来实现组件按需引入)
    1)安装依赖
        yarn add rimraf gulp gulp-typescript gulp-babel merge2 --dev
        npm version patch
        npm publish
        cat ~/.npmrc
    2)添加gulpfile.js/tsconfig.json文件
    3)配置
        1)package.json文件添加命令
            "compile": "gulp compile"
        2)使用
            npm run compile
    4)发布
        nrm use npm
        npm whoami//登录
        npm publish//发布
    5)使用
        import {button} from '组件库'