Что такое микрофронтенд?
Чтобы ответить на этот вопрос, нам нужно говорить с трех сторон: почему, как и что.
why:
С расширением бизнеса компании количество систем, которые управляют бизнесом, также увеличивается, и операторам приходится переключаться между различными системами для обработки одного бизнеса. Чтобы операторы могли делать все в одной системе, технические специалисты должны найти решения.
how:
Фактически, iframe всегда был мощным инструментом для интеграции систем до того, как была названа концепция «микроинтерфейса», но он не идеален по определенным причинам, нажмите здесь.why not iframe, текущая фронтенд-разработка должна найти альтернативу для элегантного решения этих проблем.
what:
Чтобы компенсировать недостатки решения iframe и упростить разработку интерфейса для интеграции нескольких бизнес-систем, был предложен и реализован микро-интерфейс.В настоящее время решения, используемые в отрасли, в основном основаны на qiankun of Муравей Финансовый.Однородный вкус.
Подготовка перед практикой
Концепция: родительское приложение, дочернее приложение
При использовании системы интеграции IFRAME предположим, что у нас есть система A, когда мы хотим ввести систему B в систему, требуется только система B, чтобы обеспечить URL для ссылки на систему, здесь мы называем систему, называемую родительскому языку. Применение, называемое System System Sub. Точно так же микро-конец продолжает эту концепцию, а микро-конец в основном в основном так же гладко, как и использование Iframe.
Схема архитектуры Цянькунь
Как показано на рисунке, интеграция Qiankun в основном основана на текущих основных интерфейсных фреймворках vue, react, agular реализации системы, поддержка приложений jquery относительно слаба (главным образом потому, что большинство из них являются многостраничными приложениями)
Интегрировать вселенную
Для удобства мы напрямую используем демо, предоставленное Qiankun, пожалуйста, клонируйте кодовую базу самостоятельно.демо Qiankun на гитхабе
вовлеченные проекты
父应用
qiankun-base
三个子应用
qiankun-react
qiankun-vue
qiankun-jq
1. Настройте родительское приложение на базе qiankun.
1.1 Добавьте Qiankun в main.js, настройте список импортируемых подприложений и запустите Qiankun.
// qiankun-base/src/main.js
// 略去不相关代码
import {registerMicroApps, start } from 'qiankun';
// 定义要整合的微应用列表
const apps = [
{
name: 'vueApp', // 应用的名字
entry: 'http://localhost:10000/', // 默认加载这个html，解析里面的js动态的执行（子应用必须支持跨域，内部使用的是 fetch）
container: '#vue', // 要渲染到的容器名id
activeRule: '/vue' // 通过哪一个路由来激活
},
{
name: 'reactApp',
entry: 'http://localhost:20000/',
container: '#react',
activeRule: '/react'
},
{
name: 'jqApp',
entry: 'http://localhost:5501/qiankun/qiankun-jq/',
container: '#jq',
activeRule: '/jq',
props: { a: 1 } // 父应用向子应用传递参数
}
];
// 注册应用
registerMicroApps(apps);
// 开启应用
start();
// 正常挂载 vue
new Vue({
router,
render: h => h(App)
}).$mount('#app')
1.2 Зарезервируйте узел dom в App.vue и подождите, пока суб-приложение будет загружено и вставлено.
<!-- qiankun-base/src/App.vue -->
<template>
<div>
<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 id="vue"></div>
<div id="react"></div>
</div>
</template>
2. Выполните обработку в трех подприложениях и подготовьтесь к тому, чтобы на них ссылалось родительское приложение qiankun-base.
Согласно соглашению qiankun, три эталонные функции-ловушки жизненного цикла bootstrap/mount/unmount должны быть экспортированы для выполнения, когда родительское приложение загружает дочернее приложение, и родительское приложение добавит его в окно.POWERED_BY_QIANKUNАтрибут используется дочерним приложением, чтобы различать, загружается ли он в данный момент родительским приложением или загружается отдельно. Все подприложения настроены на функции и атрибуты ловушек, а методы обработки в каждом технологическом стеке согласованы.
2.1 Настройка субприложения vue
// qiankun-vue/src/main.js
// 略去不相关代码
let instance = null;
function render(props) {
// props 组件通信
instance = new Vue({
router,
render: h => h(App)
}).$mount('#app') // 这里是挂载到自己的HTML中，基座会拿到这个挂载后的HTML，将其插入进去
}
if (!window.__POWERED_BY_QIANKUN__) { // 如果是独立运行，则手动调用渲染
render();
}
if(window.__POWERED_BY_QIANKUN__){ // 如果是qiankun使用到了，则会动态注入路径
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
// 根据 qiankun 的协议需要导出 bootstrap/mount/unmount
export async function bootstrap(props) {
};
export async function mount(props) {
render(props);
};
export async function unmount(props) { // 卸载时销毁应用
instance.$destroy();
};
// 配置打包 vue.config.js
module.exports = {
devServer: {
port: 10000,
headers:{
'Access-Control-Allow-Origin': '*' // 允许跨域
}
},
configureWebpack: {
output: {
library: 'vueApp',
libraryTarget: 'umd'
}
}
};
2.2 Конфигурация реагирующих подприложений
// qiankun-react/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
function render(){
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
}
if(!window.__POWERED_BY_QIANKUN__){
render();
}
export async function bootstrap(){
}
export async function mount() {
render()
}
export async function unmount(){
ReactDOM.unmountComponentAtNode( document.getElementById('root'));
}
// 配置启动 config-overrides.js
module.exports = {
webpack:(config)=>{
config.output.library = 'reactApp';
config.output.libraryTarget = 'umd';
config.output.publicPath = 'http://localhost:20000/';
return config;
},
devServer:(configFunction)=>{
return function (proxy,allowedHost){
const config = configFunction(proxy,allowedHost);
config.headers = {
"Access-Control-Allow-Origin":'*'
}
return config
}
}
}
2.3 Описание конфигурационного файла webpack
Примечание. В файле конфигурации есть два основных изменения: вспомогательные приложения vue и react одинаковы.
1: "Доступ-Контроль-Разрешить-Происхождение": '*' Роль: поскольку дочернее приложение загружается при выборке родительского приложения, ему необходимо разрешить междоменное
2: output.libraryTarget: 'umd'; Роль: Используйте umd, чтобы сделать файлы, упакованные webpack, более совместимыми при загрузке.
2.4 Настройка субприложения jquery
Обратите внимание, что общий технологический стек микроприложений проекта интеграции основан на одностраничных приложениях, таких как vue/react/angular, в то время как приложения jquery обычно являются многостраничными приложениями. Здесь интегрирована только одна страница.Если приложение jquery с несколькими страницами не подходит для интеграции Qiankun, для его внедрения более целесообразно напрямую использовать iframe.
// qiankun-jq/js/example.js
const render = ($) => {
$('#example').html("Hello, render with jQuery");
return Promise.resolve();
}
(global => {
global['purehtml'] = {
bootstrap: () => {
console.log('purehtml bootstrap');
return Promise.resolve();
},
mount: (prop) => {
console.log('purehtml mount', prop);
return render($);
},
unmount: () => {
console.log('purehtml unmount');
return Promise.resolve();
},
};
})(window);
if (!window.__POWERED_BY_QIANKUN__) { // 如果是独立运行，则手动调用渲染
render($);
}
3. Старт
Введите qiankun-base, qiankun-vue, qiankun-react соответственно, чтобы запустить приложение и просмотреть его в родительском приложении.
Обратите внимание, что если субприложение jquery хочет запуститься, его необходимо переместить в службу nginx.
Ссылаться на: