preface

Recently, I came into contact with umi framework for a small project of the company during the iteration, so here is a simple introduction to UMI framework, which can also be regarded as study notes.

A, aboutumi

Umi umi is a pluggable enterprise react application framework. Umi is route-based, supports next-js contract routing, and various advanced routing functions, which are extended to support route-level load on demand.

Second, createumiproject

To create a project, you can do yarn Create UMI or NPM Create UMI and use create-UMI scaffolding. The yarn create command is recommended to ensure that the latest scaffolding is used each time.

usecreate-umiThe scaffold

1, global installation of scaffolding

npm i craete-umi -g
Copy the code

2. Select APP to create a UMI application

create-umi umi-app
Copy the code
No scaffolding

Run the NPM command. Note: When using scaffolding, all files in the project will be placed in the umi-app folder, while when not using scaffolding, the project files will be written to the current terminal folder, so when creating the project without scaffolding, you need to create a new folder and create the project under the directory terminal of this folder.

npm create umi
Copy the code

Third, the introduction of the function of directory

The following is a simple directory structure for the UMI project, and I will explain the role of the main files in turn.

. ├ ─ ─ dist /// Default build output directory├ ─ ─ a mock /// Mock file directory, express based├ ─ ─ the config / ├ ─ ─ config. Js// Umi configuration, same as.umirc.js, one or the other└ ─ ─ SRC /// Source directory, optional├ ─ ─ layouts/index. Js// Global layout├ ─ ─ pages /// page directory, where files are routes├ ─ ─. Umi /// dev temporary directory, which needs to be added to.gitignore├ ─ ─. Umi - production /// build temporary directory, which will be deleted automatically├ ─ ─document.ejs           / / HTML templates├ ─ ─404.js                 // 404 page (default)├ ─ ─ page1. Js// Page 1, name it any way, export the React component├ ─ ─ page1. Test. JsUmi test matches all files ending in.test.js and.e2e└ ─ ─ page2. Js// page 2, arbitrarily named├ ─ ─global.css                 // Convention global style file, automatically imported, also can use global.less├ ─ ─global.js                  // Polyfill can be added here├ ─ ─ app. Js// Runtime configuration file├ ─ ─. Umirc. Js// umi configuration, same as config/config.js, either of two options├ ─ ─ the env// Environment variables└ ─ ─ package. JsonCopy the code
dist

Default package outputPath, which can be modified by configuring outputPath.

mock

Umi will parse all.js files in this directory into mock files, for example.

Create a new Person.js under the mock as follows

export default {
  '/api/users': {
    name: 'rinvay'}}Copy the code

Access to the browser http://localhost:8000/api/users can get {name: ‘rinvay} data, isn’t it amazing.

src

SRC is the source directory. If there is no SRC directory, the current directory is used as the source directory.

src/layouts/index.js

Global layout, with 10 routes nested outside the route.

src/pages

All JS, JSX, TS, and TSX files under Pages are routes, as is next-js.

The config/config. Js and. Umirc. Js

Note that the two umi configuration files can only exist in one of them.

src/global.css

This file does not follow CSS modules and is automatically imported, so you can write global styles and do style overrides here.

To explain, that is, to introduce styles to the component in Pages by default, CSS modules, as follows:

/ / into the CSS
import styles from './index.css';

// Use CSS --> styles.title
<h1 className={styles.title}>Yay! Welcome to umi!</h1>
Copy the code
src/global.js

This file is automatically imported at the top of the entry file, where you can load patches, do some initialization, etc.

Four, routing,

Reductive route

Umi routes are files in the Pages folder. For example, there is the pages folder below.

+ pages/
  + users/
    - index.js
    - list.js
  - index.js
Copy the code

The router.js file under.umi under Pages will generate the following routing file roughly.

[
  { path: '/', component: './pages/index.js' },
  { path: '/users/', component: './pages/users/index.js' },
  { path: '/users/list', component: './pages/users/list.js' },
]
Copy the code

This is the basic ROUTE of UMI.

Dynamic routing

According to UMI, directories or files with $prefix are dynamic routes

+ pages
  + $post
    - index.js
  + users
    $id.js
Copy the code

The generated route configuration file is as follows

[{path: '/users/:id'.component: './pages/users/$id.js' },
  { path: '/:post/'.component: './pages/$post/index.js'},]Copy the code

At this point, we can find the corresponding parameter in the $id.js file in the params object of the match property in the component’s props. For example, if we access /users/678, we get the following match object:

{
    isExact: true
    params: {id: "678"}
    path: "/user/:id"
    url: "/user/678"
}
Copy the code
Expand routes through comments

This is an interesting feature of UMI, which specifies that the first comment of a routing file, if it contains a YAML configuration, will be used for extended routing, especially permission routing. If we have the following scenario, authentication is required to enter the homepage of the website, and we configure it in the homepage index. TSX:

/** * title: Index Page * Routes: * - ./src/routes/private.js */
import React from 'react';
export default function() {
  return <h1>Index Page</h1>
}
Copy the code

This makes our home page component a child of routes/private.js. Then we add the authentication logic to private.js.

import React from 'react';
export default function PrivateRoute(props) {
    const {children} = props
    const token = true
    return (
        <React.Fragment>
            <h1>The following components require authentication rendering</h1>
            {token && children}
        </React.Fragment>)}Copy the code

Five, configuration,

Umi can be configured in.umirc.js or config/config.js (.umirc.js is preferred). ES6 syntax is supported. Here are a few common configurations. For details, see UmiJS Configuration.

The plug-in configuration
export default {
  plugins: [
    // In the case of parameters, dVA and ANTD plug-ins commonly used in our project are configured here
    [
      'umi-plugin-react',
      {
        dva: true.antd: true,},],],};Copy the code
Route Type Configuration

Specify the history type. Browser, hash, and memory are optional. As for what memory is, take a look at the implementation of front-end routing.

export default {
  history: 'hash'};Copy the code
targets

When configuring the latest version of the browser, polyfill is automatically introduced and syntax conversion is performed. The targets configured is combined with the default value. Therefore, there is no need to repeat the configuration.

/ / compatible ie11
export default {
  targets: {
    ie: 11,}};Copy the code

Above is Umi preliminary a simple introduction.