本文介紹 qiankun 的主應(yīng)用和微應(yīng)用都使用 umi3 搭建。

• umi3 + qiankun 開發(fā)篇
• umi3 + qiankun 部署篇
• umi3 + qiankun 組件篇
• umi3 + qiankun 工具篇

1. 主應(yīng)用

創(chuàng)建主應(yīng)用，安裝依賴包

$ mkdir umi-main
$ cd umi-main
$ yarn create @umijs/umi-app
$ yarn
$ yarn add @umijs/plugin-qiankun -D

修改啟動端口號：根目錄下創(chuàng)建 .env 文件，內(nèi)容如下：

PORT=8300

修改 .umirc 配置文件

import { defineConfig } from 'umi';

export default defineConfig({
  qiankun: {
    master: {
      apps: [
        {
          name: 'micro',                                // 微應(yīng)用名稱
          entry: '//localhost:8301',        // 微應(yīng)用入口文件
        }
      ]
    }
  },
  routes: [
    { exact: true, path: '/', component: '@/pages/index' },
    { 
      path: '/micro', 
      microApp: 'micro',        // 當(dāng)訪問路由為 /micro，主應(yīng)用實(shí)際訪問名稱為 micro 的微應(yīng)用
    },
  ],
});

2. 微應(yīng)用

創(chuàng)建微應(yīng)用

$ mkdir umi-micro
$ cd umi-micro
$ yarn create @umijs/umi-app
$ yarn
$ yarn add @umijs/plugin-qiankun -D

修改微應(yīng)用啟動端口，創(chuàng)建 .env 文件，內(nèi)容如下：

PORT=8301

修改 .umirc 配置文件

import { defineConfig } from 'umi';

export default defineConfig({
  // 加這個(gè)屬性，就不用在入口文件 src/app.ts 中寫 qiankun 生命周期函數(shù)了
  qiankun: {
    slave: {},
  },
  // 加這個(gè)屬性，靜態(tài)資源訪問前綴
  publicPath: '/micro/',
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
});

修改 package.json 文件，去除 private 屬性，添加 name 屬性，否則啟動會報(bào)錯(cuò) You should have name in package.json

-- "private": true,
++ "name": "umi-micro",

修改頁面內(nèi)容，以區(qū)別于主應(yīng)用 src/pages/index.tsx

import styles from './index.less';

export default function IndexPage() {
  return (
    <div>
      <h1 className={styles.title}>Umi-Micro Page</h1>
    </div>
  );
}

3. 測試

先啟動微應(yīng)用，訪問 http://localhost:8301/

image.png

啟動主應(yīng)用，訪問 http://localhost:8300/

image.png

還是主應(yīng)用的端口，訪問 /micro 路由，可以看到頁面中顯示的是微應(yīng)用的頁面，環(huán)境搭建成功

image.png

至此，開發(fā)已經(jīng)沒問題了，但是后面部署還會遇到問題，這個(gè)下篇文章再介紹。