{
"name": "ant-design-pro",
"version": "1.0.0",
"private": true,
"description": "An out-of-box UI solution for enterprise applications",
"scripts": {
"analyze": "cross-env ANALYZE=1 umi build", // npm run analyze 指令分析打包文件的大小
"build": "umi build",
"deploy": "npm run site && npm run gh-pages",
"fetch:blocks": "pro fetch-blocks && npm run prettier",
"format-imports": "cross-env import-sort --write '**/*.{js,jsx,ts,tsx}'",
"gh-pages": "cp CNAME ./dist/ && gh-pages -d dist", // gh-pages分支发布自己的静态项目
"i18n-remove": "pro i18n-remove --locale=zh-CN --write", // 国际化 设置默认语言
"lint": "npm run lint:js && npm run lint:style && npm run lint:prettier", // ESlint 配套工具 ：prettier，husky,lint-staged
"lint-staged": "lint-staged", // 取得所有被提交的文件依次执行写好的任务
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
"lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
"lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
"lint:prettier": "check-prettier lint",
"lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
"prettier": "prettier -c --write \"**/*\"",
"start": "umi dev",
"start:no-mock": "cross-env MOCK=none umi dev",
"start:no-ui": "cross-env UMI_UI=none umi dev",
"test": "umi test",
"test:all": "node ./tests/run-tests.js",
"test:component": "umi test ./src/components",
"ui": "umi ui"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint-staged"
}
},
"lint-staged": {
"**/*.less": "stylelint --syntax less",
"**/*.{js,jsx,tsx,ts,less,md,json}": [
"prettier --write",
"git add"
],
"**/*.{js,jsx}": "npm run lint-staged:js",
"**/*.{js,ts,tsx}": "npm run lint-staged:js"
},
"browserslist": [ // 这个配置能够分享目标浏览器和nodejs版本在不同的前端工具
"> 1%", // 全球超过1%人使用的浏览器
"last 2 versions", // 所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
"not ie <= 10"
],
"dependencies": {
"@ant-design/colors": "^3.1.0",
"@ant-design/pro-layout": "^4.5.16",
"@antv/data-set": "^0.10.2",
"@types/lodash.debounce": "^4.0.6", // 防抖 结束时间点会随点击改变（可以合并ajax请求，频繁的键盘事件）
"@types/lodash.isequal": "^4.5.5",
"@types/react-router": "^5.0.2",
"antd": "^3.23.6",
"bizcharts": "^3.5.3-beta.0", // ant-design自带的 chart插件 占用内存比echart小
"bizcharts-plugin-slider": "^2.1.1-beta.1",
"classnames": "^2.2.6",
"dva": "^2.4.1",
"gg-editor": "^2.0.2",
"lodash": "^4.17.11",
"lodash-decorators": "^6.0.0", // 装饰器 (Decorators) 让你可以在设计时对类和类的属性进行“注解”和修改。
"lodash.debounce": "^4.0.8",
"lodash.isequal": "^4.5.0",
"mockjs": "^1.0.1-beta3",
"moment": "^2.24.0",
"numeral": "^2.0.6", // 数字格式化
"nzh": "^1.0.3", // 中文数字 阿拉伯数字转化
"omit.js": "^1.0.2", // 返回一个没有列入排除key属性的对象 用es6的{x,xx,...rest}也可以
"path-to-regexp": "^3.1.0", // url 字符串的正则表达式
"prop-types": "^15.5.10", // 检测props数据类型
"qs": "^6.9.0",
"react": "^16.8.6",
"react-copy-to-clipboard": "^5.0.1",
"react-dom": "^16.8.6",
"react-fittext": "^1.0.0",
"react-helmet": "^5.2.1",
"react-router": "^4.3.1",
"redux": "^4.0.1",
"slash2": "^2.0.0",
"umi": "^2.9.6",
"umi-plugin-pro-block": "^1.3.4",
"umi-plugin-react": "^1.10.1",
"umi-request": "^1.2.7",
"webpack-theme-color-replacer": "^1.2.15"
},
"devDependencies": {
"@ant-design/pro-cli": "^1.0.13",
"@types/classnames": "^2.2.7",
"@types/express": "^4.17.0", //web开发框架
"@types/history": "^4.7.2",
"@types/jest": "^24.0.13", //测试框架
"@types/lodash": "^4.14.144", //js工具库
"@types/qs": "^6.5.3",
"@types/react": "^16.8.19",
"@types/react-dom": "^16.8.4",
"@types/react-helmet": "^5.0.13",
"@umijs/fabric": "^1.2.0",
"chalk": "^3.0.0", // 颜色插件
"check-prettier": "^1.0.3",
"cross-env": "^6.0.0", // 运行跨平台设置和使用环境变量的脚本
"cross-port-killer": "^1.1.1", // 终止在Windows，Linux和Mac上给定TCP端口上运行的进程。
"enzyme": "^3.9.0", // 自动化测试 react前端自动化测试： jest + enzyme
"eslint": "5.16.0",
"express": "^4.17.1",
"gh-pages": "^2.0.1",
"husky": "^3.0.0", // husky为git commit增加钩子 用 husky 和 prettier 保证团队代码格式一致性
"import-sort-cli": "^6.0.0", // 对导入进行排序
"import-sort-parser-babylon": "^6.0.0",
"import-sort-parser-typescript": "^6.0.0",
"import-sort-style-module": "^6.0.0",
"jest-puppeteer": "^4.2.0", // react自动化测试
"lint-staged": "^9.0.0",
"mockjs": "^1.0.1-beta3", // 生成随机数据,拦截 Ajax 请求
"node-fetch": "^2.6.0",
"prettier": "^1.17.1",
"pro-download": "1.0.1",
"stylelint": "^10.1.0",
"umi-plugin-ga": "^1.1.3", // Umi插件支持Google Analytics
"umi-plugin-pro": "^1.0.2",
"umi-types": "^0.5.0"
},
"optionalDependencies": {
"puppeteer": "^1.17.0"
},
"engines": {
"node": ">=10.0.0"
},
"checkFiles": [
"src/**/*.js*",
"src/**/*.ts*",
"src/**/*.less",
"config/**/*.js*",
"scripts/**/*.js"
]
}
代码格式
husky,prettier
ESlint 配套工具 ：prettier，husky,lint-staged
自动化测试
jest
流行的单元测试包括jest、mocha、jasmine、……
jest的特点是零配置、即时反馈，它所有测试用例默认是并行执行的，速度快，它也可以配置成串行，在调试时比较有用，jest每个测试用例文件都是一个沙箱，在单个测试文件内部定义或修改全局变量，不会影响其它测试文件，jest由Facebook团队维护，对React友好，适合大型项目
enzyme
enzyme是Airbnb开源的react测试类库，提供了一套简洁强大的API，并通过jquery风格的方式进行dom处理，开发体验十分友好. 它提供三种测试方法
shallow:
shallow 返回组件的浅渲染，对官方shallow rendering 进行封装。浅渲染 作用就是：它仅仅会渲染至虚拟dom，不会返回真实的dom节点，这个对测试性能有极大的提升。shallow只渲染当前组件，只能能对当前组件做断言
mount :
mount 方法用于将React组件加载为真实DOM节点。mount会渲染当前组件以及所有子组件
render:
render 采用的是第三方库Cheerio的渲染，渲染结果是普通的html结构，对于snapshot使用render比较合适。
多数情况下，shallow 方法就能满足我们的需求了。
puppeteer
流行的集成测试库包括puppeteer、casperJS、PhantomJS、……
puppeteer是个神器，它并不仅仅可以做自动化集成测试，它本身是个node库，自带chromuium浏览器（所以npm安装它比较慢），
它提供了一些高级API通过DevTools协议控制headless chrome或chromuium，
它也可以配置为使用有界面版的chrome，既然是浏览器，chrome能做到的它基本都能做到，chrome做不到的，它也能做到，
用puppeteer做集成测试，测试用例是真正在真实的浏览器上执行的，
下面几点都是它所擅长的
1、生成页面屏幕截图或pdf
2、自动提交表单，做UI测试、模拟键盘输入、鼠标操作等
3、创建一个最新的自动化测试环境，用最新的JavaScript和浏览器功能，直接在最新的chrome中做测试
4、捕获你网站的时间线跟踪，以帮助诊断性能问题