浅谈Umijs如何实施微前端(一）本地运行

骐神
1,477 阅读3分钟

相信很多朋友都用过umijs的前端脚手架，说实话，这是一款非常不错的开发利器，但其中对于微前端的操作介绍，限于umi max，而对于没有使用umi max的小伙伴来说，就显得有些捉襟见肘了。所以，在本章中，将会对umi如何使用微前端，以及在部署过程中会有哪些注意点，进行详细的说明。

1.Umi版本 本次教程，使用的Umi版本是最新的4.x版本，具体安装这里就不赘述了，具体可以参考官方文档

package.json

{
  "name": "main-app",
  "private": true,
  "author": "qishen@zhuantype.com",
  "scripts": {
    "build": "umi build",
    "dev": "umi dev",
    "postinstall": "umi setup",
    "lint": "umi lint",
    "prepare": "husky install",
    "setup": "umi setup",
    "start": "npm run dev"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,css,less}": [
      "yarn run umi lint"
    ],
    "**/*.{js,jsx,tsx,ts,css,less,md,json}": [
      "prettier --write --ignore-unknown"
    ]
  },
  "dependencies": {
    "@ant-design/icons": "^5.0.1",
    "umi": "^4.0.50"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@umijs/lint": "^4.0.50",
    "@umijs/plugins": "^4.0.50",
    "eslint": "^8.33.0",
    "husky": "^8.0.3",
    "lint-staged": "^13.1.1",
    "prettier": "^2.8.4",
    "prettier-plugin-organize-imports": "^3.2.2",
    "prettier-plugin-packagejson": "^2.4.2",
    "stylelint": "^14.16.1",
    "typescript": "^4.1.2"
  }
}

2.微前端的基本概念

微前端顾名思义，需要有一个主应用和N多个微应用，微应用注册到主应用上，主应用根据路由的不同，加载不同的微应用

3.主应用

3.1 首先你需要使用umijs创建一个应用，暂定为mainApp，运行端口号:8000

在mainApp中需要增加如下配置：

首先需要加载qiankun插件，可以单独写一个plugin.ts，也可以直接在config.ts文件中加入插件，本实例新建了一个plugin.ts文件，内容如下：

export default [
  '@umijs/plugins/dist/qiankun',
];

配置qiankun.ts，在里面进行子应用的配置，主要包括name和entry，name需要全局唯一，entry是子应用的入口，注意这里是需要可以直接访问得到的，dev环境可以直接写死IP和端口，prod根据实际需要可以进行代理配置进行转发

export default {
  master: {
    apps: [
      {
        //
        name: 'subApp1',
        entry: process.env.NODE_ENV === 'development' ? '//127.0.0.1:8001/app1/' : '/app1/',
      },
      {
        name: 'subApp2',
        entry: process.env.NODE_ENV === 'development' ? '//127.0.0.1:8002/app2/' : '/app2/',
      },
    ],
  },
};

新增route.ts文件，进行微应用路由的配置，当然你可以有其他方式，但是这边为了简单，直接使用最简单的方式

export default [
  {
    path: '/',
    component: '../layouts/MainApp/index',
    routes: [
      // 子应用路由
      {
        path: '/sub-app1/*',
        // 这里需要跟qiankun.ts配置的name保持一致，严格大小写
        microApp: 'subApp1',
      },
      {
        path: '/sub-app2/*',
        microApp: 'subApp2',
      },
      {
        path: '/404',
        component: './404',
      },
    ],
  },
];

在confis.ts文件中，引入plugin.ts、qiankun.ts、route.ts，至此主应用的配置全部完成

import { defineConfig } from 'umi';
import plugins from './plugin';
import qiankun from './qiankun';
import routes from './route';

/**
 * 配置
 */
export default defineConfig({
  title: '主应用',
  npmClient: 'yarn',
  hash: true,
  /**
   * 路由
   */
  routes: routes,
  /**
   * 插件
   */
  plugins: plugins,
  /**
   * 微前端子应用注册
   */
  qiankun: qiankun,
});
  1. 微应用

我们用umijs创建2个微应用，subApp1和subApp2，运行端口号分别为8001和8002，分别对其进行配置，跟主应用类似，我们也需要引入qiankun插件，创建plugin.ts文件

export default [
  '@umijs/plugins/dist/qiankun',
];

配置qiankun.ts，在里面进行子应用的配置

export default {
  slave: {},
};

config.ts文件中引入上述配置，这里需要设置base和publicPath，这个非常重要

import { defineConfig } from 'umi';
import plugins from './plugin';
import qiankun from './qiankun';

/**
 * 配置
 */
export default defineConfig({
  title: '子应用1',
  npmClient: 'yarn',
  hash: true,
  /**
   * 插件
   */
  plugins: plugins,
  /**
   * 微前端子应用注册
   */
  qiankun: qiankun,
  base: '/app1/',
  publicPath: '/app1/',
});

以上配置完成后，就可以使用yarn run dev,本地进行运行了，在浏览器中访问http://localhost:8000/sub-app1 会访问subApp1的页面，访问http://localhost:8000/sub-app2 会访问subApp2的页面。

当然subApp1和subApp2也是可以独立访问的，就是直接在浏览器中访问http://localhost:8001/app1 和http://localhost:8002/app2

下一节我们探讨一下，如何在生产进行部署和发布

avatar
文章
阅读
粉丝