Выпущен umi 2.0, подключаемый фреймворк приложений для реагирования корпоративного уровня.

внешний интерфейс JavaScript React.js Webpack

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

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

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

umi — базовая интерфейсная платформа Ant Financial. Она прямо или косвенно обслуживает более 600 приложений, включая Java, Node, H5 Wireless, автономные (гибридные) приложения, чистые интерфейсные активы, CMS-приложения и т. д. Он хорошо обслуживал наших внутренних пользователей и, надеюсь, сможет обслуживать и внешних пользователей.

Он включает в себя следующие функции:

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

Что улучшилось в 2.0?

Легкое ядро ​​​​+ подходит для новичков

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

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

  • компилировать по запросу
  • нагрузка по требованию
  • serviceWorker
  • antd
  • ...

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

Совершенно новый механизм плагинов

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

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

umi-plugin-react

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

В настоящее время существует 13 встроенных плагинов, в том числе:

  • два интегрирования
  • и интеграция
  • модификация маршрутов
  • Совместимость в один клик с ie9
  • Обычная схема i18n
  • Переключить реакцию на preact или другую библиотеку, подобную реакции
  • Загрузка по запросу на уровне маршрутизации, настраиваемый уровень маршрутизации по запросу
  • Ускорение с помощью dll
  • Ускоряйтесь с hardSource
  • pwa
  • Включить схему HD
  • включить fastClick
  • Название конфигурации поддержки

Видеть:ты фанат accept.org/this/plugin/u…

webpack@4 + babel@7 + ...

Воспользовавшись возможностью umi@2, мы обновили основные зависимости до последних, в дополнение к webpack@4 и babel@7, есть less@3, postcss@7, typescript@3 и т. д., а также соответствующие улучшения производительности сборки. .

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

Например:

export default {
  chainWebpack(config, { webpack }) {
    // 设置 alias
    config.resolve.alias.set('a', 'path/to/a');
  
    // 删除进度条插件
    config.plugins.delete('progress');
  },
}

umi generate

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

$ umi g page index

в то же времяumi generateЕго можно расширить, например, umi-plugin-dva основан на этом расширении.dva:modelи т.д. Быстрое создание файлов.

другие улучшения

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

Начать быстро

Начать работу с umi легко,

# 安装
$ yarn global add umi # 或者 npm install -g umi

# 新建应用
$ mkdir myapp && cd myapp

# 新建页面
$ umi generate page index

# 本地开发
$ umi dev

# 构建上线
$ umi build

Видеть:ваши фанаты accept.org/this/expensive/a…, тоже можно посмотреть10-минутная начальная версия видео-версии umi.

Обновите до umi@2

В настоящее время сообщество antdantd-proа такжеantd-adminВсе они были обновлены до umi@2, предыдущий проект umi@1 может относиться кДокументацияиливидеообновить.

Сообщество

Вы можете присоединиться к группе DingTalk.

Вы также можете добавить группу WeChat (когда группа достигнет 100 человек, добавьтеsorryccproЗаметки о друзьяхumiприглашаю присоединиться).

наконец

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

Категории