1. Directories and files to know:

  • SRC /. Umi directory

Once you have your first Umi project up and running, one question may arise: Where is the startup file for this project? In general, when we build a project using the React scaffold, we will have an index.js file at the root of the SRC folder, and in index.js we will start the project with the Reactdom render command. However, in the Umi project, there is no index.js file in the SRC root, and no instruction code such as render can be found.

Looking at the start command in the package.json file, we can see that the project is started by umi, and the entry file to umi is SRC /.umi/umi.ts.

As you can see from the documentation on the official website,.umi is a temporary folder. The.umi temporary directory is the engine of the entire umi project, where entry files, routes, etc., are generated by umi plugins and third-party plugins.

At the same time, temporary files are a very important part of the Umi framework. The framework or plugin will generate temporary files based on your code, hiding the messy parts of the project. Because of its temporary nature, UMI is deleted and regenerated every time it is started.

  • .umirc.ts

The basic configuration of the project is in the.umirc.ts file in the project root directory. If multi-platform complex configuration is needed, instead of.umirc.ts file, the config folder is set up in the root directory and multiple files are set up in the folder for configuration. For example:

When we change the configuration and restart the project, the contents of the SRC /.umi directory will be regenerated according to our configuration. In other words, the contents of the entry folder will be dynamically generated according to our configuration and the plug-in contents during the coding process.

  • .env

Environment variables such as:

// Port = 8001
  • SRC/global benchmark, SRC/global. The less

In addition, we can create global. TSX and global.less in the SRC root directory. These two files are introduced by default before the project starts. Global. less can put some global styles, global. TSX can handle global asynchronous events, etc.

For example, in global.less, you can style HTML,body, and root:

. html, body, #root { height: 100%; } .ant-layout { min-height: 100vh; }...
  • src/app.tsx

Runtime configuration file that runs before the entry file.

Running order: global.tsx > app.tsx > umi.ts

2. The idea of conventionalization

The following is from:
http://www.zyiz.net/tech/detail-140738.html

A lot of things in umi are contraptional. The so-called convention is that, according to the agreed way of development, can achieve a certain effect, in the middle of the process by the framework to help us complete. Such as:

  • Build a Locales directory, and you have internationalization
  • Create a models directory and you have your data stream
  • Create a mock directory, and you have data mocks
  • Create an Access.ts file, and you have the permission policy
  • .

This looks like a very black box and very cool. In fact, it is very beneficial to unify the code style of the team in this way. It directly restricts the directory organization mode of everyone at the framework level, which is easy for the team to maintain.

However, the disadvantage is also quite obvious, the flexibility is not as high as the configuration, because the development can only be in a specific mode, if the original agreed way does not meet the business needs, the need to develop additional Umi plug-in to magic change the original functionality. And the development of the protocol is a very special point compared to other frameworks, for new students need time to read through the official website documents to understand the rules of the protocol.

Umijs 3.X Combat from scratch: Configure and Runtime Configure Umijs 3.X Combat from scratch: Configure and Runtime Configuration