1.3 dva 脚手架目录分析

在上一节中，介绍了如何使用 dva-cli 命令行工具来创建一个 dva 脚手架工程。

这一节来就自动创建的脚手架目录结构来分析一下脚手架都为我们做了哪些事情。

目录结构

下面就右边列举的 7 条在逐个分析目录结构的组成。

这里只会介绍某个文件夹或文件是做什么的，具体涉及到技术层面的参见后面章节对每个技术模块的专讲。

希望看完之后再回过头看目录结构的时候能做到“原来如此”的表情。

分析

1.自动创建一个包含 package.json 的项目

package.json 文件

在很久很久以前，dk 要开发一个前端项目，在计算机的某个旮沓地方建立了一个文件夹叫 dk_project，就称为这是一个“项目”了。又过了很久，dk 离开了公司，来了位新同事，在接手 dk 工作的时候发现计算机上面的 dk_project 文件夹，因为没有任何明显的标识，就被当成普通文件夹给 DELETE 掉了。回到现代，随着 npm 的诞生，人们意识到建立一个项目目录不应该这么草率，于是乎规定，如果某个文件夹被创建作为一个项目目录，那么它就应该包含一个 package.json 的文件。package.json 文件里记录项目的描述信息：项目作者、项目描述、项目依赖哪些包、插件配置信息等等数不清的好处。

在 npm 那一讲中将会详细介绍 package.json 文件的组成以及如何去自定义这个文件。

2.自动创建成体系的目录结构

public 文件夹、src 文件夹

一个项目，如果目录结构很混乱，从心理学角度上来说会让你的心情变的 bad，进而容易产生 bug，在查找 bug 的时候再次由于目录结构的混乱而变得暴怒 ..... 循环下去，项目烂尾是小事，不小心因此变得神经质就不好啦。良好的目录结构应该是条理清晰，每个文件夹都有具体的事情要做。这样写代码才能像做一件艺术品一样，身心得到满足与慰藉。

在项目目录中：

• public 文件夹中存放静态资源，比如图片，静态页面 html 等。

• src 文件夹是项目代码存放文件夹，里面又分了几个小目录，每个目录都负责具体的事情，这个需要在实际项目中进行讲解。

3.自动安装项目需要的基础包

node_modules 文件夹（如果你对依赖包的概念不清晰，可以看 npm 章节的介绍）

前面说到 package.json 中会记录项目需要依赖的基础包。

使用 npm install 指令可以安装这些依赖包，安装到项目根目录下的 node_modules 文件夹下。

一个项目中纯代码是很小的，占容量的是 node_modules 目录下的依赖包。普通的项目往往可以达到100-200M，而对应的纯项目代码1-5M。现在 dk 想将最近开发的一个项目分享给同事 tiger，只需要将项目纯代码拷贝给 tiger 即可。因为项目依赖的包都记录下 package.json 文件中，而在命令行中使用 npm install 指令就可以自动下载 package.json 自动记录的依赖包。

4.集成代码检查工具 ESLint

.eslintrc 文件 （如果你对代码检查工具不熟悉，可以看 ESLint 章节的介绍）

代码检查工具制定统一规则，然后项目中所有人都得遵守这一套规则去写代码，这样写出来的代码在客户面前就像是一个人写的一样。**.eslintrc 文件就是记录规则的配置文件**。到这里，你肯定好奇具体规则是什么，这事情 ESLint 工具都帮你制定好了，你只需要去 [ESLint 规则配置](http://eslint.cn/docs/rules/) 里去查看规则即可。如果你还要学习 ESLint 更深层次的知识又嫌弃官网太罗里吧嗦，可以看后面章节 ESLint 的专讲。

5.集成模拟接口工具 Mock

mock 文件夹、.roadhogrc.mock.js 文件

写前端的都知道，最烦恼的事情莫过于没有服务提供数据接口，写出的前端代码没法测试。Mock 就是干这个的，让一个前端程序员可以通过最熟悉不过的 js 文件简单配置模拟服务端提供的接口，可以造假数据，**“搞的就跟真的一样”**。本文没有适用 dva 自带的 Mock 做模拟接口，而是使用更轻量级的 json-server 来做模拟服务接口，不会的可以在后面章节学习.roadhogrc.mock.js 文件：Mock 是个独立的技术，你得把它用到框架里来不是，所以就有了这个文件。

6.集成服务启动打包工具 Roadhog

.roadhogrc 文件

先来说点有趣的事情。dva 的作者 sorrycc 是个守望先锋玩家。dva 这个名字是守望先锋游戏里一个英雄的名字（女性英雄，瞬间秒懂），而 roadhog 同样是守望先锋的另一名英雄，长得五大三粗，在游戏里叫做“路霸”。意思就是 roadhog 为 dva 守架护航。roadhog 是为 dva 服务的，可以认为是 dva 的配置文件。

通过它可以做到以下几件事情（当然远不止这些，其它可看 Roadhog 专讲）

• 与其它插件集成；
• 启动服务：roadhog server；
• 打包项目：roadhog build。

7.集成版本控制工具 Git

.gitingore 文件

这是 Git 专有的文件，用于管理项目版本。具体三言两语道不清说不明，建议直接去看下 Git 的教程之后这个文件就清楚干嘛的啦。