fariellany

v0.1.1

Published

3 years ago

React components library

Downloads

0High
0Medium
0Low

fariellany

Component antd React

build

创建react-app typescript 脚手架
- yarn create react-app my-test-app --template typescript
安装storybook
- npx -p @storybook/cli sb init
安装sass classnames
- yarn add sass-loader node-sass
- yarn add @types/classnames classnames

注意:
- 最新的create-react-app 已经在/node_modules/react-scripts/config文件夹中配置好了sass

typescript配置storybook 以及react-docgen-typescript-loader
- 地址
- yarn add ts-loader react-docgen-typescript-loader

npm package

test

工具
- 使用 Testing Library 和jest
testing-library 断言测试（适用于react）
@testing-library/react 测试React Component的库
@testing-library/react-hooks 测试自己写的的React Hooks的库
@testing-library/jest-dom 提供更多利于dom测试的断言

storybook

@storybook/preset-create-react-app
@storybook/react 连接react和storybook
react-docgen-typescript-loader 获取typescript类型
yarn add --dev
- @storybook/addon-actions, // 组件操作事件，如click、change
- @storybook/addon-links, // 链接，如某个Story中单击按钮，链接到另一个Story中
- @storybook/addon-info, // 显示相关信息
- @storybook/addon-knobs, // 在页面上改变变量
- @storybook/addon-notes, // 添加文本或者markdown

遇到的问题?

npm run jest失败(不支持import和ES6语法)?
- 原因:其实在Jest里有一个babel-jest组件，我们在使用npm run test的时候，它先去检测开发环境中是否安装了babel，也就是查看有没有babel-core，如果有bable-core就会去查看.babelrc配置文件，根据配置文件进行转换，转换完成，再进行测试。
babel 兼容性问题?
- 解决: 根目录创建 .env 文件 => SKIP_PREFLIGHT_CHECK=true
jest 测试reactcomponent 的时候，组件中import的 scss,css,png中@import 等资源需要在 jest 配置中进行模拟。
- 解决: 添加 yarn add dev identity-obj-proxy
- jest配置
```
 moduleNameMapper: {
 '\\.(css|scss|less)$': 'identity-obj-proxy',
 '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'identity-obj-proxy'
```

4. jest 直接运行 不支持@testing-library/react中fireEvent screen 方法

5. [npn link 的工作方式?](https://www.jianshu.com/p/aaa7db89a5b2)

- 在`要开发的组件下fariellany` 执行npm link  在全局的npm包下会生成一个暂时引用的包
```js
C:\Users\DELL-PC\AppData\Roaming\npm\node_modules

在要引用的组件下 react-test 执行 npm link name 包会暂时引用在引用组件的node_modules下

 fariellany会被链接到 react-test/node_modules

注意:
还需要额外的引入样式文件

发布的版本遵守semver规则

主版本号：当你做了不兼容的 API 修改，
次版本号：当你做了向下兼容的功能性新增，
修订号：当你做了向下兼容的问题修正。

添加husky后 commmit 之前测试代码为空,无法运行?

需要添加CI 参数

    "test:nowatch": "cross-env CI=true react-scripts test",

针对未格式化的代码可以使用 lint-staged

每次git commit的时候，都会先执行eslint对代码进行格式化和检查，确保代码没有问题之后再提交
eslint 参数配置

"husky": {
   "hooks": {
     "pre-commit": "lint-staged"
   }
 },
 "lint-staged": {
   "*.{js,jsx,txs,ts}": [
     "eslint --fix", //先格式化 --fix 自动调整代码
     "git add" // 然后add
   ]
 }

Failed to load preset: "@storybook/addon-info" on level 1

npm publish 文件上传设置?

在package.json 中设置files选择要发布的我呢见
注意:
- 默认被包含，即便设置忽略也无效
  - package.json
  - README (and its variants)
  - CHANGELOG (and its variants)
  - LICENSE / LICENCE

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

build

npm package

test

storybook

遇到的问题?