qiankun-前端微服务父项目与子项目的配置

前提，用umi建立两个项目，参考链接

一、父项目

• 1.package.json

  // yarn add @umijs/plugin-qiankun -D
  
    "devDependencies": {
  	 "@umijs/plugin-qiankun": "^2.7.0"
  }
  

• 2.config.ts

import { defineConfig } from 'umi';

export default defineConfig({
  define: {
    'process.env.apiUrl': 'https://test-sip-gateway.gzmpc.com',
  },
  dva: {},
  qiankun: {
    master: {
      // 注册子应用信息
      apps: [
        {
          name: 'presale', // 唯一 id
          entry: '//localhost:2000', // html entry
          // 子应用通过钩子函数的参数props可以拿到这里传入的值
          props: {a:123},
        },
        {
          name: 'login', // 唯一 id
          entry: '//localhost:3000', // html entry
          // 子应用通过钩子函数的参数props可以拿到这里传入的值
          props: {b:123},
        },
      ],
      jsSandbox: true, // 是否启用 js 沙箱，默认为 false
      prefetch: true, // 是否启用 prefetch 特性，默认为 true
    },
  },
  // layout: {},
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    {
      exact: false,
      path: '/',
      component: '@/layouts/index',
      routes: [
        {
          exact: true,
          path: '/home',
          component: '@/pages/home',
          title: 'Home',
        },
        {
          exact: true,
          path: '/child',
          component: '@/pages/Child',
          title: 'child',
        },
        { exact: true, path: '/app1', microApp: 'presale' },
        { exact: true, path: '/login', microApp: 'login' },
      ],
    },
  ],
});

二、子项目

• 1.package.json

// yarn add @umijs/plugin-qiankun -D
  "devDependencies": {
    "@umijs/plugin-qiankun": "^2.7.0"
  }

• 2.config.ts

import { defineConfig } from 'umi';

export default defineConfig({
  qiankun: {
    slave: {}
  },
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { exact: true, path: '/', component: 'index' },
    { exact: true, path: '/test', component: '@/pages/Test' },
  ],
});

• 3. src/app.ts
     接收处理父项目传递过来的数据

export const qiankun = {
  // 应用加载之前
  async bootstrap(props) {
    console.log('app1 bootstrap', props);
  },
  // 应用 render 之前触发
  async mount(props) {
    console.log('app1 mount', props);
  },
  // 应用卸载之后触发
  async unmount(props) {
    console.log('app1 unmount', props);
  },
};

.env 给子项目配置固定的端口号

PORT=3000  //login项目

三、相关代码

• 父项目pagesage.json全代码（dependencies配置根据自己项目需要自己添加）

{
  "name": "main",
  "private": true,
  "scripts": {
    "start": "umi dev",
    "build": "umi build",
    "postinstall": "umi generate tmp",
    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
    "test": "umi-test",
    "test:coverage": "umi-test --coverage",
    "serve": "cd dist && serve"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,less,md,json}": [
      "prettier --write"
    ],
    "*.ts?(x)": [
      "prettier --parser=typescript --write"
    ]
  },
  "dependencies": {
    "@ant-design/pro-layout": "^5.0.12",
    "@umijs/preset-react": "1.x",
    "@umijs/test": "^3.2.10",
    "antd": "^4.4.3",
    "enquire-js": "^0.2.1",
    "lint-staged": "^10.0.7",
    "prettier": "^1.19.1",
    "rc-banner-anim": "^2.4.4",
    "rc-queue-anim": "^1.8.5",
    "rc-scroll-anim": "^2.7.4",
    "rc-tween-one": "^2.7.3",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet-async": "^1.0.6",
    "react-load-script": "^0.0.6",
    "umi": "^3.2.10",
    "yorkie": "^2.0.0"
  },
  "devDependencies": {
    "@umijs/plugin-qiankun": "^2.5.1"
  }
}

• 子项目package.json

{
  "name": "login",
  "private": true,
  "scripts": {
    "start": "umi dev",
    "build": "umi build",
    "postinstall": "umi generate tmp",
    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
    "test": "umi-test",
    "test:coverage": "umi-test --coverage"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,less,md,json}": [
      "prettier --write"
    ],
    "*.ts?(x)": [
      "prettier --parser=typescript --write"
    ]
  },
  "dependencies": {
    "@ant-design/pro-layout": "^5.0.12",
    "@umijs/preset-react": "1.x",
    "@umijs/test": "^3.2.16",
    "lint-staged": "^10.0.7",
    "prettier": "^1.19.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "umi": "^3.2.16",
    "yorkie": "^2.0.0"
  },
  "devDependencies": {
    "@umijs/plugin-qiankun": "^2.7.0"
  }
}