Visual Studio 2017 리액트 프로젝트
Visual Studio 2017에서 리액트 애플리케이션을 개발하고 싶습니다.NET 어플리케이션(같은 솔루션 내).
저는 TypeScript를 사용하고 있기 때문에 빌드를 커스터마이즈할 수 있는 프로젝트 타입을 원합니다(프로젝트를 Web 패키징하는 등 표준 Visual Studio TypeScript 빌드는 충분하지 않습니다).
node.js 개발자 도구를 설치했지만 node.js 특정 프로젝트(시작 시 node.js 인스턴스를 실행)만 생성할 수 있으며 빌드 프로세스를 커스터마이즈할 수 없습니다.
이에 가장 적합한 프로젝트 유형은 무엇입니까?
최근에 이 작업을 수행했는데 다음 사항을 권장합니다.
- Visual Studio 2017에서 "공백" 솔루션 프로젝트를 만듭니다.
- 를 추가/작성합니다.Visual Studio에서 보통처럼 NET 프로젝트를 수행합니다.
- 이제 React 프로젝트를 만듭니다.Facebook의 create-react 앱을 사용하여 실제로 리액트 프로젝트를 생성했습니다.Webpack, Jest(테스트용), 실(패키지 관리용) 등, 매우 좋은 기능이 짜넣어져 있습니다.그러나 이러한 세부 정보는 사용자에게 "숨겨져" 생성 프로젝트가 훨씬 단순해 보입니다.빌드/테스트 프로세스에 대한 제어가 필요한 경우
create-react-app eject명령어를 입력합니다.이 조작은, 「일방향」의 조작이므로, 다음의 장소에 파일을 되돌릴 수 없습니다.create-react-app노드와 실을 따로 설치해야 합니다. TypeScript도 사용해야 하므로 다음과 같이 react-scripts-ts 스크립트를 사용해야 합니다.
create-react-app my-app --scripts-version=react-scripts-ts마이크로소프트는 이 일을 잘 해내고 있다.
문제는 생성된 React 프로젝트를 Visual Studio로 가져오는 것입니다.Visual Studio와 함께 설치되는 "Visual Studio Installer"에서 "Node.js development" 모듈을 설치하여 이 작업을 수행했습니다.공교롭게도 Microsoft는 공백 또는 빈 TypeScript 프로젝트템플릿을 삭제한 것 같습니다(여기를 참조).
Node.js 도구가 설치되면 솔루션에 노드 기반 프로젝트를 생성할 수 있습니다.[파일] -> [새로 만들기] -> [프로젝트...]에서 선택할 수 있습니다.-> 템플릿 -> 기타 언어 -> TypeScript 왼쪽 메뉴 네비게이션"Blank Node.js Web Application"을 선택했습니다.
프로젝트 . 리액트 프로젝트 파일은 리액트합니다.
create-react-app비주얼 스튜디오Visual Studio에서 디렉터리를 생성하여 프로젝트 파일에 추가한 다음 생성된 폴더를 복사하고 최종적으로 Visual Studio에서 프로젝트 폴더에 추가하는 것이 더 쉽습니다.할 수 .
package.json에 의해create-react-appVisual Studio, Mads Kristensen Task Runner Explorer, Visual Studio 。
또 다른 방법은 Visual Studio Code에서 리액트 확장을 사용하는 것입니다.요청하신 내용은 아니지만 Visual studio와 유사한 모양과 느낌을 받을 수 있으며 React를 완벽하게 지원합니다.
기사(여기를 클릭)를 사용하여 VS 2017에서 했습니다.Blank Node.js Web Application이라고 하는 템플릿이 있습니다.여기서 확인해 주세요.
알아두면 좋은 점 몇 개:
Visual Studio 2017에서는 Angular에서처럼 React에 대한 템플릿이 없습니다.
CLI(여기를 참조)와 Visual Studio를 사용하여 프로젝트를 만들면 차이가 있습니다.Cli가 작성한 프로젝트는 기본적으로 모든 모듈을 node_modules에 로드하므로 처음에는 약 132MB가 소요되지만 Visual Studio를 사용하여 프로젝트를 작성할 경우 node_modules에 필요한 모듈만 로드되므로 처음에는 약 75MB가 소요됩니다.이 문제는 실제 환경에서 배포를 시작할 때 중요합니다.
도움이 되길 바래!
면책사항:항상 요건에 따라 다릅니다.
솔루션과 "Add -> Existing Web Site"를 오른쪽 클릭하여 "BUILD -> Configuration Manager"에서 빌드 대상에서 제외함으로써 React 프로젝트를 포함하는 폴더를 추가할 것을 권장합니다.
언급URL : https://stackoverflow.com/questions/43652716/react-project-in-visual-studio-2017
'programing' 카테고리의 다른 글
| Angular 사용 시 템플릿을 프리로드하는 방법이 있습니까?JS 라우팅? (0) | 2023.03.31 |
|---|---|
| 래퍼 div를 사용하지 않고 ng-switch를 사용하는 AngularJ (0) | 2023.03.31 |
| 사전 정의된 유형 'System'입니다.Object'가 정의되어 있지 않거나 .net 4.6을 Import하지 않았습니다. (0) | 2023.03.31 |
| 응답에 useState 훅이 있는 콜백을 사용하는 방법 (0) | 2023.03.31 |
| ASP 후 아약스에 항변형 토큰을 포함한다.넷 MVC (0) | 2023.03.31 |