@liuxsh/antd v0.0.2

react-ui antd

https://ant.design/docs/react/introduce-cn > https://github.com/ant-design/ant-design

1. 技术栈

框架 react
测试 jest + enzyme
代码风格 eslint
打包 webpack + gulp
文档 bisheng
钩子 husky

1. 搭建开发环境

1. 配置 webpack

// 安装依赖
yarn add webpack webpack-cli webpack-dev-server mini-css-extract-plugin babel-loader css-loader autoprefixer postcss-loader less-loader less @babel/core @babel/preset-react @babel/preset-env  @babel/runtime @babel/plugin-transform-typescript  typescript @babel/plugin-transform-runtime @types/node --dev

// react
yarn add react react-dom
yarn add @types/react @types/react-dom --dev

// ts
tsc --init

// 配置webpack.config.js

2. 搭建 storybook

   https://storybook.js.org/

npx sb init

// 安装依赖
yarn add @storybook/react  @storybook/addon-essentials --dev
// storybook是一个用户开发ui组件的开源工具 是ui组件的开发环境
// @storybook/react是react的运行环境
// @storybook/addon-essentials 是 storybook插件集合

// 配置文件 .storybook\main.js
module.exports = {
  stories: [],
  // 插件
  addons: ['@storybook/addon-essentials'],
}
// 配置命令
"storybook": "start-storybook -p 6006",

// bisheng antd 源码使用的是自己开发的 一个讲markdown转为 react 单页网站的工具 可以支持简单的个人博客 可以通过插件扩展

3. 测试

// jest是js测试框架 jest-image-snapshot是执行图像比较的jest匹配
yarn add jest @types/jest  @wojtekmaj/enzyme-adapter-react-17  jest-image-snapshot @types/jest-image-snapshot --dev
// ENZYME(react的测试工具)
yarn add enzyme  @types/enzyme  --dev
// 无头浏览器的 node.js api
yarn add puppeteer @types/puppeteer jest-environment-puppeteer  @types/jest-environment-puppeteer jest-puppeteer --dev

yarn add @types/jest @types/mocha --dev

// 测试分为单元测试unit test 和 e2e test jest-puppeteer.config.js
"test:unit": "jest --config unit.jest.js",
"test:e2e": "jest --config e2e.jest.js",
"test": "npm run test:unit && npm run test:e2e"

// 配置文件
e2e.jest.js
unit.jest.js

4. 代码风格 eslint + editorconfig + prettier + stylelint 自动格式化

// eslint 插件化的可配置的js语法规则和代码风格
yarn add @typescript-eslint/parser eslint eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks and eslint-plugin-jsx-a11y eslint-config-airbnb --dev
// 配置eslint规则
.eslintrc.js
// 配置脚本命令
"lint": "eslint --ext .js,.jsx,.ts,.tsx components",
"lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx components"

// prettier 代码格式工具
// eslint-config-prettier 关闭和 prettier冲突的规则
// eslint-plugin-prettier 将Prettier当作eslint规则运行
yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev
// 配置规则
.prettierrc.js

// stylelint
yarn add stylelint stylelint-config-css-modules stylelint-config-prettier stylelint-config-rational-order stylelint-config-standard stylelint-declaration-block-no-ignored-properties stylelint-order stylelint-prettier --dev
// 配置规则
.stylelintrc.js


// .vscode/settings.json
"editor.formatOnSave": true, // 保存时自动格式化
"editor.defaultFormatter": "esbenp.prettier-vscode", // 使用 prettier 作为默认格式化工具
"editor.codeActionsOnSave": { "source.fixAll": true },

5. git hook 提交规范

// git钩子可以在特定的动作触发自定义脚本
// husky可以方便的添加git hooks
// lint-staged 用于实现每次提交只检查修改的文件
yarn add husky --dev
npm set-script prepare "husky install"
npm run prepare
// 设置 pre-commit 脚本 git commit之前检查代码是否符合规范
// 可以配置 .lintstagedrc
npx husky add .husky/pre-commit "npx lint-staged"

// commit-msg
// validate-commit-msg  检查提交 message是否符合规范
// commitizen 实现一致的提交消息
// cz-customizable 可以实现自定义的提交
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
// 配置文件 .cz-config.js commitlint.config.js

// pre-push 在push之前执行单元测试 保证所有的提交都经过了单元测试
npx husky add .husky/pre-push "npm run test"
npm publish

2.编译发布

// 使用gulp编译(不打包 dist是通过webpack打包生成的)
// rimraf 是node版本的 rm -rf
// gulp 将开发流程任务自动化
// merge2 合并多个流为同一个
yarn add rimraf gulp gulp-typescript gulp-babel merge2 --dev

"compile": "gulp compile"

// gulp.config.js
// 通过gulp生成es和lib(通过babel转成es5) 是不打包的
gulp.task()

// 发布
npm whoami
npm version patch
npm publish

3. 持续集成 ci

4. 组件开发

qa

1. 使用 gulp 注册任务的必要性

// dist 的文件是webpack打包好的es5代码 可以直接在浏览器中使用
// 强烈不推荐使用构建的文件 这样无法按需加载
// es 都是 gulp打包出来的
// lib gulp打包的

2. ts-loader 和 babel-loader

// 一般不使用 ts-loader 性能不高 使用 babel-loader 处理

3. 如何设计一个组件