Umijs.org

Прошло полгода после выпуска umi 1.0. За это время umi провела много рефакторинга и улучшений, 438 коммитов, 20 бета-версий. И сегодня мы очень рады, что она выпустила версию 2.0 и позиционируется как подключаемая среда для приложений реагирования на уровне предприятия.

Что такое уми?

Он основан на маршрутизации, поддерживает обычную маршрутизацию наподобие next.js и различные расширенные функции маршрутизации, такие как загрузка по требованию на уровне маршрутизации. Затем с полной системой плагинов, охватывающей каждый жизненный цикл от исходного кода до создания продукта, umi может поддерживать различные функциональные расширения и бизнес-потребности, в настоящее время umi имеет почти 50+ плагинов как в сообществе, так и внутри компании.

umi - это базовая интерфейсная структура Ant Financial, которая прямо или косвенно обслуживает более 600 приложений, включая java, node, мобильное приложение, гибридное приложение, приложение с чистыми интерфейсными ресурсами, приложение CMS и многое другое. umi очень хорошо обслуживает наших внутренних пользователей и надеется, что он также сможет хорошо обслуживать внешних пользователей.

Он имеет следующие особенности:

  • 📦 Из коробки ， встроенная функция реагирования 、 реагирующий маршрутизатор и т. Д.
  • 🏈 Такие как Next.js и полнофункциональные соглашения о маршрутизации, также поддерживают настроенную маршрутизацию.
  • 🎉 Полная система плагинов, охватывающая все жизненные циклы от исходного кода до производства.
  • 🚀 Высокая производительность, поддержка PWA, разделение кода на уровне маршрута и т. Д. Через плагин
  • 💈 Поддержка статического экспорта, адаптация к различным средам, таким как консольное приложение, мобильное приложение, яйцо, кошелек Alipay и т. Д.
  • 🚄 Быстрый запуск разработчика, поддержка включения dll и hard-source-webpack-plugin с конфигурацией
  • 🐠 Совместимость с IE9 на основе umi-plugin-polyfills
  • 🍁 Поддержка TypeScript, включая определение d.ts и umi test
  • 🌴 Глубокая интеграция с два, поддержка утиного каталога, автоматическая загрузка модели, разбиение кода и т. Д.

Что нового в версии 2.0?

Легкое ядро ​​и удобство для новичков

umi @ 1 имеет множество встроенных оптимизаций, таких как компиляция по требованию, загрузка по требованию, eslint, pwa, antd и т. д. Эти решения могут улучшить опыт разработки и производственный код, а также снизить стоимость изучения umi.

Итак, umi @ 2 по умолчанию отключает многие оптимизации:

  • Компилировать по запросу
  • Загрузка по запросу
  • serviceWorker
  • antd
  • …

Затем эти функции реализуются с помощью плагинов, которые можно включать по мере необходимости, чтобы обеспечить легкость ядра umi. В то же время сборка по умолчанию создает только index.html, umi.js и umi.css, что более удобно для новичков.

Новая система плагинов

Система плагинов umi @ 1 слишком мощная, все можно сделать и изменить. Итак, umi @ 2 реорганизовал механизм плагина, наложил множество ограничений, разъяснил, что можно сделать, а что нельзя, и предоставил более удобный API плагина.

В то же время эта система плагинов прошла внутреннюю проверку в нашей компании. Отличная внутренняя структура Bigfish, состоящая из более чем 30 плагинов, хорошо обслуживает Ant Financial, включая такие функции, как бекон, развертывание с помощью java / node, производительность, интеграция служб, разрешения и т. Д.

umi-plugin-реагировать

Плагин для umi @ 1 немного шаткий. Обычно при использовании umi требуется установить несколько плагинов. Обновление и использование проблематично, поэтому мы предоставляем umi-plugin-react. umi-plugin-react - это набор плагинов, аналогичный концепции пресетов в babel.

В настоящее время в umi-plugin-react есть 13 плагинов, в том числе:

  • Два интегрировать
  • Antd интегрировать
  • Модификация маршрутов
  • IE (9/10/11) совместимость
  • Традиционное решение i18n
  • Переключить реакцию на preact или другие библиотеки
  • Разделение кода на уровне маршрута, и уровень может быть настроен
  • Boost dev с помощью dll
  • Ускорьте разработку с помощью hard-source-webpack-plugin
  • Включить PWA
  • Включить решение HD
  • Включить fastClick
  • Подтверждение названия поддержки

Пожалуйста, проверьте umijs.org/plugin/umi-plugin-react.html для получения подробной информации.

Webpack @ 4 + babel @ 7 +…

Мы обновили основные зависимости до последней версии, такие как webpack @ 4, babel @ 7, less @ 3, postcss @ 7, typescript @ 3 и т. Д., А также улучшили производительность сборки.

И мы использовали webpack-chain для расширения конфигурации webpack, что является более стабильным решением, чем предыдущий webpack.config.js.

e.g.

export default {
  chainWebpack(config, { webpack }) {
    // Set alias
    config.resolve.alias.set('a', 'path/to/a');
    // Remove the default progress bar
    config.plugins.delete('progress');
  },
}

umi generate

umi @ 2 поддерживает команду umi generate (псевдоним umi g) для быстрого создания файлов.

$ umi g page index

И umi generate расширяется. Например, umi-plugin-dva расширяет ключ dva:model, поэтому мы можем сгенерировать модель dva с umi g dva:model global.

Прочие улучшения

  • Настройка переменных среды с помощью .env и .env.local
  • Поддерживает расширение маршрутной информации обычной маршрутизации с помощью комментариев в формате yaml
  • Улучшенная страница umi dev 404
  • Рефактуйте umi/dynamic с помощью react-loadable
  • Улучшить umi test, позволяет указывать тестовые файлы и передавать параметры в jest-cli
  • Улучшение umi test, поддерживает псевдонимы веб-пакетов
  • Улучшение umi dev, поддерживает настройку сертификатов https
  • Улучшение umi dev, извлечение стилей, затем использование css-hot-loader для горячих обновлений в соответствии с umi build
  • Включите es5ImcompatibleVersions по умолчанию.
  • Удалите высокопроизводительный потребительский плагин с учетом регистра-путей-webpack-plugin
  • Добавьте псевдоним webpack @, который указывает на каталог src
  • Используйте локальный umi для запуска, если он найден

Начиная

Начать очень просто,

# Install deps
$ yarn global add umi # OR npm install -g umi
# Create application
$ mkdir myapp && cd myapp
# Create page
$ umi generate page index
# Start dev server
$ umi dev
# Build and deploy
$ umi build

Посетите umijs.org/guide/getting-started.html для получения более подробной информации или посмотрите 10-минутную видео-версию umi.

Переход с umi @ 1

В настоящее время antd-pro и antd-admin обновлены до umi @ 2. Если вы хотите обновиться, просмотрите документацию или видео.

Сообщество

Telegram Group

T.me/joinchat/G0DdHw-44FO7Izt4K1lLFQ

Наконец

Спасибо всем внутренним и внешним людям, которые участвовали в создании umi и использовании umi в проекте. umi только начинается, надеюсь, вы сможете улучшить его вместе, до встречи на Github! 👋