Практика микро-фронтендов привлекает все больше и больше внимания.Они имеют относительно большое прикладное значение на платформе, которая интегрирует ресурсы.Новые требования нужно добавлять только путем добавления подприложений, и нет необходимости управлять громоздкими, связанные одиночные приложения. . Неограниченные технологические стеки также могут облегчить постепенную модернизацию старых микро-интерфейсных проектов. Описание концепции микро-фронтенда и ценности приложения можно прочитатьэтот перевод.
single-spa
Используя single-spa, подприложение должно завершить жизненный цикл, главное приложение для переключения динамически монтировать и размонтировать подприложение, реализованное в соответствии с изменением местоположения приложения.
Односпартамент Hijack Измените местоположение события, для обеспечения работы выполнения приложений подстройки, а затем захватить события изменения URL-адреса по приложениям подсистемы маршрутизации.
Что делает qiankun на основе односпального спа
html-entry
Как загрузить статические ресурсы подприложения, один из способов — использовать js-entry
Поскольку имя файла js меняется каждый раз, когда пакет упаковывается, в сообществе принято сотрудничать с плагином webpack.stats-webpack-pluginВ пакете сгенерированный файл для вывода файла manifest.json. Также необходимо изменить метод упаковки, чтобы css был не только статическим файлом, но и помещался в js одновременно.
plugins: [
new StatsPlugin('manifest.json', {
chunkModules: true,
exclude: [/node_modules[\\\/]react/]
})
]
Затем запросите этот manifest.json через ajax, чтобы получить имя и путь статического ресурса для загрузки в активы.
Полную демонстрацию см. здесь.vue-single-spa
qiankun сохраняет этот способ ввода JS
registerMicroApps([{
name:'subApp1',
entry:{ html: '', scripts: ['//abc.alipay.com/index.js'], css: ['//abc.alipay.com/index.css']}
}])
В то же время можно использовать и HTML Entry.Автор инкапсулирует реализацию HTML Entry вimport-html-entryсередина
registerMicroApps([
name:'subApp1',
entry: '//abc.alipay.com/index.html'
])
Подприложение должно быть упаковано в формате umd.Пакет umd позволяет выполнять код одновременно в среде Node и в среде браузера.Имя — это имя подприложения в package.json.
configureWebpack:{
output: {
// 把子应用打包成 umd 库格式
library: `${name}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${name}`,
}
}
Переменная окна окончательного упакованного файла будет помечена подприложением.Главное приложение загружает подприложение и использует глобальный экспорт в umd для получения экспорта подприложения.
изоляция стиля против изоляции js
«Браузер выполнит рефакторинг всей CSSOM для вставки и удаления всех таблиц стилей, чтобы достичь цели вставки и удаления стилей. В методе ввода HTML после удаления приложения структура HTML будет удалена напрямую, тем самым автоматически удаляя таблицу стилей It." Это решает проблему взаимодействия стилей между подприложениями.
Чтобы изолировать глобальные переменные подприложений, qiankun использует Proxy для создания песочницы JS, которая сохраняет снимки глобальных переменных во время начальной загрузки и монтирования, а затем восстанавливает предыдущее состояние, когда приложение переключается на обработку глобальных переменных.
Взаимодействие компонентов родитель-потомок
Параметр props предоставляется в registerApplication, и подприложения могут получать значение props в течение жизненного цикла.
export async function mount(props) {
console.log('props from main framework', props);
render();
}
У автора поверхностное понимание принципа реализации и исходного кода, более подробные принципы реализации qiankun можно найти в этой статье автора фреймворка:Вероятно, самое полное решение для микроинтерфейса, которое вы когда-либо видели., и Цянькуньисходный код.
Модификации демо qiankun
qiankun предоставляет демонстрации React, Vue и Angular, Поскольку текущий стек технологий в основном представляет собой vue, я вынул демонстрации как основного приложения, так и подприложений, а затем внес некоторые изменения в соответствии с некоторыми проблемами в реальном использовании.демо-адрес здесь.
Модификация publicPath
После того, как проект, пересобранный с помощью vue-cli, подключен к qiankun, обнаруживается, что некоторые статические ресурсы под пабликом не могут быть загружены.В qiankun указан publicPath, но эта конфигурация не действует в vue.
if (window.__POWERED_BY_QIANKUN__) {
// eslint-disable-next-line no-undef
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
Нашел такой в Vue-CliissuesЭто еще не решено.В файле vue.config.js в моей демонстрации измените publicPath, чтобы к общедоступным ресурсам можно было нормально обращаться в состоянии разработки.
publicPath:'//localhost:7101'
Доступ к основному приложению и подприложению vue-router
В практических приложениях маршрутизация требуется как для основного приложения, так и для подприложений.Когда основное приложение переключает подприложения, оно использует window.history.pushState, который может быть перехвачен фреймворком микроинтерфейса для монтирования подприложений.
<template>
<div class="menu" @click="goto('vue app1', '/demo1')">菜单1</div>
</template>
<script>
methods: {
goto(title, href) {
window.history.pushState({}, title, href);
}
}
</script>
Учитывая, что подприложение на портале может иметь общедоступную боковую панель, в основное приложение добавляется обработка ', а содержимое можно настраивать.
const routes = [
{
path: '/demo1*',
name: 'demo1',
component: () => import(/* webpackChunkName: "about" */ '../components/demo1')
},
]
В подприложении нет специальной обработки маршрута, вам нужно установить historyApiFallback в devServer в true, чтобы избежать 404 при обновлении маршрута. Часть, с которой инфраструктура микро-интерфейса помогает нам справиться при переключении маршрутов, заключается в том, чтобы гарантировать, что маршрутизатор суб-приложения будет выполняться после того, как суб-приложение будет смонтировано.
Взаимодействие приложений родитель-потомок
qiankun предоставляет метод связи между основным приложением и вспомогательным приложением, но если вы хотите реализовать вспомогательное приложение для получения динамического содержимого основного приложения, вам необходимо выполнить дополнительную обработку. В сочетании с vuex для динамического получения данных основного приложения. Переданное сообщение выглядит следующим образом:
let msg = {
data: {
userInfo: store.state.userInfo,
fns:[
function getMicro(){
return store.state.micro
}
]
}
};
Смонтируйте этот метод глобально в дочернем приложении, после чего вы сможете динамически получать данные родительского приложения через this.$getMicro. Если есть необходимость реализовать связь между субприложением и субприложением, субприложение может передать событие вышестоящему основному приложению, а затем отправить его другому субприложению.
export async function mount(props) {
console.log(props.data.userInfo)
Array.isArray(props.data.fns) && props.data.fns.map(i => {
console.log(i)
Vue.prototype[`$${i.name}`] = i
});
render();
}
Подробнее о передаче ресурсов между родителем и потомком, дочернем приложении, передающем данные родительскому приложению,wl-micro-frontendsКонкретная демонстрация приведена в .
Что касается связи между суб-приложениями и суб-приложениями, то еще не было найдено ни одной хорошей практики.Система с микроинтерфейсной архитектуройТакой пример приведен в реализации связи через основное приложение.
Обработка под IE
Демо qiankun не может нормально отображаться под IE 11. В демке я пытался закрыть jsSandbox и добавил pollyfill в fetch, чтобы интерфейс под IE нормально отображался, но функция изоляции js тоже отключена.
Платформа, реализованная Ant Financial с помощью qiankun, несовместима с IE и предложит открыть ее в других браузерах.
Быстрые леса
Учитывая, что в реальном использовании может быть много подприложений, вы можете использовать плагин vue-cli3 для быстрого создания подприложений и родительских приложений, которые имеют доступ к qiankun. Ссылаться наvue-cli-plugin-qiankunЧтобы добиться быстрого доступа к qiankun, я также сделал два плагина скаффолдинга, включая модификацию демо.Чтобы построить проект, аналогичный приведенному выше демо, вам нужно всего лишь сделать следующее:
Метод генерации основного приложения
vue create portal
cd portal
vue add vue-cli-plugin-qiankun-portal
Как создавать подприложения
vue create demo1
cd demo1
vue add vue-cli-plugin-qiankun-microapp
Введите порт в появившейся подсказке, например: 7101.
После подачи npm i и npm run соответственно запускается демонстрационный проект.
нерешенные вопросы
1. Способ связи между подприложениями, как подприложение может получить обновление данных в основном приложении без ручного вызова метода
2. Когда основное приложение отлаживается с помощью вспомогательного приложения, devTools не может отлаживать содержимое вспомогательного приложения.
разное
Если ваше основное приложение и подприложение используют Nuxt, доступ Nuxt к сообществу решений qiankun имеет команду, работающую над этим, вы можете обратиться кnuxt-micro-frontend.
Справочные статьи и проекты
Вероятно, самое полное решение для микроинтерфейса, которое вы когда-либо видели.
Реализация стандартной архитектуры микроинтерфейса в Ant