What happens when we type NPM run start in the terminal and press Enter to execute the command?

The answer, of course, is to look in package.json.

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

When NPM run start is executed, the scripts. Start field in package.json, the root of the current project, is actually executed. In the DVA project, executing the NPM run start command actually executes the Roadhog Server command. What is Roadhog?

What is loadhog?

Here is the official description of Loadhog:

In short, Roadhog is configurable react-create-app.

Roadhog is a CLI tool that provides server, build, and test commands for local debugging and build, respectively. It also provides an easy-to-use mock function, and has the same command-line experience as create-React-app, with slightly different configurations.

Loadhog is a library similar to WebPack that also acts as auto-packaging and heat replacement. So what happens when the Roadhog Server command is executed?

In Webpack, we typically configure the entry field in webpack.config.js as the entry point for packaging, but is the same in Roadhog?

Roadhog default configuration:

{
  "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,
}
Copy the code

We look at roadhog’s default configuration. Sure enough, Roadhog also uses the entry field to configure the project launch entry. What does the entry file SRC /index.js do?

Entrance to the file

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');
Copy the code

In SRC /index.js, dVA does the following:

Import dVA from ‘dva’;

Import ‘./index.css’;

Const app = dva(); const app = dva();

App.use ({});

Model (require(‘./models/example’).default);

Router (require(‘./router’).default);

7, start project: app.start(‘#root’);

In these 7 steps, DVA completes the main functions of React for view layer, Redux for model management and Saga for asynchronism.

So how does DVA generate an APP object? If you want to know how, please see the next time.

Dva is a function that returns an app object