Решение для разработки на базе Umi

React.js

Решение для разработки на базе Umi

Umi — это платформа корпоративных приложений на основе React от Ali. В этой статье будет представлена ​​схема разработки на основе Umi с трех сторон:

  • Что такое уми?
  • Как использовать уми?
  • Как реализуется уми?

что такое уми

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

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

  • Из коробки встроенный реакт, реакт-роутер и т.д.
  • Обычная маршрутизация с поддержкой настраиваемой маршрутизации
  • Идеальная система плагинов
  • поддержка машинописи
  • Поддержка схемы данных dva

Жизненный цикл проекта umi выглядит следующим образом. Он включает в себя весь процесс от исходного кода до онлайна. umi сначала загружает конфигурацию пользователя и подключаемые модули, а затем генерирует конфигурацию маршрутизации на основе конфигурации или каталога. конфигурация маршрутизации, исходный код JS/CSS Полностью объединен с HTML. Настроенные пользователем параметры и плагины влияют на каждую ссылку в процессе.

生命周期

использовать

Создать уми-проект

Существует 2 способа создания проекта umi: создание вручную и создание каркаса.

Создать вручную

Первым шагом является создание соответствующих папок:

mkdir umi_app && cd umi_app
npm init
mkdir pages

Второй шаг, добавьте скрипт npm:

"scripts": {
    "start": "umi dev",
    "build": "umi build”,
}

Третий шаг, добавьте зависимости:

"devDependencies": {
    "umi": "^2.6.3"
}

Четвертый шаг — добавить новый модуль в каталог pages. Наконец, используйтеnpm run startдля запуска проекта.

Создание строительных лесов

umi предоставляет вспомогательный инструмент create-umi для ускорения создания проектов umi.

mkdir umi_app && cd umi_app
create-umi
npm i

Наконец, используйтеnpm run startзапустить проект, вlocalhost:8000Посетите этот пункт.

развитие бизнеса

Структура созданного каталога проекта выглядит следующим образом:

.
├── dist/                          // 默认的 build 输出目录
├── mock/                          // mock 文件所在目录，基于 express
├── config/
    ├── config.js                  // umi 配置，同 .umirc.js，二选一
└── src/                           // 源码目录，可选
    ├── layouts/index.js           // 全局布局
    ├── pages/                     // 页面目录，里面的文件即路由
        ├── .umi/                  // dev 临时目录，需添加到 .gitignore
        ├── .umi-production/       // build 临时目录，会自动删除
        ├── document.ejs           // HTML 模板
        ├── 404.js                 // 404 页面
        ├── page1.js               // 页面 1，任意命名，导出 react 组件
        ├── page1.test.js          // 用例文件，umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
        └── page2.js               // 页面 2，任意命名
    ├── global.css                 // 约定的全局样式文件，自动引入，也可以用 global.less
    ├── global.js                  // 可以在这里加入 polyfill
    ├── app.js                     // 运行时配置文件
├── .umirc.js                      // umi 配置，同 config/config.js，二选一
├── .env                           // 环境变量
└── package.json

Каталог .umi — это временный каталог, созданный umi dev, который по умолчанию содержит файлы umi.js и router.js. .umi-production — это временный каталог, созданный в сборке umi.

через командную строкуumi g page usersСоздать страницу пользователей, вlocalhost:8000/usersдля доступа к странице.

В то же время вы также можете использовать dva в качестве инструмента управления состоянием для разработки с помощью umi, см.umi+dva, приложение CURD для управления пользователями.

Используйте плагины

Основываясь на механизме подключаемых модулей umi, вы можете увеличить время компиляции и время выполнения проекта. Функции, поддерживаемые подключаемыми модулями, также станут более мощными.Мы можем использовать измененный код для упаковки конфигурации, изменения кода запуска, согласования структуры каталогов, изменения HTML и других более богатых интерфейсов в соответствии с потребностями функции. Плагин может быть пакетом npm или модулем, путь которого ведет непосредственно к JS. Пользователи используют плагины, настраивая плагины. Следующим образом:

// .umirc.js
export default {
  plugins: [
    [
      'umi-plugin-dva',
      {
        immer: true,
      },
    ],
    [
      './src/plugins/customPlugin.js',
      {
        // plugin config
      },
    ],
  ],
};

Как добиться

Вставной механизм уми очень хорош, проходимumi devПроанализируйте, чтобы увидеть, как реализован механизм подключаемых модулей umi. Адрес исходного кода umi:umi github. Из исходного кода видно, что это многопакетный проект lerna, и исходный код находится вpackagesПод содержанием.

umi devВесь процесс выглядит следующим образом:

umi dev

Пакет umi в основном предоставляет некоторые внешние команды, такие какumi dev,umi build,umi inspect,umi test.

Он завершает весь процесс, создавая экземпляр службы,new Service().run('dev', args);.

Структура Службы следующая:

umiService.png

После создания экземпляра службы запуститеrunметод, этот метод состоит из двух шагов, первый шаг — инициализация, а второй шаг — запуск соответствующей команды:

run

Метод init инициализирует каждый плагин в plugins:

initPlugin.png

initPluginВ методе есть еще способы монтирования каждого плагина через Proxy.Метод, прописанный командой dev, находится в/umi-build-dev/src/plugins/commands/dev/index.jsВниз. Видно, что команда наконец-то прошлаaf-webpackЗапустите webpack и запустите проект.

Как создается каталог .umi?

В командной строке dev зарегистрируйте filesGenerator для создания каталога .umi:

.umi

это проходитchokidarОтслеживайте каталог файлов и регенерируйте каталог при обновлении файла.

Как инкапсулируется конфигурация веб-пакета?

Служба черезwebpack-chainЦепочка конфигурации веб-пакета:

webpack

Категории