Vanilla TypeScript + Electron

 

1. 일렉트론 문서를 보고 초기설정.

 

npm init -y

npm i -D electron

 

package.json

 

package.json에서 main 변경, scripts의 start 추가.

 

프로젝트 구조

 

index.html / main.js / preload.js 파일 추가.

 

index.html

 

main.js

 

preload.js

 

일렉트론 공식 문서의 코드를 그대로 붙여 넣었다.

 

완료하고 나서 npm start를 입력하면 일렉트론 앱 실행.

 

 

2. 타입스크립트 세팅.

 

npm i -D copyfiles

npm i -D typescript

npx tsc --init

 

tsconfig.json

 

src 디렉터리를 만들고 main.js와 preload.js를 그 안에 넣어준 뒤 확장자를 ts로 바꿔준다.

그 외 index.html도 src 아래로 옮기고, assets, ts 디렉터리를 만든 후 연결한 css와 ts 파일 생성.

 

프로젝트 구조

 

package.json

 

preload.ts

 

main.ts

 

package.json은 script와 type을 추가했다.

 

preload 파일은 ts 형식에 맞춰 수정했고,

 

main의 require은 import 방식으로 수정.

__direname은 CommonJS 환경에서만 기본적으로 제공하기 때문에 따로 내가 가져와야 한다.

electron . 명령어는 루트가 기준이지만 이제 build 아래 index.html을 실행시켜야 하므로

mainwindow.loadFile(path.join(__dirname, 'index.html'))로 수정.

 

index.html

 

index.ts

 

style.css

 

실행: npm start

 

빌드 후 프로젝트 구조

 

 

3. 일렉트론 앱 배포.

 

npm i -D electron-builder

 

package.json

 

배포: npm run make

* 심볼릭 링크를 생성할 수 없는 에러가 뜬다면 관리자 권한으로 실행.

 

배포 폴더 생성

 

 

https://github.com/Hyeonnam-J/assets.git

GitHub - Hyeonnam-J/assets