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的使用4. 对@testing-library相关的测试，和一些扩展的jest测试API学习，异步测试,如何测试拖拽相关5. 使用storybook，知道如何配置storybook以及使用，生成文档6. npm发布、git提交以及Travis-CI的文档部署7. 总体上知道项目开发到部署的流程，CI/CD的相关概念 ---------------------------------知识点总结---------------------------------- npx create-react-app mack-design --typescript
yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome -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这个脚手架自带 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 : / \. t s x ? $ / ,
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
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.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"
}
} ,
} 先对项目进行 npm link mack-design 进行相关的映射到本地 这时候会因为项目和库都使用了react，造成冲突，指定到项目的react (默认会在自己的node_modules下面找，就造成了这个问题) npm link ./test-mack-design/node_modules/react进行指定相同的react包和版本
// npm whoami 查看是否登录了，报错就没有登录
// npm config ls 查看源，不能是淘宝的源
// npm adduser 进行登录
// npm publish 发布 // 在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 . 和后面两个命令
频繁的将代码集成到主干(master)
快速发现错误
防止分支大幅度偏离主干
频繁的将软件的新版本，交付给质量团队或者用户
代码通过部署之后，自动部署到生产环境中
Travis CI 在线CI/CD测试和部署的平台 这时候我们需要在根目录下创建一个.travis.yml文件，代码如下 ，然后在提交后会自动在Travis CI运行下面的配置文件 # 这个文件会自动在你git push 项目的成功后运行 npm install or npm ci (ci -> 运行.lock相关的版本锁文件)language : node_js # 使用语言node_js : # 语言的版本cache : # 使用缓存directories :
- node_modules
env : # 环境变量# 等待travis CI运行成功，这时候我们需要进行文档部署到travis CI (下面就是自动化部署的配置)script :
- npm run build-storybook # 自动运行这个命令，生成静态文件deploy :
provider : pages
skip_cleanup : true
github_token : $github_token # 生成的token 32ab2812d8e8790860f134af8ece6240f1cdf276local_dir : storybook-static # 上传哪个文件夹的文件on :
branch : master # 哪个branch分支发生变化就执行