Что мы хотим сделать

Нам нравятся стилизованные компоненты, мы любим Flow и любим приложение Create React. Как заставить все это хорошо ладить друг с другом? (Если вы читаете это, вы, вероятно, понимаете, что это было не так интуитивно, как вы думали)

Предварительные требования

  • Приложение Create React установлено, и проект настроен
  • Немного терпения

Вы можете прочитать краткие инструкции в конце статьи. Я рекомендую придерживаться более длинной версии ниже!

Установка Flow

Эта часть должна быть довольно простой. У Facebook есть шаги, изложенные здесь, но я резюмирую их в статье:

  • Беги npm install flow-bin
  • Добавить “flow: flow” в скрипты в package.json
  • запустите npm run flow init, чтобы создать .flowconfig

Еще одна вещь, которую вам, возможно, придется сделать, если вы используете VSCode, - это установить расширение vscode-flow-ide (или эквивалентное) и, возможно, установить javascript.validate.enable = false, чтобы редактор не принял ваш код за неправильный код машинописного текста.

Честно говоря, самая большая боль здесь - это борьба с любой IDE, которую вы используете. Вам, вероятно, придется заняться другими проблемами, если вы используете что-то другое, кроме VSCode.

Установка стилизованных компонентов (правильно)

Здесь все становится немного сложнее. Первый шаг прост, просто установите стилизованные компоненты:

npm install styled-components

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

Добавление набора текста

Flow-typed исправит это, предоставив точные заглушки для библиотеки стилизованных компонентов (и многих других). Вот шаги:

  • Запустите npm install flow-typed
  • добавить ‘flow-typed: flow-typed’ в свои скрипты
  • установите flow-типы для стилизованных компонентов с помощью npm run flow-typed install [email protected]. Замените версию стилизованных компонентов любой версией, которую вы используете.
  • Бум! Ошибки должны исчезнуть

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

Добавление компонентов babel-plugin-styled

Мы можем получить удобочитаемые имена компонентов для отображения в DOM, установив плагин babel под названием babel-plugin-styled-components. Согласно документации мы получаем следующие возможности:

  • согласованное хеш-имя для классов как на сервере, так и на клиенте (важно для рендеринга на стороне сервера)
  • добавляет ваше удобочитаемое имя класса к полному имени класса для облегчения отладки
  • минимизирует ваш CSS и переносит тегированные литералы шаблонов более компактным способом, чем сам Babel

Единственная проблема в том, что мы используем приложение Create React и, вероятно, не хотим извлекать его. Без проблем! К счастью, есть так называемые макросы (в основном пакеты, которые позволяют нам расширять babel без извлечения CRA).

  • npm install --save-dev babel-plugin-macros
  • Вместо того, чтобы импортировать styled-components в свой код, импортируйте styled-components/macro

Ошибка потока при импорте стилизованных компонентов / макроса

Так и должно быть! Хотя в некоторых случаях вы можете получить сообщение об ошибке потока, говоря, что поток не может найти модуль, который вы добавили /macro.

Это обычно происходит, когда ваш .flowconfig настроен на игнорирование node_modules. Удалите строку под [игнорировать], в которой написано .*/node_modules/.*. Честное предупреждение, это исправило ошибку для меня, но это может не сработать для вас, если вам действительно нужно игнорировать node_modules. В этом случае игнорируйте все, кроме папки с макросами.

Краткая версия

Install Flow

  • Беги npm install flow-bin
  • Добавить “flow: flow” в скрипты в package.json
  • запустите npm run flow init, чтобы создать .flowconfig

Установите стилизованные компоненты

  • npm install styled-components

Установка потокового типа

  • Беги npm install flow-typed
  • добавить flow-typed: flow-typed в свои скрипты
  • установить потоковые типы для стилизованных компонентов с npm run flow-typed install [email protected]. Замените версию стилизованных компонентов любой версией, которую вы используете.

Установите компоненты babel-plugin-styled

  • npm install --save-dev babel-plugin-macros
  • Вместо импорта styled-components в код импортируйте styled-components/macro

Ошибка потока при импорте стилизованных компонентов / макроса?

  • Удалить .*/node_modules/.* из раздела [игнорировать] .flowconfig
  • Если вам нужно игнорировать node_modules, игнорируйте все, кроме папки с макросами.

Отказ от ответственности

Вероятно, в вашей индивидуальной ситуации возникнут некоторые оговорки, но, надеюсь, это руководство поможет вам на 99%. Не стесняйтесь оставлять комментарии с вопросами, проблемами или предложениями!