Project name: UmiJS Project author: UmiJS Team Open Source License: MIT Project address: gitee.com/umijs/umi

Project introduction

Umi, which can be pronounced as Umi in Chinese, is an extensible enterprise front-end application framework. Umi is route-based and supports both configured and contracted routes to ensure complete functions of routes and extend functions. It is then paired with a well-lifecycle plug-in system that covers every lifecycle from source code to build artifacts, supporting various functional extensions and business requirements.

Umi is the bottom front-end framework of Ant Financial, which has directly or indirectly served 3000+ applications, including Java, Node, H5 wireless, Hybrid applications, pure front-end assets applications, CMS applications, etc. He has served our internal users well, and hopefully he will serve our external users well.

Project characteristics

  • Extensible, Umi achieved a complete life cycle, and make its plug-in, Umi internal functions are also completed by the plug-in. Plug-ins and plug-in sets are also supported to satisfy the hierarchical requirements of functionality and vertical domains.
  • Out of the box, Umi built routing, construction, deployment, testing, and so on, only a dependency can start development. React also provides an integrated plug-in set with rich functions that can meet 80% of daily development requirements.
  • Enterprise level, by ant internal 3000+ project and ali, Youku, netease, Feizhu, Koubei and other companies project verification, reliable.
  • A large number of self-developed, including microfront-end, component packaging, documentation tools, request library, hooks library, data flow, etc., to meet the peripheral needs of daily projects.
  • Complete routing supports both configuration routing and reduced routing, while maintaining the completeness of functions, such as dynamic routing, nested routing, permission routing and so on.
  • Looking to the future, we will not stop exploring new technologies while meeting our needs. DLL acceleration, Modern Mode, webpack@5, automated External, Bundler Less, and more.

Quick learning

Environment to prepare

You need to have Node first, and make sure node is 10.13 or above. (On a MAC, NVM is recommended to manage node versions.)

V10.13.0 $node - vCopy the code

You are advised to use YARN to manage NPM dependencies and use domestic sources.

# $NPM I yarn tyarn -g # $NPM I yarn @ali/yarn -g # $ ayarn -vCopy the code

The scaffold

Find a place to build an empty directory.

$ mkdir myapp && cd myapp

Copy the code

Create projects using official tools,

$ yarn create @umijs/umi-app
# 或 npx @umijs/create-umi-app

Copy:  .editorconfig
Write: .gitignore
Copy:  .prettierignore
Copy:  .prettierrc
Write: .umirc.ts
Copy:  mock/.gitkeep
Write: package.json
Copy:  README.md
Copy:  src/pages/index.less
Copy:  src/pages/index.tsx
Copy:  tsconfig.json
Copy:  typings.d.ts

Copy the code

Install dependencies

$yarn Yarn Install v1.21.1 [1/4] 🔍 Resolving packages... Success Already up-to-date. ✨ Done in 0.71s.Copy the code

Start the project

$ yarn start Starting the development server... ✔ ✔ Webpack Compiled successfully in 17.84s DONE Compiled successfully in 17842MS 8:06:31 PM App running at: - Local: http://localhost:8000 (copied to clipboard) - Network: http://192.168.12.34:8000Copy the code

Open http://localhost:8000/ in your browser and you’ll see the following screen,

Modify the configuration

The default scaffolding has @umijs/preset- React built in, including common functions such as layout, permissions, internationalization, DVA, simple data flow, etc. For example, if you want an Ant-design-Pro layout, edit.umirc.ts to configure Layout: {} and install @ant-Design/Pro-Layout.

import { defineConfig } from 'umi';

export default defineConfig({
+ layout: {},
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
});

Copy the code

Without restarting YARN Start, WebPack is incrementally compiled behind the scenes and after a while you will see the following screen,

Deployment of release

build
$yarn build stocking Webpack Compiled successfully in 17.17s DONE Compiled successfully in 17167ms 8:26:25pm build success. ✨ Done in 20.79 s.Copy the code

By default, build artifacts are generated under./dist and then viewed through tree command.

└./dist./dist ├─ index.html ├─ um.css ├─ um.jsCopy the code
Local validation

You can do local validation with Serve before publishing,

$yarn global add $serve. Serve/dist ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ │ │ Serving! │ │ ├ ─ Local: http://localhost:5000 │ │ - On Your Network: http://192.168.12.34:5000 │ │ │ │ Copied the local address to the clipboard. │ │ │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘Copy the code

Visit http://localhost:5000, which is the same as that when yarn start is executed.

The deployment of

Once authenticated locally, you can deploy. You need to deploy the dist directory on the server.

If you want to know more about the project, you can go to the project homepage: gitee.com/umijs/umi