티스토리 뷰


※ Electron, Git 을 미리 설치

Electron 공식 사이트: https://electronjs.org/


1. 폴더 생성

Electron 개발할 폴더를 만든다.

2. MINGW64

그 폴더를 마우스 우클릭하여 "Git Bash Here"을 클릭한다.

3. Electron 시작

npm init

위 커맨드를 입력하고 package name, version, description, entry point(메인js 이름), author 

정도만 입력하고 나머진 그냥 엔터를 눌러 건너뛴다.


4. Package.json 수정

entry point(사진은 main.js)에 설정한 이름의 js 파일을 만들고,

package.json의 scripts 부분을 아래와 같이 수정해둔다.

(dependencies 부분은 npm install로 알아서 바뀜)

(electron-packager . 패키지이름(아래선 CSW) --asar)


5. electron-packager 밑 asar 설치, HTML 만들기

electron-packager 와 asar(소스 폴더 숨기기->app.asar) 를 설치한다.

npm install electron-packager -g
npm install asar --save-dev


그다음, 메인 JS 파일 위치에 메인 HTML 파일을 만든다. (이 글에선 mainWindow.html)

(auto-snippet을 이용해 html을 입력해 기본 HTML 틀 생성)

HTML 코드 보기


메인 JS을 Electron을 사용하기 위해 기본 틀을 짠다. mainWindow.html은 알아서 이름 바꾼다.

JS 코드 보기


6. 앱 실행하기

npm start


위 커맨드를 입력하면 package.json scripts start 가 실행된다. (electron .)

이후는 강좌를 참고해서 어떻게 수정하는지 익히기

https://www.youtube.com/results?search_query=electron+tutorial

https://electronjs.org/docs/tutorial

https://www.youtube.com/playlist?list=PLkOqyUCsoGE2KwOmt698IxAerJbLLws1a


라이프 사이클


EXTRA. 애플리케이션 패키징 (혹은 아래 electron-builder 이용)

package.json 을 똑같이 만들었으면 아래 커맨드로 패키징할 수 있다.

(npm run build = electron-packager . --asar)

npm run build


개발 폴더에 보면 패키지이름-운영체재 폴더안에 exe나 app 실행 파일이 있다.

이 폴더를 zip으로 압축하던지 window installer 이용해서 패키징

잡동사니가 많다


EXTRA2. electron-builder(NSIS) 이용하기

npm install -g electron-builder

위 명령어를 bash에 입력 후 

package.json 을 아래처럼 혹은 원하는 옵션(링크)으로 수정한다.

asar=소스 숨기기, allowToChangeInstallationDirectory 기본은 false인데 true해야 설치 경로를 바꿀 수 있다.


그다음 아래 명령어를 입력하면 exe installer (NSIS)로 패키징된다.

build -w


그러면 dist란 폴더에 setup 파일이 형성된다.


댓글
댓글쓰기 폼
«   2018/07   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        
Total
96,655
Today
2
Yesterday
5