Создание настраиваемого, поддерживаемого пакета React-Scripts
ОБНОВЛЕНИЕ: этот пакет теперь поддерживается как complete-react-scripts. Все ссылки на полезные сценарии реакции были обновлены, чтобы отразить это.
В Helpful Human мы искали новое решение для быстрого запуска новых проектов. Мы хотели опираться на знания Facebook о React, Webpack и передовых методах настройки и обслуживания одностраничных приложений. Когда Facebook выпустил приложение Create React (CRA), я был рад возможности использовать их знания о процессе сборки в своих приложениях.
Однако была проблема.
Хотя create-react-app был отличным шаблоном для начала проекта, он не включал в себя все, что нам нужно было включить в новые проекты React. По умолчанию CRA настраивает вашу среду разработки; процесс сборки, линтинг Javascript, модульные тесты с Jest и CSS. Этот небольшой набор включений был направлен на то, чтобы сделать CRA как можно более неоптимизированным, но в результате функциональности не хватает большей части того, что нам нужно для создания полноценного приложения React (то есть управления состоянием, маршрутизации и предварительно обработанных стилей).
Первая трещина в этом: урок настойчивости
Моя первоначальная попытка настроить приложение CRA была смесью успехов и неудач. В CRA API включена возможность eject приложения. Эта команда существенно снижает вашу зависимость от команды React и позволяет вам поддерживать проект самостоятельно.
С помощью этой команды я взял приложение под свой контроль и внес необходимые изменения в свои файлы конфигурации. Хотя я мог настроить приложение, созданное CRA, у меня возникли проблемы с ремонтопригодностью. Хотя использование этого метода было значительно быстрее, чем создание нового приложения с нуля или базовой настройки на основе шаблона, для меня было важно, чтобы приложение по-прежнему могло полагаться на обновления от команды React.
Опираясь на информацию, полученную в результате этого эксперимента, мы решили создать способ использования возможностей CRA с дополнительным преимуществом включения других зависимостей, которые нам требуются из коробки. Но нам нужно было сделать это, сохранив соединение с исходным пакетом сценариев реакции.
Изучив документацию по CRA, мы не смогли найти поддерживаемого способа перезаписать сценарии реакции, включенные в CRA, нашим собственным пакетом, и немного разочаровались. Мы начали сомневаться в жизнеспособности наших усилий.
Finding Our Solution: Custom-React-Scripts
В крайнем случае, мы начали исследовать другие возможные методы достижения нашей цели и при этом натолкнулись на Custom React Scripts. Это открытие стало ключом к раскрытию нашей способности использовать CRA.
Мы начали читать, как Китце, автор custom-react-scripts, включил возможность использования пакета пользовательских скриптов и наткнулся на недокументированный фрагмент кода в своей документации:
create-react-app my-app --scripts-version custom-react-scripts
Удивительно, но у CRA был недокументированный хук, встроенный в API, чтобы переопределить сценарии реагирования по умолчанию вашими собственными. Нам не терпелось опробовать его, и, как было заявлено, custom-react-scripts - отличный пакет для создания приложений, созданных CRA, с пользовательскими дополнениями, которые настраиваются с помощью файла .env. Хотя custom-react-scripts - замечательный пакет для создания проектов с разными требованиями, нам нужен был только один конкретный набор для нашей команды.
Получив новую информацию, мы разделили CRA и начали редактировать сценарии реакции, чтобы включить недостающие части. Мы добавили в Redux глобальный менеджер состояний, response-router для управления маршрутами и маршрутизацией и Stylus для предварительной обработки таблиц стилей.
После того, как необходимые пакеты были настроены в нашей разветвленной версии сценариев реакции, мы дали нашему новому пакету имя и номер версии в package.json и опубликовали сценарии завершения реакции в NPM. Важно отметить, что мы опубликовали только нашу собственную версию сценариев реакции, а не весь репозиторий CRA. Я хотел убедиться, что все еще могу загружать обновления, которые команда React предоставила CRA, и применять их к complete-react-scripts.
Пришло время протестировать сценарии полной реакции. Мы запустили фрагмент, который custom-react-scripts использует, и заменили custom-react-scripts нашими недавно созданными скриптами custom-response-scripts.
create-react-app my-app --scripts-version complete-react-scripts
Успех! Теперь у нас было приложение, созданное CRA, которое извлекло наш пользовательский пакет сценариев из npm и включило React-Router, Redux и Stylus из коробки. Это был важный шаг в правильном направлении, и он, несомненно, значительно сократит время, необходимое для запуска нового приложения.
Если вы нашли complete-react-scripts полезным для вас, дайте мне знать! Я хотел бы услышать, как вы это используете. Кроме того, если у вас есть предложения, как я могу улучшить пакет, я очень рад выслушать любые ваши идеи!
