Добавить поток на этап компиляции в проекте create-react-app

Я работаю над проектом с приложением create-react-app и хочу добавить Flow в свой процесс. Официальный документация объясняет, как это сделать, и это относительно просто, но, следуя их инструкциям, она добавляет его вместе со встроенными функциями линтинга / сборки / компиляции, которые приложение выполняет самостоятельно.

Насколько я понимаю, каждый раз, когда я сохраняю или изменяю код своего приложения, ESLint выполняет проверку стиля моего кода, Babel транслирует мой ES6 в ES5 JavaScript, а мой JSX переносится в JS. Я просто хотел бы добавить в этот процесс проверку типов Flow.

Как я могу настроить приложение create-response-app для добавления компиляции Flow в стандартный процесс сборки, чтобы мне не приходилось запускать ее отдельно от командной строки?


webpack create-react-app flowtype babeljs eslint
person Captain Stack    schedule 15.03.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Хотя create-react-app действительно обнаруживает некоторые ловушки, они неоднократно отклоняли запросы на позволяют пользователям настраивать / переопределять / объединять конфигурацию веб-пакетов. В этом смысле ядро ​​«стандартной сборки» в значительной степени не настраивается.

Таким образом, я не думаю, что есть способ добавить плагин потока в webpack без извлечения или взлома react-scripts.

Тем не менее, если вы в первую очередь ищете немедленную обратную связь при написании кода, вы, вероятно, можете получить это из своей среды IDE, не задействуя сборку create-react-app. Например, VSCode с расширением Flow может дать вам опыт разработки такого типа. Когда вы вносите изменения, вам не нужно ничего запускать в командной строке, чтобы отмечать ошибки Flow:

Ошибка потока в VSCode

Для сборки в командной строке (например, в среде CI) вы можете сделать что-то вроде:

"scripts": {
  "start": "react-scripts start",
  "build": "flow && react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject",
  "flow": "flow"
}

По общему признанию, это все еще запускает Flow отдельно в командной строке, но, по крайней мере, это гарантирует, что Flow будет работать, и сборка завершится ошибкой при любых ошибках Flow, даже если вы запускаете только npm run build или yarn build.

Некоторые другие похожие проекты действительно поддерживают объединение конфигурации веб-пакетов. create-react-app перечисляет некоторые из этих альтернатив в README.

person Mike Patrick    schedule 20.10.2017

arrow_upward
1
arrow_downward

Один из вариантов - eject приложение и настроить конфигурацию. Другой вариант - это форк react-scripts и сборка собственной версии, которая добавит flow проверку в процесс сборки.

person riyadhalnur    schedule 01.06.2017