ts仿实现ant-design库

文档地址 https://StringLiu2.github.io/mack-design

    yarn add mack-design 
    // or
    npm i mack-design 

引入方式

    import { Button } from 'mack-design';

引入样式文件

    import 'mack-design/dist/index.css';

学习要点

1. ts的Omit、Partial和React自身提供的xxxHTMLAttributes相关泛型类型、FunctionComponentProps等的类型定义使用

2. 知道scss的变量、each、mixin的使用

3. react开发组件库的流程

4. 对@testing-library相关的测试，和一些扩展的jest测试API学习，异步测试,如何测试拖拽相关

5. 使用storybook，知道如何配置storybook以及使用，生成文档

6. npm发布、git提交以及Travis-CI的文档部署

7. 总体上知道项目开发到部署的流程，CI/CD的相关概念

---------------------------------知识点总结----------------------------------

1.开始

1.1创建项目

    npx create-react-app mack-design --typescript

1.2安装相关依赖

安装font-awesome图标库相关依赖

    yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome -S 

安装axios请求依赖

    yarn add axios -S

安装 classnames生成className、react-transition-group动画库

    yarn add classnames react-transition-group -S
    // and 类型声明文件
    yarn add @types/classnames @types/react-transition-group -D

测试相关，新版本create-react-app这个脚手架自带

生成storybook文档的命令 storybook for react 下面命令自动生成

    npx -p @storybook/cli sb init

1.3 添加文档的相关库，配置.storybook/webpack.config.js

安装依赖 @storybook/addon-info(生成文档字段介绍和代码)

    yarn add @storybook/addon-info -S
    yarn add @types/storybook__addon-info -D

    // .storybook/webpack.config.js配置
    // webpack配置提供给storybook
    module.exports = ({ config }) => {
        config.module.rules.push({
            test: /\.tsx?$/,
            use: [
            {
                loader: require.resolve("babel-loader"),
                options: {
                presets: [require.resolve("babel-preset-react-app")]
                }
            },
            {
                // 通过react代码生成表格
                loader: require.resolve('react-docgen-typescript-loader'),
                options: {
                // 把那些字面值常量、联合类型等用字符串展开
                shouldExtractLiteralValuesFromEnum: true, 
                // 过滤props
                propFilter(props) {
                    // 如果是node_module就就false
                    if(props.parent) return !props.parent.fileName.includes('node_modules');
                    // 默认true
                    return true;
                }
                }
            }
            ]
        });

        config.resolve.extensions.push(".ts", ".tsx");

        return config;
    };

安装文档生成库，react-ts的 react-docgen-typescript-loader

    yarn add react-docgen-typescript-loader -D

1.4 安装打包前所需要的库

    yarn add rimraf cross-env husky -S

rimraf 是兼容window、mac、linux系统，用来删除文件夹、文件的命令

cross-env 是兼容window、mac、linux系统的配置env的命令

husky 哈士奇钩子package.json的配置工具，可以在运行git提交前进行一系列的命令

    // package.json
    {
    "husky": {
        "hooks": {
        "pre-commit": "npm run test:nowatch && npm run lint"
        }
    }
    }

2.生成需要打包的库

2.1 设置tsconfig.build.json

{
    "compilerOptions": {
        "outDir": "dist", // 代码生成的文件夹
        "module": "ESNext", // 支持的模块、AMD、CMD、UMD、COMMONJS、ES6、ESNext等
        "target": "ES5",
        "declaration": true, // 生成.d.ts文件，类型声明文件
        "jsx": "react", // react、react-native ...
        "moduleResolution": "node", // 查找文件的方式，不要classic
        "allowSyntheticDefaultImports": true // 需要直接引入 不是 import * as React from 'react'
    },
    // 包含的文件
    "include": [
        "src"
    ],
    // 不包含的文件
    "exclude": [
        "src/**/*.test.tsx",
        "src/**/*.stories.tsx"
    ]
}

2.2 在package.json中设置对应的命令和配置

{
    // 描述
    "description": "test React components library",
    // 作者
    "author": "mack liu",
    // 许可证，正常都是MIT
    "license": "MIT",
    "keywords": [ // npm上搜索的关键字
        "mack-design"
    ],
    // 是否是私有的
    "private": false,
    // 对应的首页页面地址
    "homepage": "https://github.com/StringLiu2/mack-design",
    // 仓库地址
    "repository": {
        "type": "git",
        "url": "https://github.com/StringLiu2/mack-design"
    },
    // 主入口文件
    "main": "dist/index.js",
    // 主模块文件
    "module": "dist/index.js",
    // 类型声明文件，可以多个
    "types": "dist/index.d.ts",
    // 发布到npm上面的时候的文件，就一个dist
    "files": [
        "dist"
    ],
    // 提示用户需要按照的依赖项，正常不需要用户安装的，都是打包，声明相关的，都放在devDependencies上面
    "peerDependencies": {
        "react": ">=16.8.0",
        "react-dom": ">=16.8.0"
    },
     "scripts": {
        "start": "react-scripts start",
        // 打包命令，执行删除文件夹，然后通过tsconfig.build.json打包tsx文件，最后执行scss打包命令
        "build": "npm run delete && npm run build:ts && npm run build:scss",
        "delete": "rimraf ./dist",
        "build:ts": "tsc -p tsconfig.build.json",
        "build:scss": "node-sass ./src/styles/index.scss ./dist/index.css",
        "test": "react-scripts test",
        // 测试不watch、设置process.env.CI为true，然后运行即可
        "test:nowatch": "cross-env CI=true react-scripts test",
        // eslint检查，后缀是js,jsx,ts,tsx，检查文件夹是src、最多警告只能10个
        "lint": "eslint --ext js,jsx,ts,tsx src --max-warnings 10",
        "eject": "react-scripts eject",
        // 运行storybook文档，开启一个服务
        "storybook": "start-storybook -p 9009 -s public",
        // 打包生成静态的storybook文档
        "build-storybook": "build-storybook -s public",
        // 在npm publish之前的配置，测试+检查、然后打包，最终才提交到npm上面
        "prepublishOnly": "npm run test:nowatch && npm run lint && npm run build"
    },
    // 哈士奇，git提交之前的操作
    "husky": {
        "hooks": {
            "pre-commit": "yarn test:nowatch && yarn lint"
        }
    },
}

2.3 打包前的本地测试

先对项目进行 npm link mack-design 进行相关的映射到本地

    npm link mack-design

这时候会因为项目和库都使用了react，造成冲突，指定到项目的react (默认会在自己的node_modules下面找，就造成了这个问题)

    npm link ./test-mack-design/node_modules/react进行指定相同的react包和版本

2.4 配置npm、git

配置npm，上传

    // npm whoami 查看是否登录了，报错就没有登录

    // npm config ls 查看源，不能是淘宝的源

    // npm adduser 进行登录

    // npm publish 发布

配置上传git

    // 在github创建一个仓库

    // 判断是否连接到仓库 git remote -v 

    // 进行远程仓库连接 git remote add origin url

    // 开始进行提交
    // git add .  
    // git commit -m 'commit message'
    // git push origin master

    // 如果报错
    // git pull origin master
    // 然后执行git add . 和后面两个命令

3.集成和部署

CI - 持续集成

• 频繁的将代码集成到主干(master)
• 快速发现错误
• 防止分支大幅度偏离主干

CD - 持续交付、持续部署

• 频繁的将软件的新版本，交付给质量团队或者用户
• 代码通过部署之后，自动部署到生产环境中

Travis CI 在线CI/CD测试和部署的平台

我们需要登录 www.travis-ci.com 上面登录，然后同意即可

这时候我们需要在根目录下创建一个.travis.yml文件，代码如下 ，然后在提交后会自动在Travis CI运行下面的配置文件

    # 这个文件会自动在你git push 项目的成功后运行 npm install  or npm ci (ci -> 运行.lock相关的版本锁文件)
    language: node_js # 使用语言
    node_js: # 语言的版本
        - "stable"
    cache: # 使用缓存
    directories:
        - node_modules
    env: # 环境变量
        - CI=true
    # 等待travis CI运行成功，这时候我们需要进行文档部署到travis CI (下面就是自动化部署的配置)
    script:
        - npm run build-storybook # 自动运行这个命令，生成静态文件
    deploy:
        provider: pages
        skip_cleanup: true
        github_token: $github_token # 生成的token 32ab2812d8e8790860f134af8ece6240f1cdf276
        local_dir: storybook-static # 上传哪个文件夹的文件
        on:
            branch: master # 哪个branch分支发生变化就执行