react + typescript 完成自己的组件库

Run Dom

1. npm install
2. npm start

相关依赖

sass：css预处理

normalize.css

1. 不同的浏览器在对于CSS没有定义的一些样式属性是不一样的，
2. 比如没有在自己的CSS里面规定超链接有没有下划线的时候，有些浏览器有，有些浏览器没有；
3. 再比如有一些浏览器规定的超链接默认颜色是蓝色，有一些又是黑色。
4. 而这个CSS的功能就是对几乎所有的默认样式进行重置，让所有的浏览器上对于未定义的样式浏览效果达到一致
5. （虽然说无法完全一致，但至少可以消除掉大部分差距）
6. 当然如果你自己的CSS已经对默认样式进行了重置，不使用它也是可以的。

classnames

提供一个方法可以动态绑定class名。const classes = classNames('jujiu', { [taige]: isTaige }) 如果isTaige是true, 等价于class="jujiu taige"

jest: 通用测试框架

1. 适用于babel、typescript、node、react、angular、vue等等。
2. 零配置
3. 安全且运行速度超快
4. 是create-react-app 默认的测试框架，已经内置，可以直接使用

react-testing-library

1. 除了通用测试框架，测试react组件，还需要react-testing-library。[email protected]以上已经内置了该插件。

react-fontawesome

1. react的图标库插件

rimraf: 可以用来删除文件

组件库颜色体系

1. 系统颜色：作为基架的颜色
2. 产品颜色：组件的颜色

知识点

1. useEffect如果没有第二个参数，那么只要useState的值发生变化就会触发，如果值为某个或者某几个useState，那么只有当这些指定的useState变化时才会触发
2. useContext作用, react是单项数据流，父组件向子组件传递，组件结构如果嵌套太深，向内层传递参数就需要手动一层层的传递，useContext的作用就可以让内层的组件直接拿到外层提供者的参数。
3. packahe.json的dependencies中的依赖都是项目运行所必须的, devDependencies中的依赖只在开发时使用, 不参与到生成环境.peerDependencies表示组件库所依赖的库(例如：element-ui依赖于vue,要想使用element-ui就必须先安装vue)

本地测试组件库

1. 如果我们的组件库项目名为jujiu-design，测试组件的项目为jujiu-design-test(一个react的项目)
2. jujiu-design的终端输入npm link, 改命令把软连接创建到全局
3. 进入jujiu-design-test目录，然后在该项目终端输入npm link jujiu-design 这样就又创建了一个软连接，把jujiu-design连接了起来。
4. 本地测试组件的时候可能会出现组件库和项目中的react版本不同，而导致报错，可以在jujiu-design的终端使用命令npm link ../jujiu-design-test/node_modules/react指明使用jujiu-design-test项目的react版本
5. 在jujiu-design-test项目中的package.json的dependencies中写入虚拟依赖："jujiu-design": "0.1.0"
6. 引入组件库相关：import { Button } from 'jujiu-design'、import 'jujiu-design/build/index.css'

发布流程

1. npm run build
2. npm publish: npm不能使用淘宝镜像，请切换到源npm config set registry https://registry.npmjs.org