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

1656672265 uznajte kak ispolzovat rekit studio v sushhestvuyushhem proekte react

от Nate Wang

1*KM9q-edu91s_DYXDFivGlQ
Оригинал изображения с unsplash

Я представил Rekit Studio в прошлой статье, и с тех пор многие заинтересовались использованием ее в существующем проекте React. Эта статья покажет, как это сделать. Научиться мигрировать – это просто узнать, как работает Rekit. Это не только руководство по миграции, но и ознакомление с тем, как работает Rekit.

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

Мы примем реализацию TodoMVC Redux как наш пример, поэтому вам, возможно, придется сначала проверить ее исходный код. Он создан с помощью create-react-app, являющегося официальным и очень популярным шаблоном React. Если ваш проект создан по этому шаблону, то эта статья будет более полезной.

Предпосылка

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

  1. React v0.14+
  2. Redux
  3. Модули ES6

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

Rekit использует Babylon, синтаксический анализатор, используемый Babel для анализа модулей ES6 для рефакторинга и диаграммы зависимостей. Поэтому он не поддерживает проекты TypeScript или Flow.

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. Скопируйте структуру/файлы папок Rekit в свой проект

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

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

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

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

3. Запустите Rekit Studio

Rekit использует сценарий под tools/server.js чтобы запустить серверы разработчиков и Rekit Studio. Для существующего проекта вы должны иметь собственный сценарий для сервера разработчиков и сборки. Так что нам нужно их объединить.

В Rekit server.js есть 4 функции:

  • startDevServer: прочтите конфигурацию webpack и запустите сервер разработки webpack.
  • buildDevDll: создавайте посторонние библиотеки в Dll для улучшения производительности Webpack для разработки с помощью плагина Webpack dll.
  • startStudioServer: запустите сервер Express с промежуточным программным обеспечением Rekit Studio
  • startBuildServer: запустите сервер Express для проверки собранного комплекта.

Вы можете редактировать server.js, чтобы запустить сервер разработчика, или редактировать свой собственный npm start скопировав функцию startStudioServer для запуска Rekit Studio.

Для примера Redux TodoMVC сценарий запускает сервер разработчиков scripts/start.jsмы редактируем его, добавляя следующий код внизу, чтобы запустить Rekit Studio:

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

Затем нам нужно добавить необходимые deps, если они еще не установлены:

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

Или из npm:

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

И настройте порт Rekit Studio в package.json:

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

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

Это все. Затем вы можете запустить Rekit Studio с помощью npm start(Предполагая, что вы запускаете Studio в своем сценарии запуска npm)! Доступ к нему. И сама программа TodoMVC тоже работает. Еще доступ к программе:

1*ZuNccZ60bvzNHKaF59ai7g

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

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

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

1*yqaZFzt5UQSqokO2kVUZzQ

Теперь у нас есть компонент React: src/features/home/HelloRekit.js. Затем используйте его в программе TodoMVC путем редактирования src/containers/App.js который является корневым компонентом программы. Вы можете найти его в others папку в Rekit Studio. Откройте его и добавьте только 2 строки кода:

1*5qEEwSVZ4O46SPzQJqVgFQ

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

1*5t_u4z7gPZ_dsviwFujNSg

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

Затем откройте приложение TodoMVC, и вы увидите, что компонент HelloRekit отображается:

1*IQ4Qp_ye31k6cv4pDJJ9bA

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

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

Теперь давайте интегрируем стили, которыми управляет Rekit, в ваш проект. В настоящее время Rekit поддерживает только Less или Sass как транспиллер CSS. Вам нужно настроить свой сборник (Webpack, Rollup и т.д.), чтобы поддерживать его: возьмите Less и Webpack, например, и добавьте src/styles/index.less ко входу в config/webpack.config.dev.js:

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

Обратите внимание, что Rekit использует определенный стиль по умолчанию src/styles/reset.css которые нельзя использовать для существующих проектов. Так что просто удалите это @import линия в src/styles/index.less.

Затем добавьте Less-loader к конфигурации под oneOf для приложения TodoMVC. Это может быть ненужно, если ваш проект использовал Less.

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

При необходимости установите Less and Less-loader:

yarn add less@2.3.1 less-loader --dev

Заметьте, что Less-loader теперь совместим только с Less @2.3.1, но не с последней версией 3.0.1.

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

1*azHx8UmKcr7Bgdo9xu1AJg

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

Интеграция Redux

Далее давайте интегрируем существующий код Redux в Rekit. Каждое приложение Redux имеет корневой редуктор. Главное – объединить редуктор Rekit с существующим. Это очень просто! Для программы TodoMVC просто импортируйте src/reducers/todos.js к корневому редуктору Rekit src/common/rootReducer.js:

1*oHfUeL5-iEab74Wul0KDtQ

Затем используйте этот корневой редуктор в программе TodoMVC путем редактирования src/index.js:

1*afaFngPnqsaQOgFbsacnYg

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

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

Как упоминалось выше, Rekit управляет правилами маршрутизации в формате JSON. Файл конфигурации корневого маршрута src/common/routeConfig.js который загружает правила маршрута по каждой функции src/features/<feature-name>/route.js. При создании компонента с определенным URL Rekit обновляетсяs the route.js, чтобы вставить правило маршрутизации.

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

Поскольку приложение TodoMVC не использует маршрутизатор, мы используем только стандартный способ Rekit. Первая установка react-router-dom и react-router-redux к вашему проекту, если еще не установлено:

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

Затем вам нужно затронуть два файла программы TodoMVC:

  1. обновление src/index.js чтобы отобразить Root.js вместо src/containers/App.js.
1*zakEz2hEGtwOCbWFPIuelA

Обратите внимание, что Root.js использует Provider from react-redux для компонента, поэтому он больше не нужен в index.js.

2. Обновление src/features/home/route.js чтобы добавить правило, соответствующее определенному URL-пути к компоненту TodoMVC src/containers/App.js:

1*eDC6NFMuABAgZCXZmJ1wfQ

Вам не нужно добавлять правила в home’s route.js. Он может относиться к любой функции даже к корневому routeConfig.js.

Теперь вы можете получить доступ к TodoApp по этому URL-адресу: /todos. Мы видим, что контейнерный компонент TodoMVC App.js теперь управляет React Router.

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

Модульные тесты

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

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

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

Строить

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

Настройка Rekit завершена

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

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

Мышление особенностями

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

Миграция компонентов

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

  1. Component.js: всегда следует размещать непосредственно в папке функций: src/features/<feature-name/Component.js
  2. Component.less/scss: следует всегда размещать непосредственно в папке функций: src/features/<feature-name/Component.less
  3. Component.test.js: должно быть в папке tests: tests/features/<feature-name>/Component.test.js

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

Каждый корневой узел DOM компонента должен иметь уникальное название класса CSS. У Рекити узор есть <feature-name>-<component-name>. Это всегда в kebab case с помощью функции lodash _.kebabCase. Это название класса будет автоматически обновлено при переименовании компонента с помощью Rekit.

Памятуя об этих правилах, вы можете переместить компонент в папку функций. Затем Rekit Studio может загрузить его в проводник проекта и отредактировать с помощью редактора элементов (с вкладками для разных частей компонента).

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

Перенос действий и редукторов

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

Названия действий и константы типов действий также должны быть названы способом Rekit, чтобы Rekit мог их рефакторить. Например, на этой картинке показано, как мигрировать addTodo действие к пути Rekit:

1*pY19yaWmvDmzlI9vfZyYZw

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

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

Резюме

Должен признать, что добавить Rekit в существующий проект гораздо легче, чем я сначала думал. Вам не нужно изменять конфигурацию webpack/rollup/parcel, способ создания/тестирования вашего проекта или способ запуска программы. Но просто убедитесь, что Rekit работает в вашем проекте в три шага:

  1. Создайте структуру папок/базовый шаблон, понимающий Rekit
  2. добавить rekit-core rekit-studio для вас проект.
  3. Создайте сценарий для запуска Rekit Studio

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

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

Добавить комментарий

Ваш адрес email не будет опубликован.