preface

How has Coder improved its game? Do one thing ten thousand times, but you are familiar with it.

I don’t know if you have any experience, always feel the previous code is very low force, want to spare some time to toss about their own or very fun. Refactoring is fun. Handmade doghead town building!

Build the basic framework

In general, small and medium-sized team China project is front end their dominant style, the style, layout, routing, permissions, and so on a series of strong commonality framework, the basis of the research is more time, the rate of return on investment is not high, the best way is in the mature solution must be personalized customization, high performance to price ratio. Therefore, we also adopted UmiJS + ANT DESIGN PRO architecture to upgrade the project (the previous project was developed based on Umi2.0 and ANT DESIGN PRO 3.0).

What is UmiJS?

UmiJS, which can be pronounced as Ummi 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.

What is ANT DESIGN PRO?

Ant Design Pro is an enterprise-level back-end front-end/Design solution. Based on the Design specifications and basic components of Ant Design, it extracts typical templates/business components/supporting Design resources to further improve the experience of “users” and “designers” in the Design and development process of enterprise-level back-end products.

Build infrastructure quickly

We used UmiJS 3.0 + Ant Design Pro 4.0 directly to build a basic template.

Yarn Create UMI Select the Boilerplate type (Use arrow keys) ❯ ant-design-pro-create projectwith an layout-only ant-design-pro boilerplate, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.
Copy the code

The Ant Design Pro scaffolding will be installed automatically, and once the dependencies are installed, a base framework is complete, ending the chapter.

Custom modules

Delete globalization

In general, Ant Design Pro’s internationalization doesn’t make sense to most teams, so it can be removed first and added later as needed.

Delete the @umijs/plugin-locale plugin, then delete all the dynamic code associated with formatMessage in the project, remove the i18N file, and change it to normal copy.

If you follow the above template and delete the @umijs/plugin-locale configuration, the project will report an error.

Adding a development environment

A normal development environment requires three sets, namely dev (development environment), Test (test environment), and PROD (production environment). If you have enough resources, you can add pre (pre-delivery environment).

Umi uses the environment variable UMI_ENV to specify configurations based on different environments.

Export default {a: 1, b: 2}; //.umirc.js export default {a: 1, b: 2}; //.umirc.local.js or config/config.local.js Export default {c: 'local'}; //.umirc.test.js export default {b: 'cloud', c: 'cloud'};Copy the code

When configuring multiple environment files, remember that config.js must exist, otherwise it will fail

Modify the command start command at the same time

"start:dev": "cross-env REACT_APP_ENV=dev MOCK=none umi dev",
"build:test": "cross-env UMI_ENV=test umi build",
"build:prod": "cross-env UMI_ENV=prod umi build",
Copy the code

In this way, you can run different commands in different environments to generate the corresponding version. For example, the test environment does not have the same interface as the online environment, or some functions are required to be used in the test environment.

After all, the basic framework after the combination of UmiJS and Ant Design Pro is very mature. Business development can be carried out simply by adding some functions. If customization is needed, the functions can be added or removed by themselves.

Introduction of qiankun micro front end

Previously the Nuggets had a special micro front end topic, there are also a lot of digg friends posted related articles and demos. Here is combined with the transformation of the project to introduce the use.

Before using microfronds, it is recommended to read the previous post – Delivery address: Why you Need microfronds. Once you have determined that these conditions do exist on your team, then match the development template to the required business customization.

First, we need to transform the previous basic template into two sets, one for the master and sub-project template.

Active Application Configuration

// Register child applications
export default {
  qiankun: {
    master: {
      apps: [{name: 'app1'./ / the only id
          entry: '//localhost:7001'.// html entry
        },
        {
          name: 'app2'./ / the only id
          entry: '//localhost:7002'.// html entry},],},},},};Copy the code
// Load the child application
export default {
    routes: [{path: '/'.component: '.. /layouts/index.js'.routes: [{path: '/app1'.component: './app1/index.js'.routes: [{path: '/app1/user'.component: './app1/user/index.js',},],}, {path: '/'.component: './index.js',},],},}Copy the code

Delete, delete, delete and modify the Layout template as shown above. Basically, change the navigation menu to Nav mode and assign all the following content modules to the children. This gives the main play space to the children to manage.

Sub-application Configuration

export default {
  qiankun: {
    slave: {}}}Copy the code

The child application is relatively easy to configure, just add the above code to register the plug-in.

In the template of the sub-application, all Header modules are deleted and the side routing modules are reserved. Therefore, the sub-application can have its own maximum customization and can be independently developed.

When the child application is loaded into the main application, it will look like the following figure:

After the main application loads the child application, the subsequent interface rendering can be completely managed by the child application itself.

Configure the development and production environment

Since it is a micro front-end, it is impossible to start the two master and child systems at the same time, which does not conform to the concept of micro front-end, so it is definitely unscientific to introduce localhost, but when introducing projects locally, there are sometimes cross-domain problems.


export default {
  qiankun: {
    master: {
      apps: [{name: 'devops'./ / the only id
          entry: '/qiankun/devops/index.html'.// html entry},],},},}proxy: {
  dev: {
    '/qiankun/': {
      target: 'https://www.cookieboty.com'.changeOrigin: true.pathRewrite: { A '^': ' '}},}},Copy the code

All sub-applications were published under the Qiankun gateway, and the sub-application’s own identity could be added through proxy, so that the main application could normally load and access the sub-application during local development.

As for other details, you can refer to the qiankun plug-in on the official website to develop templates that are in line with your own business. There is no more explanation here. If there are any unclear questions, please leave comments and discuss.

Route Permission Modification

UmiJS’s own route permission verification will lead the pages that do not conform to the user’s permission to blank or other pages, we have a little change here, introduce dynamic route and menu, if the user does not have the permission will not expose the menu and route out.

// app.ts
function Routes(routes, userinfo) {
  let routesObject = {};
  routes.forEach(route= > {
    if (route.childs && route.childs.length > 0) {
      routesObject = Object.assign(routesObject, Routes(route.childs, userinfo)); }});return routesObject;
}

export async function render(oldRender) {
    window.oldRender();
}

const getRoutes = (routes, newRoutesList) = > {
  const routesList = [];
  routes.forEach(route= > {
    if (route.routes && route.routes.length > 0) {
      route.routes = getRoutes(route.routes, newRoutesList);
    }
    if(newRoutesList[route.path]) { routesList.push(route); }});return routesList;
};

export async function patchRoutes(routes) {
  const userinfoData = await getUserInfo()
  const userinfo = userinfoData.data
  const {data} = await getTree()
  newRoutes = Routes(data.childs, userinfo);
  if (newRoutes) {
    routes[0].routes = getRoutes(routes[0].routes, newRoutes);
    window.g_routes = routes; }}Copy the code

To put it simply, dynamic routes are obtained from the background and then matched with their own routes for filtering. The matched routes are screened out and g_routes are modified in patchRoutes, which is not a dynamic route in the real sense. It’s kind of a compromise solution.

Write in the last

If you look at the example diagram, do you think of the DevOps series?

Yes, I hu Hansan back, continue to push forward, please look forward to.

Full series of blog entries

The backend module

  1. DevOps – Gitlab Api usage (completed, click to jump)
  2. The conversation – build enterprise foundation platform Basic platform building last | foundation platform structures, medium-length | foundation platform set up next
  3. DevOps – Gitlab CI pipeline construction
  4. Devops-jenkins pipelined construction
  5. Devops-docker use
  6. DevOps – Release task flow design
  7. DevOps – Code review points
  8. Devops-node monitors service quality

The front-end module

  1. DevOps – H5 base scaffolding
  2. Devops-react project development