предисловие
Как Кодер увеличивает свою силу? Сделай событие десять тысяч раз,только знакомый.
Я не знаю, есть ли у вас какой-либо опыт.Я всегда чувствую, что предыдущий код был написан очень низко и вынужденно.Все еще очень весело потратить некоторое время, чтобы бросить и бросить себя.Рефакторинг по-прежнему весело. Городское сооружение из собачьей головы своими руками!
Создайте базовую структуру
Вообще говоря, в средних и тайваньских проектах малых и средних команд преобладает стиль интерфейса, и ряд базовых фреймворков, таких как стили, макеты, маршрутизация, разрешения и т. д., очень универсален. больше времени, а отдача от инвестиций не высока.Высокий, лучший способ - выполнить определенную персонализированную настройку на более зрелых решениях, а эффективность затрат будет очень высокой, поэтому мы также используем архитектуру UmiJS + ANT DESIGN PRO для обновления проекта (предыдущий старый проект был основан на Umi2.0, разработанном с помощью ANT DESIGN PRO 3.0)
Что такое UmiJS?
UmiJS, который по-китайски может произноситься как Umi, представляет собой расширяемую среду интерфейсных приложений корпоративного уровня. Umi основан на маршрутизации и поддерживает как маршрутизацию конфигурации, так и маршрутизацию соглашений, чтобы обеспечить полные функции маршрутизации и соответственно расширить функции. Затем он оснащен системой подключаемых модулей с полным жизненным циклом, охватывающим каждый жизненный цикл от исходного кода до создания продуктов, поддерживающих различные функциональные расширения и потребности бизнеса.
Что такое ANT DESIGN PRO?
Ant Design ProЭто решение для интерфейса/проектирования среднего и внутреннего уровня на уровне предприятия.Основываясь на спецификациях дизайна и основных компонентах Ant Design, оно извлекает типичные шаблоны/бизнес-компоненты/вспомогательные ресурсы дизайна для дальнейшего улучшения процесса проектирования и разработки предприятия. продукты среднего и бэкэнд-уровня, опыт пользователя и дизайнера.
Быстро построить базовую структуру
Мы напрямую используем UmiJS 3.0 + Ant Design Pro 4.0 для создания базового шаблона.
yarn create umi
Select the boilerplate type (Use arrow keys)
❯ ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
app - Create project with a simple boilerplate, support typescript.
block - Create a umi block.
library - Create a library with umi.
plugin - Create a umi plugin.
Скаффолдинг Ant Design Pro будет установлен автоматически.После установки зависимостей базовая структура будет завершена.Конец этой главы.
пользовательский модуль
убрать глобализацию
Вообще говоря, интернационализация Ant Design Pro не имеет большого значения для большинства команд, поэтому ее можно сначала удалить, а потом добавить, если возникнет необходимость.
Сначала удалите плагин @umijs/plugin-locale, затем удалите все динамические коды, связанные с formatMessage, в проекте, удалите файлы, связанные с i18n, и измените их на обычную копию.
Если вы последуете приведенному выше шаблону и удалите конфигурацию @umijs/plugin-locale, проект сообщит об ошибке, просто исправьте ее в соответствии с содержанием ошибки.
Добавить среду разработки
Существует три набора обычных сред разработки, а именно dev (среда разработки), test (тестовая среда) и prod (производственная среда). Если у вас достаточно ресурсов, вы можете добавить предрелизную среду.
Umi может различать разные среды, чтобы указать конфигурацию с помощью переменной среды UMI_ENV.
// .umirc.js 或者 config/config.js
export default { a: 1, b: 2 };
// .umirc.local.js 或者 config/config.local.js 开发环境
export default { c: 'local' };
// .umirc.test.js 或者 config/config.test.js
export default { b: 'cloud', c: 'cloud' };
При настройке файлов с несколькими средами помните, что config.js должен существовать, иначе произойдет сбой.
В то же время измените команду, чтобы запустить команду
"start:dev": "cross-env REACT_APP_ENV=dev MOCK=none umi dev",
"build:test": "cross-env UMI_ENV=test umi build",
"build:prod": "cross-env UMI_ENV=prod umi build",
Таким образом, вы можете запускать разные команды в разных средах для создания соответствующих версий. Например, интерфейс между тестовой средой и онлайн-средой несовместим, или некоторые функции необходимо использовать в тестовой среде.
Ведь базовый фреймворк после связки UmiJS+Ant Design Pro очень зрелый.Вы можете просто добавить какие-то функции для развития бизнеса.Если вам нужно настроить, вы можете добавить или удалить функции самостоятельно.
Представлен микроинтерфейс qiankun
Раньше у Nuggets была отдельная тема для микроинтерфейса, и многие Nuggets публиковали связанные статьи и демонстрации. Здесь мы представим использование проекта после преобразования.
Перед использованием микрофронтенда рекомендуется посмотреть предыдущий пост в блоге — адрес доставки:Зачем нужны микрофронтенды. Убедившись, что ваша команда действительно существует в этих ситуациях, вы можете сопоставить шаблон разработки с настройкой вашего бизнеса.
Во-первых, нам нужно преобразовать предыдущий базовый шаблон в 2 набора, которые соответственно используются в качестве основного шаблона подпроекта.
Основная конфигурация приложения
// 注册子应用
export default {
qiankun: {
master: {
apps: [
{
name: 'app1', // 唯一 id
entry: '//localhost:7001', // html entry
},
{
name: 'app2', // 唯一 id
entry: '//localhost:7002', // html entry
},
],
},
},
};
// 装载子应用
export default {
routes: [
{
path: '/',
component: '../layouts/index.js',
routes: [
{
path: '/app1',
component: './app1/index.js',
routes: [
{
path: '/app1/user',
component: './app1/user/index.js',
},
],
},
{
path: '/',
component: './index.js',
},
],
},
],
}
Удалите шаблон макета и преобразуйте его, как показано выше. В целом меню навигации переведено в режим Nav, а все последующие модули контента отданы подприложениям, так что основное игровое пространство можно передать каждому подприложению для управления.
Конфигурация вспомогательного приложения
export default {
qiankun: {
slave: {}
}
}
Конфигурация вспомогательного приложения относительно проста, просто добавьте приведенный выше код для регистрации подключаемого модуля.
Для шаблона подприложения удалите все модули заголовка и сохраните модуль боковой маршрутизации, поэтому, когда подприложение разрабатывается независимо, оно может иметь свою максимальную настройку и может разрабатываться независимо.
Когда подприложение загружается в основное приложение, оно выглядит так, как показано на следующем рисунке:
После того, как основное приложение загрузит подприложение, последующий рендеринг интерфейса может быть передан подприложению для его собственного управления.
Настройка среды разработки и производства
Так как это микро-фронтенд, невозможно одновременно запустить основную и подсистемы, что не соответствует концепции микро-фронтенда, поэтому вводить локальный хост определенно ненаучно, но когда проект импортируется локально, иногда возникают междоменные проблемы.
export default {
qiankun: {
master: {
apps: [
{
name: 'devops', // 唯一 id
entry: '/qiankun/devops/index.html', // html entry
},
],
},
},
}
proxy: {
dev: {
'/qiankun/': {
target: 'https://www.cookieboty.com',
changeOrigin: true,
pathRewrite: { '^': '' },
},
},
}
Все подприложения публикуются под шлюзом qiankun, и собственная идентификация подприложения может быть передана через прокси.Когда основное приложение разрабатывается локально, подприложение может быть загружено и доступно в обычном режиме.
Что касается других деталей, вы можете обратиться к плагину qiankun на официальном сайте, чтобы сформулировать шаблон, который подходит для вашего бизнеса.Я не буду здесь подробно рассказывать.Если есть какие-то непонятные места, пожалуйста, оставьте сообщение для обсуждения.
Преобразование разрешения маршрутизации
Проверка разрешений маршрутизации, которая поставляется с UmiJS, приведет страницы, которые не соответствуют разрешениям пользователя, к пустым или другим страницам.Давайте внесем здесь небольшую модификацию и представимДинамическая маршрутизация и меню, если у пользователя нет этого разрешения, меню и маршрутизация не будут доступны.
// app.ts
function Routes(routes, userinfo) {
let routesObject = {};
routes.forEach(route => {
if (route.childs && route.childs.length > 0) {
routesObject = Object.assign(routesObject, Routes(route.childs, userinfo));
}
});
return routesObject;
}
export async function render(oldRender) {
window.oldRender();
}
const getRoutes = (routes, newRoutesList) => {
const routesList = [];
routes.forEach(route => {
if (route.routes && route.routes.length > 0) {
route.routes = getRoutes(route.routes, newRoutesList);
}
if (newRoutesList[route.path]) {
routesList.push(route);
}
});
return routesList;
};
export async function patchRoutes(routes) {
const userinfoData = await getUserInfo()
const userinfo = userinfoData.data
const {data} = await getTree()
newRoutes = Routes(data.childs, userinfo);
if (newRoutes) {
routes[0].routes = getRoutes(routes[0].routes, newRoutes);
window.g_routes = routes;
}
}
Проще говоря, он динамически получает маршрут из фона, а затем сопоставляет свой собственный маршрут для фильтра, и отфильтровывает соответствующий маршрут и повторно изменяет g_routes в patchRoutes, что не является динамическим маршрутом в истинном смысле. Это можно считать скорым решением.
напиши в конце
Когда учащиеся увидели пример диаграммы, подумали ли они о серии DevOps?
Правильно, я, Ху Хансан, снова вернулся,Продолжайте, следите за обновлениями.
Полный спектр сообщений в блоге
внутренний модуль
- DevOps — использование Gitlab Api (завершено, нажмите, чтобы перейти)
- DevOps — создание базовой платформы DevOpsБазовая конструкция платформы, часть 1 | Базовая конструкция платформы, часть II | Базовая конструкция платформы Далее
- DevOps — сборка конвейера Gitlab CI
- DevOps — Jenkins Pipeline Builds
- DevOps — использование Docker
- DevOps — проектирование задач по выпуску
- DevOps — проверка кода застряла
- DevOps — мониторинг качества обслуживания узлов
Интерфейсный модуль
- DevOps — основные шаблоны H5
- DevOps — разработка React-проектов