Знакомство с Уми
Umi — это нижний интерфейсный фреймворк Ant Financial.Я использую этот фреймворк уже некоторое время, но в Интернете очень мало статей, связанных с umi, особенно для версии 3.x, в этой статье будет кратко представлен umi фреймворк.
Начиная с версии 3.0 их слоган был изменен наПодключаемая среда интерфейсных приложений корпоративного уровня, Концепция подключаемых модулей значительно улучшает масштабируемость всей инфраструктуры umi, а подключаемые модули позволяют платформе поддерживать различные функциональные расширения и потребности бизнеса. Можно сказатьплагинэто душа уми
Официальный документ веб-сайта описывает 6 основных функций Umi:
- 🎉 Расширяемый, Umi реализует полный жизненный цикл и делает его подключаемым, а внутренние функции Umi также дополняются подключаемыми модулями. Кроме того, поддерживаются подключаемые модули и наборы подключаемых модулей для удовлетворения потребностей в многоуровневости функциональных и вертикальных доменов.
- 📦 Из коробки Umi имеет встроенную маршрутизацию, сборку, развертывание, тестирование и т. д., и вы можете начать разработку только с одной зависимостью. Он также предоставляет интегрированный набор плагинов для React с богатыми функциями, которые могут удовлетворить 80% ежедневных потребностей в разработке.
- 🐠 Уровень предприятия, подтвержденный более чем 3000 внутренних проектов Ant, а также Ali, Youku, NetEase, Fliggy, Koubei и другими проектами компании, заслуживает доверия.
- 🚀 много саморазвития, содержащее упаковку компонентов микро-фронта, инструмент документации, библиотеку запросов, библиотеки хуков, поток данных и т. д., чтобы удовлетворить ежедневные потребности окружающих проектов.
- 🌴 Полная маршрутизация, поддерживает как маршрутизацию конфигурации, так и маршрутизации конвенции, при сохранении полноты функций, таких как динамическая маршрутизация, вложенная маршрутизация, маршрутизация разрешений и т. Д.
- 🚄Глядя в будущее, отвечая потребностям, мы не перестанем изучать новые технологии. Например, ускорение dll, современный режим, webpack @ 5, автоматический внешний, без сборщика и т. Д.
Судя по личному опыту использования, umi действительно зрелый фреймворк, он знает, как избавить нас от проблем на фронтенде, и очень удобен в использовании.
правда из коробки
В чем разница между umi и приложением create-реагировать? Большинство студентов, изучающих интерфейс, пытались использовать cra для создания проекта React.Настройка модулей typescript/less/css всегда занимает много времени, а также поддержка React Router/Redux и т. д. Много времени уходит на За несколько дней umi, инфраструктура интерфейсных приложений корпоративного уровня, уже создала для нас множество функций, обычно используемых во фронтенд-разработке, что сэкономило нам много времени на настройку и сделало его действительно превосходным. из коробки.
воплощать в жизньnpx @umijs/create-umi-appИнициализированный проект реагирования, естественно, поддерживает модули typecsript, less и css, а также интегрирует antd и dva (саморазработанное решение Alibaba для потока данных) для предоставления функций, обычно используемых разработчиками, таких как интернационализация, разрешения, поток данных и маршрутизация конфигурации. сэкономить много времени проекта инициализации.
традиционное мышление
При использовании umi framework легко обнаружить, что многие его вещи условны. Так называемая конвенция означает, что определенного эффекта можно добиться, разрабатывая по оговоренной методике, а средний процесс завершается за нас фреймворком, который особенно подходит для нашей ленивой разработки.
- Создайте каталог локалей для интернационализации
- Создайте каталог моделей, чтобы иметь поток данных
- Создайте фиктивный каталог и создайте макет данных
- Создайте файл access.ts, чтобы иметь политику разрешений.
- ...
Это выглядит очень черным ящиком и очень круто.На самом деле, этот метод очень полезен для унификации стиля командного кода.Он напрямую ограничивает режим организации каждого каталога на уровне фреймворка, что удобно для обслуживания команды.
Однако недостатки вполне очевидны.Гибкость не так высока, как у типа конфигурации, потому что его можно развивать только по определенному режиму.Если изначально согласованный метод не соответствует потребностям бизнеса, необходимо добавить дополнительные плагины umi быть разработан, чтобы волшебным образом изменить исходные функции. Кроме того, разработка условности очень особенная по сравнению с другими фреймворками.Новым студентам требуется время, чтобы прочитать официальную документацию веб-сайта, чтобы понять правила условности.
подключаемая система
Изменения в версии 3.x
- Полностью переписанный код и документация, охват 80%+, размер ~100M
- Официальные плагины, наборы плагинов и лучшие практики
- Умнее (автоматическое распознавание модулей CSS, улучшения маршрутизации по соглашению и т. д.)
- Импортируйте «все» из Umi. Расширить возможность импорта из umi через плагины
- node_modules идет компиляция Babel
- ...
Заинтересованные друзья могут посмотреть очень подробную статью Юнь Цяня.
Выпущен UMI 3, подключаемый модуль интерфейсных приложений корпоративного уровня.
Основы Уми
Здесь представлено введение в структуру каталогов проекта umi и наиболее характерную маршрутизацию по соглашению.
Структура каталогов
Наиболее важным файлом в нем является файл конфигурации .umirc.ts, в котором можно настроить различные функции и плагины.Уми поддерживает разные среды для чтения разных файлов конфигурации
конвенционная маршрутизация
Обычная маршрутизация также называется файловой маршрутизацией, что означает, что не требуется ручной настройки, а маршрутизируется файловая система.src/pagesКаталог и файл, а также их имена анализируют конфигурацию маршрутизации, то есть позволяют umi помочь нам сгенерировать файл конфигурации маршрутизации в соответствии с согласованной структурой каталогов.
Например, следующая файловая структура:
└── pages
├── index.tsx
└── users.tsx
└── setting
└── index.tsx
Вы получите следующую конфигурацию маршрутизации,
[
{ exact: true, path: '/', component: '@/pages/index' },
{ exact: true, path: '/users', component: '@/pages/users' },
{ exact: true, path: '/setting', component: '@/pages/setting/index' }
]
Следует отметить, что файлы, удовлетворяющие любому из следующих правил, не будут зарегистрированы как маршруты.
- Файл или каталог, начинающийся с . или _
- Файлы определения типов, оканчивающиеся на d.ts
- Тестовые файлы, оканчивающиеся на test.ts, spec.ts, e2e.ts (для файлов .js, .jsx и .tsx)
- компоненты и каталоги компонентов
- utils и каталог util
- Не файл .js, .jsx, .ts или .tsx
- Содержимое файла не содержит элементов JSX
динамическая маршрутизация
src/pages/users/[id].tsxСгенерированный соответствующий путь/users/:id
Вложенные маршруты
└── pages
└── users
├── _layout.tsx
├── index.tsx
└── list.tsx
Сгенерированный соответствующий путь
[
{ exact: false, path: '/users', component: '@/pages/users/_layout',
routes: [
{ exact: true, path: '/users', component: '@/pages/users/index' },
{ exact: true, path: '/users/list', component: '@/pages/users/list' },
]
}
]
Глобальный макет
src/layouts/index.tsx
Сгенерированный соответствующий путь
[
{ exact: false, path: '/', component: '@/layouts/index',
routes: [
{ exact: true, path: '/', component: '@/pages/index' },
{ exact: true, path: '/users', component: '@/pages/users' },
],
},
]
404 маршрутизация
src/pages/404.tsx
Сгенерированный соответствующий путь
[
{ exact: true, path: '/', component: '@/pages/index' },
{ exact: true, path: '/users', component: '@/pages/users' },
{ component: '@/pages/404' },
]
Расширенные свойства маршрута
С самого начала umi 3.0 поддерживает расширение маршрутизации на уровне кода за счет экспорта статических свойств. Например:
function HomePage() {
return <h1>Home Page</h1>;
}
HomePage.title = 'Home Page';
HomePage.redirect = '/exception';
HomePage.wrappers = ['@/components/Permission'];
export default HomePage;
заголовок, перенаправление, обертки будут добавлены к конфигурации маршрутизации (Обратите внимание, что если вы используете подключение для экспорта компонентов, свойства должны быть записаны на внешнем компоненте после подключения)
{
"path": "/home",
"title": "Home Page",
"exact": true,
"component": …
"redirect": "/exception",
"wrappers": [require('@/components/Permission').default]
}
Но не стоит недооценивать эту функцию, экспортируемый атрибут перенаправления может помочь нам перенаправить, а обертки могут помочь нам реализовать высокоуровневые компоненты для проверки разрешений и другой обработки..
Плагин Уми
От компиляции, упаковки до cli, Umi выполняет эти функции, запуская плагины. Для своего собственного основного пакета он отвечает за управление регистрацией и планированием этих плагинов. Вы можете подумать, что его интеграционное ядро очень маленькое. плагин, даже многие встроенные API не могут быть вызваны. Можно сказать, что плагин заставляет работать все ядро, и идея микроядра воплощена хорошо.
В каких сценариях необходимо использовать подключаемый модуль Umi?
Когда функция включает в себя различные части внешнего интерфейса (например, HTML, CSS, JS) или включает логику во время выполнения или во время сборки, и вы хотите иметь возможность использовать ее минимально и легко предоставлять другим проектам для повторного использования. Тогда вам следует использовать плагины для реализации вашей функциональности.
Механизм подключаемых модулей umi предоставляет различные интерфейсы на разных этапах и частях проекта, так что подключаемый модуль может выполнять операции, необходимые для разных частей на разных этапах веб-разработки.
Например, следующие примеры: Добавьте подключаемый модуль веб-пакета или измените конфигурацию веб-пакета во время сборки. Добавьте содержимое в HTML. Обработайте продукт сборки после завершения сборки. Получите конфигурацию, соответствующую приложению и маршруту.
Назначение плагина Umi
Поскольку фреймворк не может удовлетворить требования всех, лучше всего использовать плагины для удовлетворения различных потребностей бизнеса и различных технических реализаций.
- Удовлетворение различных потребностей бизнеса
Например, беспроводной бизнес будет уделять больше внимания производительности, поэтому вы можете выбрать подключаемый модуль, который сокращает время реакции, подключаемый модуль скорости, решение с высоким разрешением, fastclick и т. д., чтобы сформировать набор подключаемых модулей.
- Знакомьтесь с различными техническими реализациями
В большой команде с богатыми типами бизнеса допускаются разные варианты. Например, поток данных, у всех выбор может быть разным, некоторые используют dva, некоторые используют хуки, некоторые используют mobx, а некоторые самостоятельно разработанные наборы; такие как схемы патчей, есть обычная версия, экстремальная версия и максимальная версия.
Плагин Umi с тремя состояниями
Выполняется средой узлавремя компиляции, выполняется в браузереВремя выполнения, вспомогательный слой пользовательского интерфейсаво время редактирования
Большинство систем подключаемых модулей учитывают только время компиляции узла, а подключаемый модуль umi плюс время выполнения и поддержка редактирования расширяют возможности подключаемого модуля.
Umi Ui — это локальная рабочая среда для исследований и разработок, которая позволяет пользователям настраивать проекты и управлять ими через визуальный интерфейс.
Использование плагина Umi в проекте
Все плагины Umi соответствуют идентификатору и ключу.
id — это сокращение от пути, а ключ — это уникальное значение для конфигурации после дальнейшего упрощения.
в файле конфигурации.umirc.tsНастройте параметры плагина на ключевой атрибут плагина
Уми автоматически обнаружит зависимости и devDependencies Плагины umi в , те, которые соответствуют этим именам, будут автоматически импортированы
Разработка плагина Umi
Мы можем использовать измененный код для упаковки конфигурации, изменения кода запуска, согласования структуры каталогов, изменения HTML и т. д., написав собственные плагины. С помощью подключаемого модуля umi вы можете в основном изменить 70% функций внутри umi, чтобы удовлетворить потребности бизнеса.
Плагин Umi на самом деле является модулем JS, вам нужно определить метод инициализации плагина и экспортировать его по умолчанию.
export default (api) => {
// your plugin code here
};
Я разработал его для официального плагинаAPIна следующие категории:
- Атрибуты
- Переменные среды, конфигурация, пути и т. д.
- функция функция
- Вспомогательные функции, журналы, получение маршрутов, запись временных файлов, проверка плагинов и т. д.
- Получите номер порта, перезапустите службу и т. д.
- Крючки жизненного цикла
- API класса событий, отслеживание таких событий, как запуск службы, приостановка службы и изменение маршрута (нет необходимости возврата)
- Изменить API класса, изменить конфигурацию, изменить маршрутизацию (изменить первый параметр)
- Добавьте API класса, добавьте заголовок Html и другие API, которые должны возвращать содержимое (массив).
Используйте эти API для разработки плагина Umi
посмотреть пример:
Предыстория: Производительность в маршрутизации по соглашению Umi — это основная маршрутизация, которая соответствует индексной маршрутизации, то есть доступhttp://localhost:8000На самом деле доступ к странице src/pages/index.Иногда мы сталкиваемся с ситуациями в процессе разработки и хотим изменить основной маршрут.Например, мы хотим маршрут/доступ к src/pages/home.
export default function (api: IApi) {
// 打印日志
api.logger.info('use plugin');
// 修改html
api.modifyHTML(($) => {
$('body').prepend(`<h1>hello umi plugin</h1>`);
return $;
});
// 描述插件的 id、key、配置信息、启用方式等
api.describe({
key: 'mainPath',
config: {
schema(joi) {
return joi.string();
},
},
});
if (api.userConfig.mainPath) {
// 修改路由文件
api.modifyRoutes((routes: any[]) => {
return resetMainPath(routes, api.config.mainPath);
});
}
}
После разработки плагина его можно внедрить и использовать в проекте:
import { defineConfig } from 'umi';
export default defineConfig({
plugins: [require.resolve('../lib')],
mainPath: '/home'
});
После публикации пакета npm в соответствии с соглашением об именах нет необходимости настраивать плагины.