fariellany

React components library

Usage no npm install needed!

<script type="module">
  import fariellany from 'https://cdn.skypack.dev/fariellany';
</script>

README

build

  1. 创建react-app typescript 脚手架

    • yarn create react-app my-test-app --template typescript
  2. 安装storybook

    • npx -p @storybook/cli sb init
  3. 安装sass classnames

    • yarn add sass-loader node-sass
    • yarn add @types/classnames classnames
  • 注意:
    • 最新的create-react-app 已经在/node_modules/react-scripts/config文件夹中配置好了sass
  1. typescript配置storybook 以及react-docgen-typescript-loader

    • 地址

    • yarn add ts-loader react-docgen-typescript-loader

npm package

test

  • 工具

    • 使用 Testing Libraryjest
  • 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

遇到的问题?

  1. npm run jest失败(不支持import和ES6语法)?

    • 原因:其实在Jest里有一个babel-jest组件,我们在使用npm run test的时候,它先去检测开发环境中是否安装了babel,也就是查看有没有babel-core,如果有bable-core就会去查看.babelrc配置文件,根据配置文件进行转换,转换完成,再进行测试。
  2. babel 兼容性问题?

    • 解决: 根目录创建 .env 文件 => SKIP_PREFLIGHT_CHECK=true
  3. 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
  • 注意:
  • 还需要额外的引入样式文件
  1. 发布的版本遵守semver规则
  • 主版本号:当你做了不兼容的 API 修改,
  • 次版本号:当你做了向下兼容的功能性新增,
  • 修订号:当你做了向下兼容的问题修正。
  1. 添加husky后 commmit 之前测试代码为空,无法运行?
    "test:nowatch": "cross-env CI=true react-scripts test",
  1. 针对未格式化的代码 可以使用 lint-staged
  • 每次git commit的时候,都会先执行eslint对代码进行格式化和检查,确保代码没有问题之后再提交
  • eslint 参数配置
"husky": {
   "hooks": {
     "pre-commit": "lint-staged"
   }
 },
 "lint-staged": {
   "*.{js,jsx,txs,ts}": [
     "eslint --fix", //先格式化 --fix 自动调整代码
     "git add" // 然后add
   ]
 }

  1. Failed to load preset: "@storybook/addon-info" on level 1
  1. npm publish 文件上传设置?
  • 在package.json 中设置files选择要发布的我呢见

  • 注意:

    • 默认被包含,即便设置忽略也无效
      • package.json
      • README (and its variants)
      • CHANGELOG (and its variants)
      • LICENSE / LICENCE