Dva源码解读系列之dva项目入口文件

当我们在终端中敲入 npm run start ，并按下 enter 键执行命令的时候，到底发生了什么呢?

答案当然是要去 package.json 里去寻找。

  "scripts": {
    "start": "roadhog server",
    "build": "roadhog build",
    "lint": "eslint --ext .js src test",
    "precommit": "npm run lint"
  },

当执行 npm run start 命令的时候，实际上执行的是当前项目根目录的 package.json 里面的 scripts.start 字段。在 dva 项目里，执行 npm run start 命令，实际上执行的是 roadhog server 命令。那 roadhog 又是个啥？

loadhog 是个啥？

以下是官方对loadhog的介绍：

简单来说，roadhog 是可配置的 react-create-app。

roadhog 是一个 cli 工具，提供 server 、 build 和 test 三个命令，分别用于本地调试和构建。并且提供了特别易用的 mock 功能，命令行体验和 create-react-app 一致，配置略有不同。

loadhog 是个和 webpack 相似的库，其作用也是自动打包和热更替。那么执行 roadhog server 命令的时候，又发生了什么呢？

在webpack中，我们通常会在 webpack.config.js 中配置 entry 字段作为打包的入口，那在 roadhog 中是否也是一样呢？

roadhog 默认配置：

{
  "entry": "src/index.js",
  "disableCSSModules": false,
  "publicPath": "/",
  "outputPath": "./dist",
  "extraBabelPlugins": [],
  "extraPostCSSPlugins": [],
  "autoprefixer": null,
  "proxy": null,
  "externals": null,
  "library": null,
  "libraryTarget": "var",
  "multipage": false,
  "define": null,
  "env": null,
  "theme": null,
}

我们查看 roadhog 的默认配置，果然，roadhog 也是通过entry字段来配置项目启动入口的，我们来看看入口文件 src/index.js 做了什么事情？

入口文件

import dva from 'dva';
import './index.css';

// 1. Initialize
const app = dva();

// 2. Plugins
// app.use({});

// 3. Model
// app.model(require('./models/example').default);

// 4. Router
app.router(require('./router').default);

// 5. Start
app.start('#root');

在 src/index.js 里，dva 一共做了以下几件事：

1、从 'dva' 中引入 dva：import dva from 'dva';

2、引入全局样式文件：import './index.css';

3、通过函数生成一个 app 对象：const app = dva();

4、加载插件：app.use({});

5、注入 model：app.model(require('./models/example').default);

6、添加路由：app.router(require('./router').default);

7、启动项目：app.start('#root');

在这 7 步当中，dva 完成了使用 React 解决 view 层、redux 管理 model、saga 解决异步 的主要功能。

那么dva又是如何生成一个 app 对象的呢？欲知如何，请看下回分晓。

剧透：dva 是个函数，返回了个 app 对象