关于微前端:搭建教程手把手从0搭建微前端umiqiankun

开始搭建

该文档实用于从 0 开始搭建微前端利用，学习微前端的 demo

以后配置版本

"@umijs/plugin-qiankun": "^2.18.3",
"umi": "^3.3.3"

一、配置基座利用（主利用）

新建文件夹命名 mainAPP

进入 mianApp 执行以下命令

yarn create @umijs/umi-app // 应用 umi 官网工具创立我的项目
yarn // 装置依赖
yarn add @umijs/plugin-qiankun -D // 装置 qiankun 插件 

注册 qiankun，在.umirc.ts 书写配置项

/mainApp/.umirc.ts

import {defineConfig} from 'umi';

export default defineConfig({
  nodeModulesTransform: {type: 'none',},
  routes: [{ path: '/', component: '@/pages/index'},
        // 注册子路由
    {
      name: 'app1',
      path: '/app1',
      microApp: 'app1',// 对应上一步注册的 name
    }
  ],
  // 注册 qiankun 利用
  qiankun: {
    master: {
      // 注册子利用信息
      apps: [
        {
          name: 'app1', // 惟一 id
          entry: '//localhost:2000', // html entry
        },
      ],
    //   jsSandbox: true, // 是否启用 js 沙箱，默认为 false
    //   prefetch: true, // 是否启用 prefetch 个性，默认为 true
    },
  },
// 新增配置项完结
});

也能够新建 /mainApp/config/config.ts 中配置以上配置，具体拆散可参照 umi 文档 https://umijs.org/zh-CN/docs/…

二、配置子利用

新建文件夹命名 microAPP1

进入 microApp 执行以下命令

yarn create @umijs/umi-app // 应用 umi 官网工具创立我的项目
yarn // 装置依赖
yarn add @umijs/plugin-qiankun -D // 装置 qiankun 插件 

增加 qiankun 配置项

/microApp1/.umirc.ts

import {defineConfig} from 'umi';

export default defineConfig({
  nodeModulesTransform: {type: 'none',},
  routes: [{ path: '/', component: '@/pages/index'},
  ],
  // 以下为配置项
  qiankun: {slave: {}
  }
});

配置生命钩子（可选）

在 /microApp/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);
    },
  };

将 package.json 中增加 name 属性

/microApp1/package.json

{
    // 以下 name 为配置项，确保名称与主利用注册的微利用 name 保持一致
  "name": "app1",
  ...
}

配置端口，与主利用配置的端口保持一致

在 microApp1 目录下新建.env 文件，编写以下内容

PORT=2000

为了标识子利用是否配置胜利，遂将写成如下这样

/microApp1/src/page/index.tsx

import React from 'react';
import styles from './index.less';

export default () => {
  return (
    <div>
      <h1 className={styles.title}> 子利用 1 </h1>
    </div>
  );
}

三、启动

运行子利用

进入 microApp1 执行

yarn start

关上浏览器输出 localhost:2000 看到

运行主利用

进入 mainApp 执行

yarn start

关上浏览器

切换子利用，将基座利用地址栏输出 localhost:8081/app1，能够看到

阐明微利用配置胜利

四、相干文档

官网配置文档

https://umijs.org/zh-CN/plugi…