Рубрики
Без рубрики

Узнайте, как использовать Rekit Studio в существующем реагированном проекте

Nate Wang Узнайте, как использовать Rekit Studio в существующем оригинале React ProjectPicture Original из INSPLASHI ввел rekit Studio в последней статье и С тех пор многие люди были заинтересованы в использовании его в существующем реагированным проекте. Эта статья представит, как это сделать. Учить

Нейт Ван

Я представил Rekit Studio в Последняя статья И с тех пор многие люди были заинтересованы в использовании его в существующем реагированным проекте. Эта статья представит, как это сделать. Чтобы узнать, как мигрировать на самом деле просто узнать, как работает Rekit. Таким образом, это не только руководство по миграции, но и введение в то, как работает Rekit.

На самом деле лучше подумать о добавлении rekit Studio к существующим проектам, а не мигрируют его, потому что вам не нужно решать все свой существующий код, чтобы отречить за один раз. Вы можете написать новый код с REKIT и оставить старый код, как оно – ваш проект не будет нарушен. Тогда вы можете рефакторизовать старый код в любое время после необходимости. Может быть, вы хотите увидеть полнофункциональную схему зависимости или редактировать старый компонент с rekit Studio.

Мы возьмем Реализация TODOMVC Redux Как наш пример, так что вам может понадобиться проверить его Исходный код первый. Это создано от Create-raction-app , что является официальной и очень популярной реагированной котельной. Если ваш проект также создан этой боковой табличкой, то эта статья будет более полезной.

Предпосылка

Есть только три предпосылки для вашего проекта для использования Rekit:

  1. Rect V0.14 +
  2. Redux.
  3. Модули ES6

Чтобы иметь возможность мигрировать, проект должен основываться на реакции, Redux. Неважно, если ваш проект не использует React Router. Но вам может понадобиться адаптер, чтобы потреблять React Router JSON API Поскольку Rekit использует его как конфигурацию маршрутизации. Это позволяет Rekit узнать, как создавать/обновлять/удалять и отображать правила маршрутизации.

Rekit использует Вавилон , анализатор используется Babel, для анализа модулей ES6 для рефакторинга и схема зависимости. Таким образом, он не поддерживает TyplectScript или Flow Projects сейчас.

1. Установите Rekit-Core и Rekit-Studio

Оба Rekit Studio, так и Rekit Cli использовать Rekit-Core управлять элементами проекта. Установите их в свой проект первым:

yarn add rekit-core rekit-studio --dev

Или с NPM:

npm install rekit-core rekit-studio --save-dev

2. Скопируйте структуру Polkit папку/файлы в свой проект

Проекты Rekit имеют специальную структуру папки. Чтобы быстро создать его для вашего проекта, создайте Clean Rekit приложение и скопируйте папки/файлы в свой проект.

npm install rekit --globalrekit create my-app --clean

Затем скопируйте эти две папки в свой проект:

  • SRC/
  • инструменты/

Имейте в виду, что с вашим будет конфликт: для папок, просто сливайте их. Для файлов не замените никаких файлов и не забудьте, какие конфликты – затем сливаются или переименовывают их вручную (я вновлю это позже).

3. Начните Rekit Studio

Rekit использует сценарий под Инструменты/Server.js Для начала серверов dev и rekit Studio. Для существующего проекта вы уже должны иметь свой собственный сценарий для DEV Server и Constate. Поэтому нам нужно объединить их.

Внутри 4 функций внутри Rekit’s Server.js:

  • startdevserver : Прочитайте конфигурацию WebPack и запустите WebPack Dev Server.
  • builddevdll : Создайте сторонние библиотеки в DLL для улучшения производительности WebPack для разработки, используя WebPack DLL Plugin Отказ
  • StartStudioserver : начать Экспресс Сервер с rekit Studio Mardware
  • StartBuildserver : Запустите Express Server для проверки созданного пакета.

Вы можете редактировать Server.js, чтобы начать свой сервер Dev или редактировать свой собственный NPM начать Сценарий, копируя функцию StartStudiOserver, чтобы начать rekit Studio.

Для примера TodyVC redux сценарий запускает SEV Server IS скрипты/start.js Мы редактируем его, добавив следующий код внизу, чтобы начать Rekit Studio:

В качестве альтернативы вы также можете просто сохранить вышеуказанный скрипт как отдельный файл, как start_rekit_studio.js Затем выполните его с узлом, а затем вставьте его в свой существующий скрипт.

Тогда нам нужно добавить нужную депи, если не установлено еще:

yarn add express express-history-api-fallback --dev

Или с NPM:

npm install express express-history-api-fallback --save-dev

И конфигурация порта Studio Rekit в Package.json:

{   ...   "rekit": { "studioPort": 6090 },   ...}

Обратите внимание, что недвижимость «Rekit» в Package.json необходимо, потому что Rekit использует его для обнаружения проекта Rekit.

Это все. Тогда вы можете начать Rekit Studio с NPM начать (Предполагая, что вы запускаете студию в вашем сценарии запуска NPM)! Доступ http://localhost: 6090 для этого. И сам приложение TOMEVC бежит также. Все еще доступ http://localhost: 3000 Для приложения:

Мы ничего не изменили, но rekit Studio теперь бежит позади.

Начните использовать rekit Studio для записи кода!

После того, как Rekit Studio начинается, вы можете использовать его для записи кода. Помните, что Rekit просто помогает записать стандартный React, Redux код, чтобы вы могли использовать его без каких-либо ограничений в вашем проекте. Например, давайте создадим компонент HellRekit Под функцией домашней функции Rekit Studio и отредактируйте текст по умолчанию для «Hello Rekit!»

Теперь у нас есть компонент реагирования: SRC/Особенности/Главная/HELLOREKIT.JS Отказ Затем используйте его в приложении TOMEVC, редактирование SRC/Containers/app.js который является корневым компонентом приложения. Вы можете найти его в другие Папка в Rekit Studio. Откройте его и добавьте только 2 строки кода:

Сохраните файл, а затем вы даже можете увидеть диаграмму зависимости, хотя App.js не был создан Rekit:

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

Затем откройте приложение TODOMVC, и вы можете увидеть, что компонент HellOREKIT был отображен:

Хотя не так красиво, так как мы еще не добавили стиль, он хорошо работает!

Интеграция стилей

Теперь давайте интегрируем стили, которыми управляли в вашем проекте. На данный момент Rekit поддерживает только Меньше или Sass как CSS транспортер. Вам нужно настроить свой Bundler (WebPack, Rollup и т. Д.) Для его поддержки: забрать меньше и WebPack, например, и добавить SRC/стили/index.less к записи config/webpack.config.dev.js :

entry: [  ...,  'src/styles/index.less',  ...],

Обратите внимание, что Rekit использует немного стиля по умолчанию в SRC/стили/сброс .Css которые не должны использоваться для существующих проектов. Так что просто удалите это @import линия в SRC/стили/index.less Отказ

Затем добавьте менее загрузку на конфигурацию под Oneof для приложения TOMEVC. Это может быть ненужно, если ваш проект использует меньше.

{  test: /\.less$/,  loader: 'style-loader!css-loader!less-loader'}

Установите меньше и меньше погрузчика, если это необходимо:

yarn add less@2.3.1 less-loader --dev

Обратите внимание, что менее загрузчик теперь совместим только с менее @ 2.3.1, но не последний 3.0.1.

Все конфигурация для стилизации сделана, поэтому теперь давайте добавим немного стиля к компоненту HellRekit и увидеть результат:

Мы видим, что стиль, управляемый Rekit, был использован существующим проектом.

Интеграция Redux.

Давайте давайте интегрируем существующий код Redux для Rekit. Каждое приложение redux имеет корневой редуктор. Ключ состоит в том, чтобы объединить редуктор Rekit с существующим. Это очень просто! Для приложения TOMEVC просто импортируйте SRC/Редукторы/TODOS.JS до корневого редуктора Rekit SRC/Common/rootorducer.js :

Затем используйте этот корневой редуктор в приложении TOMEVC, редактирование SRC/index.js :

Хорошо, вы можете использовать Rekit для управления новыми действиями redux и редукторами. Теперь создайте действие с Rekit самостоятельно и попробуйте!

Интеграция React Router

Как уже упоминалось выше, Rekit управляет правилами маршрутизации в формате JSON. Корневой маршрутный файл конфигурации SRC/Common/ruateConfig.js которые загружают правила маршрута из каждой функции SRC/Особенности/<ОСОБЕННОЕ ИМЯ>/RO Ute.js. При создании компонента с помощью какого-то URL-пути, Rekit Update ro ute.js файл для вставки правила маршрутизации.

Поэтому не нужно использовать React Router – вы можете использовать любую библиотеку маршрутизатора, которая может потреблять правила, определенные API JSON. В приложении Rekit SRC/root.js Это место, где правила JSON обрабатываются для генерации деклараций React Router V4 в JSX.

Поскольку приложение TOMEVC не использует маршрутизатор, мы просто используем способ по умолчанию Rekit. Первая установка React-Router-DOM и React-Router-Redux к вашему проекту, если не установлено еще:

yarn add react-router-dom react-router-redux@next --dev

Затем вам нужно коснуться двух файлов приложения TOMOVVC:

  1. Обновление SRC/index.js рендерировать root.js вместо SRC/Containers/app.js Отказ

Обратите внимание, что root.js использовал поставщик из React-redux Для компонента, поэтому он больше не нужно в Index.js.

2. Обновление SRC/Особенности/Главная/Route.js Чтобы добавить правило, которое соответствует некотору URL-канал для компонента ToDomVC SRC/Containers/app.js :

Вам не нужно добавлять правила на Home’s Route.js. Это может принадлежать к любой функции, даже корневой RouteConfig.js.

Теперь вы можете получить доступ к ToDoApp этим URL: http://localhost: 3000/Todos . Мы можем видеть, что app app.js app.js управляется реактивный маршрутизатор сейчас.

Мы закончили миграцию React Router. Это был просто пример код TOMEVC. Для вашего приложения подход похож. Если вы также используете React Router V4, затем просто используйте Root.js – в противном случае напишите свой собственный адаптер, чтобы потреблять маршрутизацию Rekit Config json.

Агрегатные тесты

Rekit Studio использует сценарий Инструменты/run_test.js Чтобы запустить тесты подразделения путем тестового шаблона файла, поэтому вы не должны переименовать или перемещать его. Например, используйте эту команду для проверки домашней функции:

node run_test.js features/home/**/*.test.js

Сценарий использует Моча запустить тесты и NYC Для создания отчета о тестовом покрытии. Если вы используете другие тестовые рамки, такие как Jest , отредактируйте этот скрипт, чтобы запустить тесты для своих собственных.

Строить

Rekit Studio использует сценарий Инструменты/build.js построить проект. Так что вы не должны переименовать или не перемещать его. Все, что вам нужно сделать, это поместить сценарий сборки в этот скрипт, чтобы вы могли начать строительство через GUI Rekit Studio.

Настройка Rekit производится

На данный момент мы добавили Rekit в существующий проект. Это означает, что вы можете начать писать новый код с помощью Studio Rekit и оставить старый код, как оно есть. Проект все еще должен работать хорошо, как раньше.

Но, как я уже упоминал выше, нам может понадобиться рефакторинг Старый код, чтобы его можно было управлять Rekit. Давайте посмотрим, как сделать миграцию.

Думать в особенности

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

Мигрирующие компоненты

Каждый компонент состоит из трех файлов:

  1. Component.js: всегда следует поставить непосредственно под функциональную папку: SRC/Особенности/<Функция/Компонент .js
  2. Component.Blue/SCSS: всегда следует поставить непосредственно под папку «Функция»: SRC/Особенности/<ОСОБЕННОЕ ИМЯ/CONTULTE.L эсс
  3. Component.test.js: должно быть в папке тестов: Тесты/Особенности/<Функция>/component.t est.js.

Положение файлов и шаблон именования должны следовать за конвенциями Rekit, описанными здесь Так что Rekit может рефакторировать их при необходимости. REKIT обнаруживает компонент, проверив, реагирует модуль под функциональной папкой импорта.

Узел Coot DOM каждого компонента должен иметь уникальное имя класса CSS. В Реките узор <Имя функции> - <Компонентное имя>. Это всегда в корпусе Kebab USI NG LODASH’S _.kebabbase Функция. Это имя класса будет автоматически обновлено, когда вы переименовываете компонент с Rekit.

Удерживая в виду эти правила, вы можете переместить свой компонент в папку «Функция». Затем Rekit Studio может загрузить его в проводнике проекта и редактировать его с редактором элемента (с вкладками для разных частей компонента).

Вы можете проверить окончательный результат здесь Чтобы увидеть, как Rekit организует компоненты для приложения TOMEVC.

Мигрирующие действия и редукторы

Rekit использует другой подход для организации действий и редукторов Redux по сравнению с официальными примерами Redux (описан здесь ). Так что вам нужно разделить свой Actions.js и редукторы.js в разные файлы. Каждый файл имеет одно действие и его редуктор. Самый простой способ состоит в том, чтобы создать действие Rekit Studio, затем переместите свою старую логику действий/редукторов внутри него.

Имена действий и константы типа действия должны также быть названы В Rekit Way Так что Ректа может рефакторировать их. Например, эта картина показывает, как мигрировать Addtodo Действие к Rekit Way:

Вам не нужно менять свою бизнес-логику. Просто положите их в новое место. С помощью этого подхода вы сможете легко управлять действиями/редукторами Redux.

Вы также можете проверить окончательный результат здесь Чтобы увидеть, как Rekit организует действия для приложения TOMEVC.

Резюме

Я должен признать, что добавление Rekit в существующий проект намного проще, чем я изначально думал. Вам не нужно менять свой веб-пакет/Rollup/Parcel Config, как вы создаете/тестируете свой проект, или как ваше начать ваше приложение. Но просто убедитесь, что Rekit работает в вашем проекте на три этапа:

  1. Создать структуру папки/основание Boeterplate, которая Rekit понимает
  2. Добавить Rekit-Core Rekit-Studio Вам проект.
  3. Создайте сценарий, чтобы начать Rekit Studio

Теперь вы можете написать новый код с Rekit Studio!

Эта статья использует приложение TOMEVC в качестве примера для миграции. Ваши проекты могут быть намного сложнее, поэтому у вас могут быть другие проблемы при миграции. Если вы сделаете, не стесняйтесь ставить свои вопросы в комментарии, и я сделаю все возможное, чтобы помочь вам разрешить их. Спасибо!

Оригинал: “https://www.freecodecamp.org/news/using-rekit-studio-in-an-existing-react-project-39713d9667b/”

Читайте ещё по теме: