ant design pro模板_Ant Design Pro 学习笔记

学习笔记

摘要介绍

Ant Design Pro 是一个基于Ant Design搭建起来的模板项目。它提供了两个主要布局：BasicLayout、UserLayout，在布局基础上制作了20多个基础页面，详情见模板介绍段落。

Ant Design Pro 主体代码使用ES2015+语法规则，因此在阅读源码时遇到不理解的语法，可前往相关主页进行查询。在学习笔记中，除非遇到关键的语法点，否则不对语法进行额外说明。

在接下来，将按照以下几个方面介绍项目的相关代码。

......

目录结构

├── mock # 本地模拟数据

├── node_modules # 依赖库

├── public

│ ├── favicon.ico # Favicon

│ └── index.html # HTML 入口模板

├── src

│ ├── common # 应用公用配置，如导航信息

│ ├── components # 业务通用组件

│ ├── e2e # 集成测试用例

│ ├── layouts # 通用布局

│ ├── models # dva model

│ ├── routes # 业务页面入口和常用模板

│ ├── services # 后台接口服务

│ ├── utils # 工具库

│ ├── g2.js # 可视化图形配置

│ ├── polyfill.js # 兼容性垫片

│ ├── theme.js # 主题配置

│ ├── index.js # 应用入口

│ ├── index.less # 全局样式

│ └── router.js # 路由入口

├── tests # 测试工具

├── .editorconfig # 编辑器配置

├── .eslintrc # js代码检测工具

├── .ga # 未知

├── .gitignore # git版本配置

├── .roadhogrc # roadhog配置

├── .roadhogrc.mock.js # roadhog的模拟配置

├── .stylelintrc # css代码审查配置

├── .travis.yml # travis持续构建工具配置

├── package.json # web前端项目配置文件

├── README.md

└──

项目中的几项配置文件

Q:为什么要用编辑器配置？

A:当多人共同开发一个项目的时候，往往会出现大家用不同编辑器的情况。就前端开发者来说，有人喜欢 Sublime，有人喜欢 Webstorm , 也有人喜欢 Atom，还有人喜欢 Vim，HBuilder 等等。各种不同编程语言的开发者喜欢各种不同的编辑器。问题来了，如何让使用不同编辑器的开发者在共同开发一个项目时“无痛”地遵循编码规范(编码风格)？

Q：怎么用编辑器配置？

A：在项目根创建一个名为 .editorconfig 的文件。安装与编辑器对应的 EditorConfig 插件。详情参考编辑器配置

Q：代码检查工具是什么？

A：js的代码检查工具是ESLint，css的代码检查工具是StyleLint，相应的配置项保存在.eslintrc和.stylelintrc文件中。一般来说，都不需要进行修订，深入学习可参考js代码检测工具、css代码审查配置

Q：git是什么？

A：git是版本控制工具，类似的工具还有svn。有关.gitignore的配置参考git版本配置

Q：什么是持续集成系统？

A：对个人而言，就是让你的代码在提交到远程——这里是GitHub——后，立即自动编译，并且在失败后可以自动给你发邮件的东西。当然，除了编译，还能做自动化测试、自动部署等。对团队或企业而言，这意味着更多的东西，是敏捷开发的一种践行。travis是一种持续集成工具，企业中还有用jenkins的。有关travis的更多介绍见travis持续构建工具配置

Q：什么是roadhog？

A：这是一个 cli 工具，提供 server、 build 和 test 三个命令，分别用于本地调试和构建。更多介绍见roadhog配置

Q：web前端项目的配置是package？

A：每个web前端项目的根目录下面，一般都有一个 package.json 文件，定义了这个项目所需要的各种模块，以及项目的配置信息(比如名称、版本、许可证等元数据)。更多介绍见web前端项目配置文件

Q：最关键，初学者应着重关心哪些？

A：初学者应将精力放在package.json、roadhog这两者上，其他的都可以忽略掉。

package.json摘要介绍

npm install命令根据这个package.json配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。package.json文件就是一个JSON对象，该对象的每一个成员就是当前项目的一项设置。

scripts指定了运行脚本命令的npm命令行缩写，比如start指定了运行npm run start时，所要执行的命令。

进行前端开发时可能经常用到的几个命令是：npm run start(进行开发调试，缩写成npm start)、npm run build(进行构建打包)。当然也可以尝试package.json中给出的其他命令，如：npm run analyze、npm run test等，甚至也可以自己在package.json中添加需要的命令。

dependencies字段指定了项目运行所依赖的模块，devDependencies指定项目开发所需要的模块。它们都指向一个对象。该对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围。更多信息参见web前端项目配置文件

babel配置项，其实是有关babel的配置内容，写在package.json中实际上是一种省略，也可以写在.babelrc文件中。

lint-staged是与代码检查有关的配置项，jest是与单元测试有关的配置项。这两项的配置可以参考jest、lint。这两项与写业务逻辑代码没有直接关联。

roadhog摘要介绍

roadhog 是一个 cli 工具，提供 server、 build 和 test 三个命令，分别用于本地调试和构建，并且提供了特别易用的 mock 功能。命令行体验和 create-react-app 一致，配置略有不同，比如默认开启 css modules，然后还提供了 JSON 格式的配置方式。

重点介绍roadhog有关的几个配置项，主要是在ant design pro的代码中用到了这些配置项。

entry

指定 webpack 入口文件，支持 glob 格式。

如果你的项目是多页类型，会希望把 src/pages 的文件作为入口。可以这样配：

"entry": "src/pages/\*.js"

env

针对特定的环境进行配置。server 的环境变量是 development，build 的环境变量是 production。

比如：

"extraBabelPlugins": ["transform-runtime"],

"env": {

"development": {

"extraBabelPlugins": ["dva-hmr"]

}

}

这样，开发环境下的 extraBabelPlugins 是 ["transform-runtime", "dva-hmr"]，而生产环境下是 ["transform-runtime"]。

"env": {

"development": {

"extraBabelPlugins": [

"dva-hmr",

"transform-runtime",

"transform-decorators-legacy",

"transform-class-properties",

["import", { "libraryName": "antd", "style": true }]

]

},

"production": {

"extraBabelPlugins": [

"transform-runtime",

"transform-decorators-legacy",

"transform-class-properties",

["import", { "libraryName": "antd", "style": tru