저는 Electron, React (jsx)와 Babel의 앱을 코딩하고 있습니다. 나는 오늘 저녁 Typescript로 바꿨고 모든 것을 작동시키는 법을 알 수 없다. Npm 패킷은 React 나 Typescript 중 하나를 설정하지만 Electron가 아니라 둘 다 설정합니다. (나는 또한 webpack을 구현해야한다.) 내 질문은 다음과 같다. 최소 폴더 구조, 파일 및 모든 것이 작동하도록하는 패킷은 무엇인가? 필자는 Typescript로 작성된 React 구성 요소를 사용하여 메인 윈도우에 hello world를 표시하려고합니다. 현재 내 패킷은 Electron, React, ReactDOM, Typescript입니다. 모든React와 Typescript로 Electron을 설정하는 방법은 무엇입니까?
먼저 내가 타이프의 공식 웹 사이트에이 튜토리얼을 따라 : https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
당신은 당신이 웹팩 수신 번들 코드 (A bundle.js를 포함하는의 dist 폴더로 종료됩니다 모든 단계를 수행하면 Typescript에서) .tsx 파일을 포함하는 src 폴더. Typescript는 상자에서 바로 지원합니다. "jsx": "react"을 tsconfig.json에 추가하고 파일 .tsx을 .ts 대신 바꿉니다. 그런 다음 index.js를 루트 폴더 (여기에서 복사 : https://github.com/electron/electron-quick-start/blob/master/main.js)에 추가하십시오.
앱 폴더 동안 앱 폴더 electron .와
실행 전자합니다 (./dist/bundle.js 파일을 생성한다) 동안 webpack와 전자 로컬 npm install electron --save-dev 또는 전체적으로 npm install -g electron
실행 웹팩 설치
주의해야 할 중요한 점은 webpack의 진입 점인 ./src/index.tsx이고 전자 진입 점은 ./index.js입니다. ./dist/bundle.js를로드하는 index.html을로드하는 전자로드 index.js. index.js를 index.ts로 변환 할 수 있지만 webpack의 엔트리 포인트를 변경해야합니다.
그 질문에 대한 답변이 많이 있습니다. 현명한 기본값으로 이미 이러한 종속성을 사용하는 간단한 스캐 폴딩을 사용하는 것이 좋습니다. 주위에 몇 사람이 있습니다. [This one] (https://medium.com/@paulirwin/getting-started-with-electron-and-visual-studio-code-typescript-and-react-36d41b68fadb)이 좋은 예가 될 것 같습니다. '타이핑 '을 무시하고 대신'@ types /'를 사용합니다. – zeh