2020 is coming to an end and the year of serious work is drawing to a close.

As my last technical article of the year, I thought a lot and settled on UmiJS, pronounced ‘ummi’, which sounds too cute.

The Umi framework combines the advantages of React and comes from Alibaba’s Ant Financial team.

| introduce

Umi is a pluggable enterprise React application framework.

Umi is based on routing and supports next-js contracted routing and various advanced routing functions.

For example, it supports routing-level on-demand loading, and then is coupled with a complete plug-in system that covers every lifecycle from source code to build production, supporting various functional extensions and business requirements, and currently has more than 50 internal and external plug-ins combined.

| advantage

  • Out of the box, built-in React, react-Router, and so on

  • Class next. Js and has a fully functional routing convention, while supporting the configuration of the routing mode

  • Perfect plug-in system, covering every life cycle from source code to build product

  • High performance, support PWA and code Splitting with routing as a unit through plug-ins, etc

  • Support static page export, suitable for various environments, such as ZHONGtai business, wireless business, Egg, Alipay wallet, Cloud Fengbutterfly, etc

  • Development start fast, support a key to open DLL

  • One-click compatibility to IE9, based on UMI-plugin-polyfills

  • Full TypeScript support, including d.ts definitions and UMI test

  • Deep integration with DVA data stream, supporting Duck Directory, automatic loading of model, code splitting, etc

| quick learning

Since Umi’s advantages are so obvious, let’s get started fast.

Install Umi globally first.

npm install -g umi
Copy the code

After the installation is successful, you can use Umi –help to display all configuration commands, as shown in the figure below:

  • Umi Build packages the build environment

  • Umi Dev starts a service in a development environment

  • Umi generate (umi G) Rapidly generates corresponding structures

We create a demo folder and start the terminal in this folder by typing umi G page Index.

This will create a Pages folder that holds the index.js page component we created.

The service is then started using Umi Dev, port 8000.

It uses file system routing, which can be realized by entering the corresponding page component name in the URL.

| Umi scaffolding

Umi provides scaffolding functions through create-UMI.

We can create a project by using NPM Create umi projectName, then check it according to your needs, and finally create the corresponding file according to your needs.

When finished, we used NPM Install to install all dependent modules.

Finally, NPM Start can run the entire project.

Note: If NPM install does not download, change to YARN.

During the download process, an umi-plugin-react module fails to be downloaded. You are advised to download the umi-plugin-react module separately and use YARN to download it, that is, yarn add umi-plugin-react.

When all is successful in the terminal, NPM start successfully starts the service.

Umi learning can not be solved in a few days, need to continue to learn Umi partners welcome to enter the official website.

The last day to work, go!