Привет! уми

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

один,

umi(китайское название: Wumi) — мой текущий фокус, и я развиваю его изо всех сил.Прошло несколько месяцев с тех пор, как я написал первую строчку кода. Однако из чата и электронных писем я обнаружил, что многие люди не готовы понять, что такое уми и на что оно способно, поэтому, пока они устали писать код, давайте поговорим о некоторых ситуациях с уми.

Уми - это инструмент? да. Но не только.Мое позиционирование для umi — это среда разработки, которая на данный момент включает инструменты + роутинг, но не включает данные и представления.Таким образом, umi[инструмент + маршрутизация] + dva[данные] + antd(-mobile)[представление] очень подходит. Кроме того, в настоящее время umi основан на React и не поддерживает Vue и другие фреймворки или методы разработки без фреймворка.

В настоящее время, как было сказано выше, энергия фактически ограничена.

 

два,

Вы можете подумать, что такого особенного в umi, webpack + webpack-dev-server + babel + postcss + … для инструментов и react-router для роутинга?

Это способ использования предыдущего поколения, инструменты есть инструменты, библиотеки есть библиотеки, и между ними есть четкое различие.Совсем недавно мы обнаружили, что инструменты и библиотеки на самом деле можно смешивать вместе, а инструменты являются частью фреймворка.Содействуйте разработке с помощью соглашений, автоматического создания и анализа кода и т. д., сокращая объем кода, который приходится писать разработчикам. Как и next.js, как и umi,Compilers are the New Frameworks.

 

три,

Так зачем же в него включать слой маршрутизации?

Маршруты — это страницы, а страницы — это единицы, из которых состоит приложение. Взятие на себя уровня маршрутизации означает больше возможностей для управления созданием, переключением и уничтожением каждой страницы. Чем больше вещей может сделать фреймворк, тем более осмысленным будет его существование.

Например:

  • Переключение одним щелчком между одной страницей и несколькими страницами
  • Загрузка по запросу во время выполнения
  • Компиляция по запросу во время разработки
  • Генерация статического HTML
  • ...

 

Четыре,

Итак, что есть у Уми? Почему я должен использовать его?

Проще говоря, есть 4 пункта:

  • 🗃 Из коробки
  • 🚀 очень быстро
  • ⚔️ Мультитерминал
  • 😊 Подходит для разработки

(Его нет? 🏃🏃🏃 Пока не уходи, послушай меня подробно..)

 

пять,

из коробки? Итак, что в коробке?

Давайте сравним, возьмем для примера roadhog для инициализации проекта.

Турбосвин:

  1. Установить инструменты сборки в зависимости от roadhog
  2. Установите зависимости библиотеки классов, antd/antd-mobile, зависимости react + react-dom (или preact + preact-compat)
  3. Если это предварительный проект, вам необходимо настроить псевдоним
  4. Если вам нужна маршрутизация, вам также необходимо установить react-router
  5. Установите плагин babel babel-plugin-import и настройте его согласно документации, но он может быть настроен неправильно (много консультаций в этом блоке)
  6. Настройте запись веб-пакета для упаковки нескольких страниц

umi:

  1. Установить зависимости umi

Всего один шаг, остальное делать не нужно, потому что оно в коробке уми.Однако, хотя многие вещи уже есть, они по-прежнему оставляют за пользователями право выбора, например, выбор preact или react, например, версию antd (-mobile), правила eslint можно переопределять и объединять и так далее.

 

шесть,

umi приложил много усилий к производительности, что незаметно для разработчиков.«Вы просто пишете бизнес-код, а я буду отвечать за производительность», и с итерацией umi я гарантирую, что ваше приложение будет становиться все быстрее и быстрее.

Есть:

  • PWA Support
  • Tree Shake
  • antd(-mobile) включить модуль ES
  • Scope Hoist
  • Умное извлечение общедоступных файлов
  • Загрузка по запросу на уровне страницы
  • Inline Critical CSS
  • поставкаumi/dynamicиimport()синтаксис для отложенной загрузки компонентов и модулей соответственно
  • оптимизированныйbabel-preset-umi
  • Статическая обработка SSR
  • link rel=preload
  • Построение хэшей и поддержка серверов (Papilio)
  • Улучшите производительность повторного рендеринга с помощью react-constant-elements и react-inline-elements
  • Переключение одним щелчком, чтобы действовать
  • Progressive image loading
  • Пакет встроенного кода маршрутизации umi по запросу
  • ...

Есть много моментов оптимизации, некоторые связаны с размером, некоторые связаны с эффективностью выполнения, некоторые связаны с экранным временем, а некоторые связаны с пользовательским опытом, если подробно рассказывать, то можно говорить несколько часов. Каждый должен уметь догадываться по ключевым словам, поэтому я не буду их здесь раскрывать.

 

Семь,

umi рожден для мультитерминала, а мультитерминал здесь относится к сети + различные контейнеры, Например, нам нужно развернуть код на офлайн-пакете и онлайн-сервере кошелька Alipay одновременно.

Поскольку продукт umi представляет собой одностраничное приложение, и эффективно одновременно обращаться к каждой странице по отдельности, вы можете переходить через ap в режиме контейнера и переходить через маршрутизацию в онлайн-режиме. Автоматическое переключение режима мы используемbridgexреализовать.

 

8,

umi также можно считать кропотливым в опыте разработки.

Во-первых, с библиотекой create-реагировать-приложение с открытым исходным кодом, его опыт является нашим итогом. Например, redbox отображает информацию об ошибке, HMR, переходы в IDE после щелчка по ошибке, сообщение об ошибке ESLint и т. д.

Кроме того, umi сделала еще больше:

  • Компиляция по запросу (даже если у вас 100 страниц, запуск занимает всего 5 секунд)
  • Все конфигурации могут вступить в силу автоматически (горячее обновление или самостоятельный перезапуск)
  • Динамическое изменение темы antd(-mobile)
  • отключение и повторное подключение сервера разработки
  • Напоминание о контрольной сумме элемента конфигурации (отображается как в браузере, так и в консоли)
  • Ошибка синтаксиса файла конфигурации, подсказка для строки
  • Поддержка TypeScript (подсказки по синтаксису, TSLint и даже тестовые примеры, написанные на ts)
  • ...

 

Девять,

Какие проекты подходят для использования umi?

umi — это общее решение, могу ли я использовать любое решение? 😆 Ладно, скажу то, что не относится.

  • нереактивные проекты
  • Маршрутизация чрезвычайно сложна и не может быть реализована с помощью соглашений о маршрутизации каталогов (маршрутизация типа конфигурации будет рассмотрена позже).
  • независимо от производительности продукта
  • Не заботится об опыте разработки
  • ...

 

десять,

Немного взволнован, как мне начать Приступая к работе?

Установить первымumi.

$ npm i umi -g

# 检查版本号
$ umi -v
umi@1.0.0-rc.1

Затем создайте новый каталог и введите.

$ mkdir myapp
$ cd myapp

Запустите сервер разработки umi.

$ umi dev

Откройте новый терминал и создайте новый компонент страницы в каталоге pages.

$ echo 'export default () => <div>Index Page</div>' > pages/index.js

открыть в браузереhttp://localhost:8000/,ты увидишьIndex Page.

Будь проще!

Наконец, umi@1.0 будет официально выпущен в начале февраля, так что следите за обновлениями.

Ссылки по теме:

(Заканчивать)

Категории