关于微前端:搭建教程手把手从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…