一、简介
Ant-Design是一个流行的模块化解决方案，一套企业级的 UI 设计语言和 React 实现。每一个npm项目，我们都可以从package.json和官网一探究竟，大致了解它能做什么。Ant-Design都依赖什么包？
二、package.json
{
"name": "antd",
"version": "3.19.8",
"title": "Ant Design",
"description": "An enterprise-class UI design language and React components implementation",
"homepage": "http://ant.design/",
"keywords": [
"ant",
"design",
"react",
"react-component",
"component",
"components",
"ui",
"framework",
"frontend"
],
"contributors": [
"ant"
],
"publishConfig": {
"registry": "https://registry.npmjs.org/"
},
"repository": {
"type": "git",
"url": "https://github.com/ant-design/ant-design"
},
"bugs": {
"url": "https://github.com/ant-design/ant-design/issues"
},
"main": "lib/index.js",
"module": "es/index.js",
"files": [
"dist",
"lib",
"es"
],
"typings": "lib/index.d.ts",
"license": "MIT",
"peerDependencies": {
// 依赖react版本>=16.0.0，没有react无从谈起
"react": ">=16.0.0",
// react-dom提供了一个在APP顶层的DOM方法，使其有DOM能力
"react-dom": ">=16.0.0"
},
"dependencies": {
// 提供react上下文API的能力
"@ant-design/create-react-context": "^0.2.4",
// 提供ant-design设计的一套react图标
"@ant-design/icons": "~2.0.0",
"@ant-design/icons-react": "~2.0.1",
// 滑动输入条组件
"@types/react-slick": "^0.23.4",
// 数组过滤工具
"array-tree-filter": "^2.1.0",
// babel运行时的一个helper（babel是一个JS的编译器，把用新规范编写的代码转成兼容性更好的旧规范代码）
"babel-runtime": "6.x",
// 根据条件连接类名的小工具
"classnames": "~2.2.6",
// 提供浏览器内容 到 剪贴板的能力
"copy-to-clipboard": "^3.2.0",
// css动画
"css-animation": "^1.5.0",
// dom父层节点查找工具
"dom-closest": "^0.2.0",
// 用JS写的媒体查询工具
"enquire.js": "^2.1.6",
// JS工具类
"lodash": "^4.17.11",
// JS时间处理
"moment": "^2.24.0",
// 对象处理工具(个人认为，用上面的lodash已经足够了)
"omit.js": "^1.0.2",
// 运行时类型检查
"prop-types": "^15.7.2",
//兼容处理requestAnimationFrame的polyfill方案
"raf": "^3.4.1",
// react动画、日历等组件
"rc-animate": "^2.8.3",
"rc-calendar": "~9.15.0",
"rc-cascader": "~0.17.4",
"rc-checkbox": "~2.1.6",
"rc-collapse": "~1.11.3",
"rc-dialog": "~7.4.0",
"rc-drawer": "~1.10.1",
"rc-dropdown": "~2.4.1",
"rc-editor-mention": "^1.1.13",
"rc-form": "^2.4.5",
"rc-input-number": "~4.4.5",
"rc-mentions": "~0.3.1",
"rc-menu": "~7.4.23",
"rc-notification": "~3.3.1",
"rc-pagination": "~1.20.1",
"rc-progress": "~2.3.0",
"rc-rate": "~2.5.0",
"rc-select": "~9.1.4",
"rc-slider": "~8.6.11",
"rc-steps": "~3.4.1",
"rc-switch": "~1.9.0",
"rc-table": "~6.6.0",
"rc-tabs": "~9.6.4",
"rc-time-picker": "~3.6.6",
"rc-tooltip": "~3.7.3",
"rc-tree": "~2.1.0",
"rc-tree-select": "~2.9.1",
"rc-trigger": "^2.6.2",
"rc-upload": "~2.6.7",
"rc-util": "^4.6.0",
// react懒加载(进入视口后再render)
"react-lazy-load": "^3.0.13",
/*
由于react 17后，会废弃掉componentWillMount,
componentWillReceiveProps, and componentWillUpdate等生命周期，
为了向后兼容的polyfill解决方案
*/
"react-lifecycles-compat": "^3.0.4",
// 滑动输入条组件，其实上面已经有一个了
"react-slick": "~0.24.0",
// resize Observer API的polyfill方案
"resize-observer-polyfill": "^1.5.1",
// 对象浅比较 (个人认为可以用lodash 的 isEqualWith替代，无需重复引用)
"shallowequal": "^1.1.0",
// 警告提示
"warning": "~4.0.3"
},
"devDependencies": {
/*
ant-design色板调色器，可以看看他们的文章
https://zhuanlan.zhihu.com/p/32422584
*/
"@ant-design/colors": "^3.1.0",
// 用来上报webpack的build状态
"@packtracker/webpack-plugin": "^2.0.1",
// sentry错误上报
"@sentry/browser": "^5.4.0",
// 同上面提到
"@types/classnames": "^2.2.8",
"@types/prop-types": "^15.7.1",
"@types/react": "~16.8.19",
"@types/react-dom": "^16.8.4",
"@types/react-intl": "^2.3.17",
"@types/warning": "^3.0.0",
// 提供webpack离线能力（使用ServiceWorker和AppCache）
"@yesmeck/offline-plugin": "^5.0.5",
// 主题生成器(根据主题生成color.less)
"antd-theme-generator": "^1.1.6",
// ant-design的一些通用工具函数
"antd-tools": "^7.6.0",
/* ESlint默认只支持标准ECMAScript语法，
babel-eslint加上了太老以及太新的语法，
让这些语法也可以正常受到eslint的约束*/
"babel-eslint": "^10.0.1",
// React组件使用displayname用来debug显示，此依赖可以帮你自动生成displayname
"babel-plugin-add-react-displayname": "^0.0.5",
/* 把Markdown和一些静态文件转换成SPA网页(React)，
此依赖名字来源于毕昇(活字印刷术发明者，哈哈)
*/
"bisheng": "^1.2.4",
"bisheng-plugin-antd": "^1.0.2",
"bisheng-plugin-description": "^0.1.4",
"bisheng-plugin-react": "^1.0.0",
"bisheng-plugin-toc": "^0.4.4",
// 在终端显示彩色输出(应该是开发人员用来更好地debug的)
"chalk": "^2.4.2",
// Node.js的一个命令行工具
"commander": "^2.20.0",
// 跨平台环境变量设置工具(如cross-env NODE_ENV=production)
"cross-env": "^5.2.0",
// 用来把旧版本浏览器(如IE9)不支持的css单独抽成css文件，单独处理
"css-split-webpack-plugin": "^0.2.6",
// 用来在部署/发布前，检查文件结构
"dekko": "^0.2.1",
// 方便地给文档加搜索功能
"docsearch.js": "^2.6.3",
// 上面提到过，用JS写的媒体查询
"enquire-js": "^0.2.1",
// 基于React的JS测试工具
"enzyme": "^3.10.0",
// 针对react版本<16的adapter
"enzyme-adapter-react-16": "^1.14.0",
// 把enzyme的wrapper转成Jest的snapshot，这样写snapshot更简单
"enzyme-to-json": "^3.3.5",
// 验证并且提示语法问题的工具，下面是一些其他人用的规则集合
"eslint": "^6.0.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^6.0.0",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-import": "^2.17.3",
"eslint-plugin-jest": "^22.6.4",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-markdown": "^1.0.0",
"eslint-plugin-react": "^7.14.2",
"eslint-tinker": "^0.5.0",
// fetch API是不支持jsonp的，利用这个库可以拓展这个能力
"fetch-jsonp": "^1.1.3",
// 用来在node中，匹配文件路径
"glob": "^7.1.4",
// 不改变原有对象，创建一个不可变的对象副本
"immutability-helper": "^3.0.0",
// w3c的，查找dom位置
"intersection-observer": "^0.7.0",
// facebook出的一套测试框架
"jest": "^24.8.0",
// 纯JS的dom和html的实现，给Node.js使用
"jsdom": "^15.1.1",
// 将基于XML的标记作为JSON传输
"jsonml.js": "^0.1.0",
// 提交代码前lint的一个工具
"lint-staged": "^8.1.7",
// 记录log，重现bug的工具
"logrocket": "^1.0.0",
"logrocket-react": "^3.0.0",
// JS压缩算法
"lz-string": "^1.4.4",
// 模拟当前日期
"mockdate": "^2.0.2",
// 上面已提到
"node-fetch": "^2.6.0",
// git提交前做些检查
"pre-commit": "^1.2.2",
// react的virtual dom 组件的小型现代API实现
"preact": "^8.4.2",
// 和preact搭配，解决兼容问题
"preact-compat": "^3.18.5",
// 代码格式化工具
"prettier": "^1.17.1",
// string 转 object
"querystring": "^0.2.0",
// 队列形式陆续处理组件动画
"rc-queue-anim": "^1.6.12",
// 滚动动画
"rc-scroll-anim": "^2.5.8",
// 单个componet的动画
"rc-tween-one": "^2.4.1",
// react核心
"react": "^16.5.2",
// 颜色选择器
"react-color": "^2.17.3",
// 上面提到过
"react-copy-to-clipboard": "^5.0.1",
// 拉动react组件
"react-dnd": "^8.0.0",
"react-dnd-html5-backend": "^8.0.0",
// 声明式地修改doucment.title
"react-document-title": "^2.0.3",
// 同上面提到
"react-dom": "^16.5.2",
// 一些组件
"react-github-button": "^0.1.11",
"react-highlight-words": "^0.16.0",
"react-infinite-scroller": "^1.2.4",
"react-intl": "^2.9.0",
"react-resizable": "^1.8.0",
"react-router": "^3.2.3",
"react-router-dom": "^5.0.1",
"react-sticky": "^6.0.3",
// 测试使用，负责将组件输出成 JSON 对象以方便我们遍历、断言或是进行 snapshot 测试
"react-test-renderer": "^16.8.6",
// 高效的大列表渲染
"react-virtualized": "~9.21.1",
// 浏览器异步请求工具
"reqwest": "^2.0.5",
// rm -rf 工具
"rimraf": "^2.6.3",
// 更好地处理监听滚动事件
"scrollama": "^2.0.0",
// 轻量级的git工具
"simple-git": "^1.113.0",
// 一些lint配置
"stylelint": "^10.0.1",
"stylelint-config-prettier": "^5.2.0",
"stylelint-config-rational-order": "^0.1.2",
"stylelint-config-standard": "^18.3.0",
"stylelint-declaration-block-no-ignored-properties": "^2.1.0",
"stylelint-order": "^3.0.0",
// 约束类型的JS超类语言
"typescript": "~3.5.1",
/* mock XMLHttpRequest用的库，可以用来模拟超时请求等等，
兼容Axios, jQuery, Superagent
*/
"xhr-mock": "^2.4.1",
// 类似xhr-mock，但是是给Node.js环境用的
"xhr2": "^0.2.0"
},
"scripts": {
"test": "jest --config .jest.js --no-cache",
"test-node": "jest --config .jest.node.js --no-cache",
"test-all": "./scripts/test-all.sh",
"check-commit": "node ./scripts/check-commit.js",
"lint": "npm run lint:ts && npm run lint:es && npm run lint:demo && npm run lint:style && npm run lint:deps",
"lint:deps": "antd-tools run deps-lint",
"lint:ts": "npm run tsc && antd-tools run ts-lint",
"lint:es": "eslint tests site scripts components ./.*.js ./webpack.config.js --ext '.js,.jsx'",
"lint:md": "remark components/",
"lint:demo": "cross-env RUN_ENV=DEMO eslint components/*/demo/*.md --ext '.md'",
"lint:style": "stylelint '{site,components}/**/*.less' --syntax less",
"lint-fix:ts": "npm run tsc && antd-tools run ts-lint-fix",
"lint-fix": "npm run lint-fix:code && npm run lint-fix:demo && npm run lint-fix:style",
"lint-fix:code": "eslint --fix tests site scripts components ./.*.js ./webpack.config.js --ext '.js,.jsx'",
"lint-fix:demo": "eslint-tinker ./components/*/demo/*.md",
"lint-fix:style": "stylelint --fix '{site,components}/**/*.less' --syntax less",
"sort-api": "antd-tools run sort-api-table",
"api-collection": "antd-tools run api-collection",
"dist": "antd-tools run dist",
"compile": "antd-tools run compile",
"tsc": "tsc",
"start": "rimraf _site && mkdir _site && node ./scripts/generateColorLess.js && cross-env NODE_ENV=development bisheng start -c ./site/bisheng.config.js",
"start:preact": "node ./scripts/generateColorLess.js && cross-env NODE_ENV=development REACT_ENV=preact bisheng start -c ./site/bisheng.config.js",
"site": "cross-env NODE_ENV=production bisheng build --ssr -c ./site/bisheng.config.js && node ./scripts/generateColorLess.js",
"predeploy": "antd-tools run clean && npm run site && cp netlify.toml CNAME _site && cp -r .circleci _site",
"deploy": "bisheng gh-pages --push-only",
"deploy:china-mirror": "git checkout gh-pages && git pull origin gh-pages && git push [email protected]:ant-design/ant-design.git gh-pages",
"pub": "antd-tools run pub",
"prepublish": "antd-tools run guard",
"pre-publish": "npm run check-commit && npm run test-all",
"authors": "git log --format='%aN <%aE>' | sort -u | grep -v 'users.noreply.github.com' | grep -v 'gitter.im' | grep -v '.local>' | grep -v 'alibaba-inc.com' | grep -v 'alipay.com' | grep -v 'taobao.com' > AUTHORS.txt",
"lint-staged": "lint-staged",
"lint-staged:ts": "tsc && node node_modules/tslint/bin/tslint",
"lint-staged:es": "eslint ./.*.js ./webpack.config.js",
"lint-staged:demo": "cross-env RUN_ENV=DEMO eslint --ext '.md'",
"prettier": "prettier -c --write '**/*'"
},
"pre-commit": [
"lint-staged"
],
"lint-staged": {
"**/*.{js,jsx,tsx,ts,less,md,json}": [
"prettier --write",
"git add"
]
},
"sideEffects": [
"dist/*",
"es/**/style/*",
"lib/**/style/*",
"*.less"
],
"browserslist": [
"last 2 version",
"Firefox ESR",
"> 1%",
"ie >= 9"
]
}
三、官网
Ant-Design
(完)