Umi based development scheme

Umi is an enterprise application framework based on React from Alibaba. This paper will introduce Umi based development scheme from three aspects:

What is umi?
How do I use umi?
How is UMI realized?

What is umi

Umi is a pluggable enterprise React application framework. It supports contract routing and various advanced routing functions to expand functions. It has a complete plug-in system that covers every life cycle from source code to product construction and supports various function extensions and service requirements.

It has the following features:

Out of the box, built-in React, React-Router, etc
Approximate routes and configurable routes are supported
Perfect plug-in system
Support the typescript
Support DVA data scheme

The life cycle of a UMI project is as follows, which includes the whole process from source code to online. Umi will first load the user’s configuration and plug-in, then generate a routing configuration based on configuration or directory, and then connect JS/CSS source code and HTML completely based on the routing configuration. User-configured parameters and plug-ins affect every step of the process.

use

Create a UMI project

There are two ways to create a UMI project, manual creation and scaffolding creation.

Manually create

Step 1: Create related folders:

mkdir umi_app && cd umi_app
npm init
mkdir pages
Copy the code

Step 2: Add NPM script

"scripts": {
    "start": "umi dev"."build": "Umi" build,}Copy the code

Step 3: Increase dependency:

"devDependencies": {
    "umi": "^ 2.6.3." "
}
Copy the code

Fourth, in the Pages directory, add a new module. Finally, use NPM run start to run the project.

Scaffolding creation

Umi provides the scaffolding tool create-UMI to speed up the creation of UMI projects.

mkdir umi_app && cd umi_app
create-umi
npm i
Copy the code

Finally, use NPM run start to run the project and access it at localhost:8000.

The business development

The created project directory structure is as follows:

.├ ─ dist/ // Default Build ├─ mock/ // Base on Express ├─ config/ ├─ config.js with.umirc.js, └─ └─ SRC // / └─ ├─ layouts/index.js // ├─ pages/ // / setup // ├─. .gitignore ├─.umi-production/ // build temporary directory ├─ document.ejs // HTML Template ├─ 404.js // 404 page ├─ page1. Js // umitestWill match all. Test. Js and the e2e. The file at the end of js └ ─ ─ page2. Js / / page 2, arbitrary naming ├ ─ ─ global. The CSS / / global style file of the agreement, automatic introduction, You can also use global.less ├─ global.js // Here you can add Polyfill ├─ app.js // Runtime Config file ├─.umirc.js // umi config, same as config/config.js, ├─ ├─ ├─ ├─ package.jsonCopy the code

The.umi directory is a temporary directory generated by Umi Dev that contains umi.js and router.js by default. Umi-production is a temporary directory generated in UMI build.

Run the umi g page users command to generate the Users page. You can access the users page at localhost:8000/users.

Meanwhile, dVA can also be used as a status management tool to develop with UMI. You can refer to UMI + DVA to complete CURD applications for user management.

The use of plug-in

With UMI’s plug-in mechanism, you gain the ability to extend your project’s compile-time and run-time capabilities. The functions supported by plug-ins will also become more powerful. For the needs of functions, we can use modified code package configuration, modified startup code, agreed directory structure, modified HTML and other richer interfaces. A plug-in can be an NPM package or a path directly to a JS module. Users configure plugins to use plug-ins. As follows:

// .umirc.js
export default {
  plugins: [
    [
      'umi-plugin-dva',
      {
        immer: true,}], ['./src/plugins/customPlugin.js',
      {
        // plugin config
      },
    ],
  ],
};
Copy the code

How to implement

Umi’s plug-in mechanism is very excellent. We analyze it through Umi Dev to see how umi’s plug-in mechanism is implemented. Umi source code address: umi github From the source code, it is a lerna multi-packages project. The source code is in the Packages directory.

Umi Dev’s process is as follows:

The UMI package provides external commands, such as umi dev, umi build, umi inspect, and umi test.

It completes the process by instantiating a Service instance, new Service().run(‘dev’, args); .

The structure of a Service is as follows:

After the Service is instantiated, the run method is run. The first step is initialization, and the second step is to run the corresponding command:

The init method initializes each plugin in the plugins:

InitPlugin method by Proxy to mount more methods of each plug-in, dev command registration method in the/umi – build – dev/SRC/plugins/commands/dev/index. Js. You can see that this command finally starts webpack to run the project with af-webpack.

How is the UMI directory generated?

Umi directory:

It monitors the file directory through Chokidar and regenerates the directory when the file is updated.

How is webPack configuration packaged?

A Service chain encapsulates the Webpack configuration via webpack-chain:

Umi based development scheme