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