マイクロフロントエンドアーキテクチャのアイデア：異なる緯度に従って複数の異なる機能を複数のサブアプリケーションに分割し、メインアプリケーションを介して異なるサブアプリケーションをロードし、マイクロフロントエンドのコアは、マージ後の分割、分割後のマージにあります。
使用理由
異なるチーム間で、異なる技術スタックで同じアプリケーションを開発する問題をどのように解決しますか？
各チームが独立して開発し、独立して配備できるようにするにはどうすればいいでしょうか？
古いアプリケーション・コードを必要とするプロジェクトの何が問題なのでしょうか？
アプリケーションをサブアプリケーションに分割し、パスを切り替えたときにサブアプリケーションを個別のLibにパッケージすることは可能ですか？
その際、別のサブアプリケーションを読み込みます。こうすることで、それぞれのサブアプリケーションが独立し、技術スタックを制限する必要がなくなります！これは前者の
エンド・ツー・エンド課題の共同開発
コミュニケーション方法の適用
URLベースのデータ転送が可能。
CustomEventに基づく通信
プロップスベースのマスター・サブアプリケーション間コミュニケーション
グローバル変数の使用、通信のためのredux
qiankun
<el-menu :router="true" mode="horizontal"> <el-menu-item index="/"> </el-menu-item> <el-menu-item index="/vue">vue </el-menu-item> <el-menu-item index="/react">react </el-menu-item> </el-menu> <router-view v-show="$route.name"></router-view> <div v-show="!$route.name" id="vue"></div> <div v-show="!$route.name" id="react"></div>
サブアプリケーションの登録
import {registerMicroApps,start} from 'qiankun' const apps = [ { name:'vueApp', entry:'//localhost:10000',container:'#vue', activeRule:'/vue' },{ name:'reactApp', entry:'//localhost:20000', container:'#react', activeRule:'/react' } ]registerMicroApps(apps); start();
サブビューアプリケーション
let instance = null; function render(){ instance = new Vue({ router, render: h => h(App) }).$mount('#app') }if(window.__POWERED_BY_QIANKUN__){ __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; }if(!window.__POWERED_BY_QIANKUN__){render()} export async function bootstrap(){} export async function mount(props){render();} export async function unmount(){instance.$destroy();}
包装形態
module.exports = { devServer:{ port:10000, headers:{ 'Access-Control-Allow-Origin':'*' } },configureWebpack:{ output:{ library:'vueApp', libraryTarget:'umd'
} } }
リアクト・ルーティングの設定
import { BrowserRouter, Route, Link } from "react-router-dom" const BASE_NAME = window.__POWERED_BY_QIANKUN__ ? "/react" : ""; function App() { return ( <BrowserRouter basename={BASE_NAME}> <Link to="/"> </Link> <Link to="/about"> </Link> <Route path="/" exact render={() => <h1>hello home</h1>}></Route> <Route path="/about" render={() => <h1>hello about</h1>}></Route> </BrowserRouter> ); }
CSS 分離スキーム
let shadowDom = shadow.attachShadow({ mode: 'open' })；
let pElement = document.createElement('p')；
pElement.innerHTML = 'hello world'；
let styleElement = document.createElement('style')；
styleElement.textContent = `.
p{color:red}
`
shadowDom.appendChild(pElement)；
shadowDom.appendChild(styleElement)
js分離スキーム
サンドボックスの仕組み-プロキシプロキシによるサンドボックス化
class ProxySandbox { constructor() { const rawWindow = window; const fakeWindow = {} const proxy = new Proxy(fakeWindow, { set(target, p, value) { target[p] = value; return true },get(target, p) { return target[p] || rawWindow[p]; } });
let sandbox1 = new ProxySandbox(); let sandbox2 = new ProxySandbox(); window.a = 1; ((window) => { window.a = 'hello'; console.log(window.a) })(sandbox1.proxy); ((window) => { window.a = 'world';console.log(window.a) })(sandbox2.proxy);
各アプリケーションはウィンドウを表すプロキシを作成します。これは、各アプリケーションが比較的独立しており、直接変更する必要がないという利点があります。
グローバルウィンドウプロパティを変更します！
