2017-03-15 7 views
2

저는 create-react-app를 사용하여 프로젝트를 진행하고 있으며 프로세스에 프로세스를 추가하려고합니다. official documentation은이를 수행하는 방법을 설명하며 비교적 간단하지만 지침에 따라 앱이 자체적으로 수행하는 내장 된 linting/building/compilation과 함께 추가됩니다.create-react-app 프로젝트의 컴파일 단계에 플로우 추가

내 이해에 따라 애플리케이션 코드를 저장하거나 변경할 때마다 ESLint는 코드에 대한 스타일 검사를 실행하고 Babel은 ES6 JavaScript를 ES5 JavaScript로 변환하고 JSX는 JS로 변환됩니다. 그 프로세스에 Flow typechecking을 추가하기 만하면됩니다.

Flow 컴파일을 표준 빌드 프로세스에 추가하여 명령 줄과 별도로 실행할 필요가 없도록 create-react-app를 구성하려면 어떻게해야합니까?

답변

1

하나의 옵션은 앱에 eject 일 것이며 구성을 맞춤 설정할 수 있습니다. 또 다른 옵션은 react-scripts을 포크하고 빌드 프로세스를 확인하기 위해 flow을 추가하는 사용자 정의 버전을 빌드하는 것입니다.

2

create-react-app은 일부 후크를 노출하지만 사용자가 웹팩 구성을 사용자 정의/무시/병합하도록 허용하는 요청은 repeatedly refused입니다. 이러한 의미에서 "표준 빌드"의 핵심은 대부분 사용자 정의 할 수 없습니다.

이와 같이, 나는 실제로 플러시 플러그인을 가져 오거나 해킹하지 않고 react-scripts에 가져 오는 방법이 있다고 생각하지 않습니다.

즉, 코드를 작성할 때 주로 즉각적인 피드백을 찾으려면 create-react-app의 빌드를 포함하지 않고 IDE에서이 코드를 가져올 수 있습니다. 예를 들어, Flow 확장 기능이있는 VSCode는 이러한 유형의 개발 경험을 제공 할 수 있습니다. 당신이 뭔가를 할 수있는,

Flow error in VSCode

을 (A CI 환경에서 예를 들어) 명령 줄에서 건물의 경우 : 변경, 당신은 흐름 오류 플래그가 명령 줄에서 아무것도 실행하지 않아도 같은 : 이것은 틀림없이 여전히 명령 줄에서 별도로 흐름을 실행하지만, 적어도 그 흐름이 실행됩니다 보장하고, 당신은 단지 npm run build 또는 yarn build를 실행해도 빌드가 어떤 흐름 오류에 실패합니다

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

.

일부 다른 유사한 프로젝트 do은 웹팩 구성의 병합을 지원합니다. create-react-applists some of these alternatives in their README.