ant-design

初始化

mkdir ant
cd ant
npm init -y

tsc --init // 支持ts https://github.com/react-component/rc-tools/blob/master/lib/getTSCommonConfig.js

// 安装一些依赖
yarn add react react-dom
yarn add @types/react @types/react-dom --dev

// 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
// gulp编译
yarn add rimraf gulp gulp-typescript gulp-babel merge2 --dev

// 文档 也可以使用 dumi
yarn add @storybook/react   @storybook/addon-essentials --dev

// 测试相关的 puppeteer 是安装的比较慢的
// jest-image-snapshot执行图像比较的Jest匹配器,对于视觉回归测试非常有用
// As of Jest 28 "jest-environment-jsdom" is no longer shipped by default, make sure to install it separately.
yarn add jest @types/jest  @wojtekmaj/enzyme-adapter-react-17 puppeteer @types/puppeteer jest-environment-puppeteer  @types/jest-environment-puppeteer jest-puppeteer  jest-image-snapshot @types/jest-image-snapshot jest-canvas-mock jest-environment-jsdom --dev
yarn add enzyme  @types/enzyme  --dev

// 代码风格 eslint prettier styleLint?
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
yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

// 代码提交
yarn add husky --dev
yarn add commitizen cz-customizable @commitlint/cli @commitlint/config-conventional --dev

"prepare": "is-ci || husky && dumi setup",  husky install 废弃了 husky
npm run prepare
npx husky add .husky/pre-commit "npx lint-staged" // 安装脚本 add command is deprecated
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
npx husky add .husky/pre-push "npm run test" // 发布前要完成test测试的

技术栈

// 框架 react
// 测试 jest+enzyme
// 检查 eslint
// 打包 webpack+gulp
// 文档 bisheng dumi storybook
// 钩子 husky

构建

// 命令

"build": "npm run compile && NODE_OPTIONS='--max-old-space-size=4096' npm run dist",

"clean": "antd-tools run clean && rm -rf es lib coverage dist report.html",

"compile": "npm run clean && antd-tools run compile",

"dist": "antd-tools run dist",

// files: 发布到npm上的文件和文件夹
// dist(webpack打包的文件)
// es  es6的文件 不打包的
// lib es5的文件

tools

// "rc-tools": "./bin/rc-tools.js",

// compiler执行 gulpTask
gulp.task('compile');
gulp.task('dist'); // webpack

构建

// getWebpackConfig.js
// webpack.config.js

编译

// 使用gulp来进行编译 不经过webpack打包的 生成es和lib的目录

文档

"predeploy": "antd-tools run clean && npm run site && cp CNAME _site && npm run site:test",
// antd中使用的是 dumi
"site": "dumi build && cp .surgeignore _site",
// https://www.npmjs.com/package/gh-pages yarn add gh-pages -D
"deploy": "gh-pages -d _site -b gh-pages -f",

// 内部用的也是webpack
// https://storybook.js.org/
npx sb init
// 配置文件 .storybook\main.js

// https://storybook.js.org/docs/writing-docs/mdx
// Storybook 8 中删除了直接在 MDX 中编写故事的功能，我们不再支持它

测试

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


npx jest --init
// 配置文件
e2e.jest.js // e2e测试 快照
unit.jest.js // 单元测试

代码风格

// biome https://www.npmjs.com/package/@biomejs/biome
// package.json
"lint": "eslint --ext .js,.jsx,.ts,.tsx components",
"lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx components"

// 配置文件
.vscode/settings.json
.prettierrc.js
.stylelintrc.js
.eslintrc.js

代码提交

// 配置文件
.cz-config.js
commitlint.config.js

编译发布

// 发布
nrm use npm
npm login
npm whoami
npm version patch //  Git working directory not clean.
npm publish // 426 Upgrade Required - PUT http://registry.npmjs.org/@liuxsh%2fant