マイクロフロントエンドは qiankun を使用して実装されており、react のメイン アプリケーションは、react、vue3、umi のサブアプリケーションも考慮しています。

マイクロフロントエンドとは何か、アプリケーションシナリオ、利点

理解: マイクロ フロントエンドはプロジェクトを複数のモジュールに分割するものであり、各マイクロ フロントエンド モジュールは異なるチームによって管理でき、フレームワークを個別に選択でき、独自のウェアハウスがあり、個別にデプロイして実行できることを簡単に理解できます。打ち上げられた
アプリケーションシナリオ: 1. 企業コードが古く、新しいテクノロジー スタックを使用する必要がある場合は、マイクロ フロント エンドを使用できます。2. 複数のチームが同時に開発する場合、各チームはモジュールを個別に保守します。3. ビジネスモジュールを追加する場合、新しいプロジェクトを直接作成し、チームの状況に応じてテクノロジースタックを選択します
アドバンテージ: チームの自律性、古いプロジェクトとの互換性、独立した開発/展開、柔軟なテクノロジー

qiankun フレームワーク

iframe を理解する

iframe は、メイン アプリケーションでネストされたサブ参照を実装できる最も古いタグです。各サブアプリケーションは、iframe タグを通じて親アプリケーションに埋め込まれます。iframe には自然な分離特性があり、サブアプリケーション間およびサブアプリケーション間で使用できます。アプリケーションと親アプリケーションが相互に影響を与えないようにします。
欠点がある:
1. URL が同期されていないため、ページが更新されると、iframe 内のページのルーティングが失われます。
2. グローバル コンテキストは完全に分離されており、メモリ変数は共有されません。(親アプリケーションと子アプリケーションのウィンドウ オブジェクトが不一致です)
3. UI が同期されていない 子アプリケーションが UI コンポーネントを使用する場合、それは子アプリケーションのスコープ内でのみ有効になり、UI コンポーネントのスペースを占有しません。親アプリケーション。
4. ゆっくり。各サブアプリケーション エントリは、ブラウザ コンテキストの再構築とリソースの再読み込みのプロセスです。

シングルスパについて詳しく見る

single-spa は最も初期のマイクロ フロントエンド フレームワークであり、多くのテクノロジー スタックと互換性があります。iframe URL が同期せず、UI も同期しない状況を解決しました
欠点がある:
1. js 分離と css 分離は実装されていません。
2. ベースアプリケーションやサブアプリケーションを含め、多くの設定を変更する必要があり、そのまま使用することはできません。

銭君

学び

	qiankun是阿里开源的一个微前端的框架，在阿里内部已经经过一批线上应用的充分检验及打磨了，所以可以放心使用
	优势：
	1.基于single-spa封装的，提供了更加开箱即用的API
	2.技术栈无关，任意技术栈的应用均可使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。
	3.HTML Entry的方式接入，像使用iframe一样简单
	4.实现了single-spa不具备的样式隔离和js隔离
	5.资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。

実用化

要約

1.プロジェクトは React18 バージョンに基づいて構築され、残りのサブアプリケーションは新しいこの
2.react16 バージョンでは、学習アドレスのビデオリンクを推奨しています

プロジェクトディレクトリ

1. ベース (メイン アプリケーション): すべてのサブアプリケーションの統合を主に担当し、必要なサブアプリケーションの表示にアクセスするための入り口を提供します。複雑なビジネス ロジックは記述しないようにします。 2. サブアプリケーション: に従って分割されたモジュールさまざまなビジネス
、各サブアプリは次のようにパッケージ化されていますうーんモジュールの形式はベース (メイン アプリケーション) によってロードされます。
3. ベースは反応18

ベース改造（主な用途）

1.qiankunをインストールする

npm i qiankun // 或者 yarn add qiankun

2. エントリーファイルを変更する

// 在src/index.tsx中增加如下代码
import { start, registerMicroApps } from 'qiankun';

// 1. 要加载的子应用列表
const apps = [
  {
    name: "sub-react", // 子应用的名称
    entry: '//localhost:8080', // 默认会加载这个路径下的html，解析里面的js
    activeRule: "/sub-react", // 匹配的路由
    container: "#sub-app" // 加载的容器
  },
]

// 2. 注册子应用,qiankun会根据activeRule去匹配对应的子应用并加载
registerMicroApps(apps, {
  beforeLoad: [async app => console.log('before load', app.name)],
  beforeMount: [async app => console.log('before mount', app.name)],
  afterMount: [async app => console.log('after mount', app.name)],
})

start() // 3. 启动微服务  启动 qiankun，可以进行预加载和沙箱设置

反応サブアプリ

create-react-app スキャフォールディングを使用して webpack を作成および構成します。すべての webpack 構成を排出しないようにするために、react-app-rewired ツールを使用して Webpack 構成を変更することを選択します。
1.react-app-rewiredをダウンロードする

npm i react-app-rewired// 或者 yarn add react-app-rewired

2. public-path.js を src ディレクトリに追加します

if (window.__POWERED_BY_QIANKUN__) {
  // 动态设置 webpack publicPath，防止资源加载出错
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

3. サブアプリケーションのエントリファイルを変換する

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom'
import './public-path.js'

let root: any;
function render(props: any) {
  const { container } = props
  //判断当前启动环境是否为qiankun环境下
  const dom = container ? container.querySelector('#root') : document.getElementById('root')
  root = createRoot(dom)
  root.render(
    <BrowserRouter basename='/sub-react'>
      <App/>
    </BrowserRouter>
  )
}

// 判断是否在qiankun环境下，非qiankun环境下独立运行
if (!(window as any).__POWERED_BY_QIANKUN__) {
  render({});
}

// 各个生命周期
// bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
export async function bootstrap() {
  console.log('react app bootstraped');
}

// 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
export async function mount(props: any) {
  console.log(props)
  props.onGlobalStateChange((state, prev) => {
    // state: 变更后的状态; prev 变更前的状态
    console.log(state, prev);
    // 将这个state存储到我们子应用store
  });
  props.setGlobalState({ count: 2 });
  render(props);
}

// 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
export async function unmount(props: any) {
  root.unmount();
}

4.package.jsonを変更する

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

5. 起動ポート番号の設定

 在根目录下新增.env文件
.env文件下写入PORT=3001

6. Webpack 構成ファイルを変更する

// 在根目录下新增config-overrides.js文件并新增如下配置
const { name } = require("./package");

module.exports = {
  webpack: (config) => {
    config.output.library = `${name}-[name]`;
    config.output.libraryTarget = "umd";
    config.output.chunkLoadingGlobal = `webpackJsonp_${name}`;
    return config;
  }
}; 

vueサブアプリ

1. サブアプリケーションを作成し、vue3+vite を選択します

npm create vite@latest

2. vite-plugin-qiankun の依存パッケージをインストールします

npm i vite-plugin-qiankun // yarn add vite-plugin-qiankun

3. vite.config.tsを変更する

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun';

export default defineConfig({
  base: '/sub-vue', // 和基座中配置的activeRule一致
  server: {
    port: 3002,
    cors: true,
    origin: 'http://localhost:3002'
  },
  plugins: [
    vue(),
    qiankun('sub-vue', { // 配置qiankun插件
      useDevMode: true
    })
  ]
})

4. main.tsを変更する

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
import router from './router'
let app: any;
//判断是否为乾坤环境
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  createApp(App).use(router).mount('#app');
} else {
  renderWithQiankun({
    mount(props) {
      app = createApp(App);
      app.use(router).mount(props.container.querySelector('#app'));
    },
    bootstrap() {
      console.log('vue app bootstrap');
    },
    update() {
      console.log('vue app update');
    },
    unmount() {
      console.log('vue app unmount');
      app?.unmount();
    }
  });
}

umiサブアプリケーション

1.インストール

npm i @umijs/plugins

2.構成.umirc.ts

export default {
  base: '/sub-umi',
  npmClient: 'npm',
  plugins: ['@umijs/plugins/dist/qiankun'],
  qiankun: {
    slave: {},
  }
};

上記の 2 つの手順を完了すると、Dock に umi サブアプリケーションが読み込まれていることがわかります。
3. 構成のライフサイクル

src下创建app.ts文件
export const qiankun = {
  async mount(props: any) {
    console.log(props)
  },
  async bootstrap() {
    console.log('umi app bootstraped');
  },
  async afterMount(props: any) {
    console.log('umi app afterMount', props);
  },
};

補充する

スタイルの分離

Qiankun はサブアプリケーション間のスタイル分離を実現していますが、ベースアプリケーションとサブアプリケーション間のスタイル分離は実装されていないため、ベースアプリケーションとサブアプリケーションの前のスタイルは引き続き競合して上書きされます。
解決策: 各アプリケーションのスタイルは固定形式を使用し、各アプリケーションには自動的に css-module というプレフィックスが付けられます。

サブアプリケーションジャンプ

	1.主应用和微应用都是 hash 模式，主应用根据 hash 来判断微应用，则不用考虑这个问题。
	2.history模式下微应用之间的跳转，或者微应用跳主应用页面，直接使用微应用的路由实例是不行的，
	原因是微应用的路由实例跳转都基于路由的 base。有两种办法可以跳转：
	i.history.pushState()
	ii.将主应用的路由实例通过 props 传给微应用，微应用这个路由实例跳转。

ジャンプを実現するには、history.pushState() を使用します。
window.history.pushState({}, '', '/sub-vue')

グローバルな状態管理

// 基座初始化
import { initGlobalState } from 'qiankun';
const actions = initGlobalState(state);
// 主项目项目监听和修改
actions.onGlobalStateChange((state, prev) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log(state, prev);
});
actions.setGlobalState(state);

// 子项目监听和修改
export function mount(props) {
  props.onGlobalStateChange((state, prev) => {
    // state: 变更后的状态; prev 变更前的状态
    console.log(state, prev);
  });
  props.setGlobalState(state);
}