[Electron] 01. Electron + Typescript 시작하기

강의를 위한 글이 아니기 때문에 최대한 간결하게 작성했습니다.

질문 및 지적 감사히 받겠습니다.

---

 

프로젝트 경로를 만든 뒤, 일렉트론 앱을 만들어서 실행하기까지의 과정을 다룹니다.
React 추가 시, 아래 링크 참조.
[Electron] 01-2. Electron + Typescript + React 시작하기

 

경로를 만든 뒤, 해당 경로에서

npm init

index.js 말고 main.js를 entry point로 쓰는 게 관습.

(Electron 공식 문서에서 "entry point should be main.js" 언급.)

https://www.electronjs.org/docs/latest/tutorial/quick-start

 

electron과 electron-builder를 설치.

electron-builder는 Electron Application을 프로덕션으로 패키징 및 빌드할 수 있는 툴.

npm i -D electron electron-builder

 

 

Typescript 추가.

npm i -D typescript

 

npx tsc --init

tsconfig.json 파일 생성됨.

열어서 다른 값 수정할 필요 없고 outDir 검색해서 주석 처리 풀고 아래처럼 수정.

{
	...
	"outDir" : "./build"
}

그럼 이렇게 남는 거.

//tsconfig.json
{
	"target": "es2016",
    "module": "commonjs",
    "outDir": "./build",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
}

 

개발 운영체제마다 copy나 환경변수 설정 커맨드가 다른 걸 통합해주는 라이브러리.

copyfiles => file copy for cross platform
cross-env => setting environment variable for cross platform

npm i -D copyfiles cross-env

 

package.json 열어서 main, scripts를 아래처럼 변경

 "main": "build/main.js",
 "scripts": {
    "compile": "tsc && copyfiles -f index.html build",
    "start": "npm run compile && cross-env DEBUG=true electron ."
  },

 

main.js 파일명 main.ts 로 변경 후 아래 내용 입력. 

//main.ts
import { app, BrowserWindow } from "electron"; // ES import 

let window;

app.on("ready", () => {
  window = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });
  window.loadFile("index.html");
});

그리고 npm start로 시작하면 윈도우 창 뜨는 거 확인 가능.

 

참조

https://jetalog.net/104

https://velog.io/@jihoson94/Electron-Typescript

https://www.electronjs.org/docs/latest/tutorial/quick-start