electron forge 사용 설명

1. Eletron Forge 사용기
엔트리교육연구소
김정용

2. onPress
Electron 기반 간단한 마크다운 에디터
https://github.com/kimorkim/onpress

3. Electron Forge?
일렉트론 어플리케이션 개발을 위한 CLI 도구
The command line interface for ambitious Electron applications.
Electron Compile과 연계
ES6, TypeScript, LESS, SCSS등의 기술을
Webpack 없이 빠르게 개발 가능
가장 빠른 일렉트론 개발 환경 구성

4. 기본 명령어사용법
Command Line Interface

5. Commands
import
init
install
lint
make
package
publish
start
import
init
install
lint
make
package
publish
start

6. Commands – init
Electron Forge에서 제공하는 템플릿으로 어플리케이션을 생성함
기본 사용법
$ electron-forge init [path]
인수(arguments)
- template
- lintstyle

7. Commands – init – template
https://beta.electronforge.io/templates

8. Commands – init – template
React
$ electron-forge init [project name] –template=react
VueJs 2.0
$ electron-forge init [project name] –template=vue
Angular 2.0
$ electron-forge init [project name] –template=angular2
https://beta.electronforge.io/templates

9. Commands – lint
Lint를 수행하고 실패 시 결과물을 출력 함
기본 사용법
$ electron-forge lint [path]
초기 init에 정의된 lint style이 기본적으로 사용 됨
Aribnb와 Standard중에서 선택가능
.eslintrc 파일을 이용해 입맛대로 lint 수정 가능

10. Commands – lint

11. Commands – lint
lint 자체에 오류가 있는 경우 확인
$ npm ls

12. Commands – start
Electron Forge 프로젝트를 실행함
기본 사용법
$ electron-forge start [path]

13. Commands – start
electron-prebuilt-compile 실행

14. Commands – make
플랫폼 별 배포 파일을 만듬
기본 사용법
$ electron-forge make [path]
인수(arguments)
- arch=[value]
- targets=[value]
- skip-package
설정은 package.json내의 config

15. Commands – make (가능한 플렛폼)
Target Name Available Platform
Zip All
Squirrel Windows
Appx Windows
Dmg Darwin
Deb Linux
Rpm Linux
Flatpak Linux
Tip: Mac 에서 빌드하면 전체 패키지 빠르게 빌드 가능

16. Commands – make – config.js
config.js 를 이용해 설정 (package.json에 등록)

17. Commands – make – config.js
afterCopy, afterExtract 훅 사용 가능
asar내 불필요 파일제거
외부 파일 추가
빌드 하는 컴퓨터에 맞춤 설정 가능
electronInstallerDMG의 contents 설정시
다양한 처리 가능

18. Commands – package
플랫폼 별 실행 파일을 만듬
기본 사용법
$ electron-forge package [path]
인수(arguments)
- arch=[value]
- platform=[value]
Config의 electronPackagerConfig 요소를 따라 감

19. Make와 Package의 차이
Make
설치 파일 생성
배포용도로 사용
Package
실행 파일 생성
테스트용도로 사용
배포용도로 사용 될 수 있음(NSIS 등 외부 설치프로그램 이용시)

20. 실전 팁
onPress를 만들면서

21. 실전 팁 – 실행 속도문제
Semantic UI React 사용시 느려 짐
Electron-compile의 빌드 범위
node_module, bower_component등 제외
Complie이 미리 필요한 파일은 같이 빌드 될 수 있도록 처리

22. 실전 팁 – 미디어 사용문제
이미지, 사운드, 비디오 등의 사용문제
File protocol 사용불가
외부파일 로드가 안됨 – electron-compile 문제
Compile 당시에 .cache가 만들어 지지않은 파일은 로드 불가능
Custom protocol이나 fs 등을 이용해서 처리 가능
Electron-compile 6.3.0 부터
addBypassChecker 를 이용해 처리 가능

23. addBypassChecker 사용방법
addBypassChecker는 Compile 이후에 수행
Main process에서 프로그램 구동시 로직 삽입
특정 경로나 파일확장자를 체크해서 체크를 회피

24. 실전 팁 – DEBUG 의 활용
윈도우
set DEBUG=*
POSIX
export DEBUG=*
각종 오류 메시지 확인가능
DEBUG 이후에 붙는 인수에 확인이 필요한 target 지정 가능
예) electron-compile
Electron-forge 사용에 있어 문제점 파악이 쉬워 짐

26. 실전 팁 – 파일 대소문자 구분
css 등 일반적인 파일 링크 사용시 대소문자 중료
실제 파일 빌드전에는 대소문자 관계없이 동작
Electron-forge package 이후 대소문자로 처리로 인해 구동 불가능
주의해서 파일작성

27. 실전 팁 – Webview 사용해 보기
프로세서가 따로 돌기 때문에 민감한 성능 문제 해결
과도한 사용은 오히려 자원 낭비의 가능성 높음
onPress에서는 미리보기 화면을 webview로 구성

28. 실전 팁 – 용량 다이어트
기본적으로 모든 파일은 electron-compile에서 .cache로 만듬
만약에 static image등이 많다면 compile 대상에서 제외
node_modules, bower_componets에 집어 넣어 처리
addBypassChecker를 이용해 로드 가능

29. 실전 팁 – DMG 세팅 변경하기
기본적으로 제공 되는 환경이 너무 안좋음
반드시 커스터 마이징 필요함
Electron-forge -> electron-installer-dmg -> appdmg 이므로
appdmg 세팅 사용가능
Package.json에 내용 작성할 경우 동적 경로 할당 불가능
Config.js 는 필수(컴퓨터 환경에 따라 경로 맞춤 필요)

30. Electron-Forge의단점(개인적인생각)
실전에 투입하기 전에

31. 용량문제
모든 파일을 compile을 거쳐 .cache파일을 생성
파일 개수가 많을수록 불필요해 보이는 용량이 낭비

32. Webpack이 아니다
Webpack에서 당연히 지원하던 기능이 Electron-compile에서는 지원이 안됨
예) loaders, webpack plugin, webpack 최적화
다행히 Electron-compile에도 Live Reload/HMR 기능이 생김

33. Electron-forge의존성 관리
Electron-forge는 userland의 집합체
변경이 잦고 사용 중 버그의 해결점을 찾기가 힘듬
해결책이 electron-forge가 아닌 다른 라이브러리에 있을때가 많음
버전이 수시로 바뀌면서 의도한 대로 동작이 안 이루어 질 때도 있음

34. 아직은 부족한 문서
기본적인 문서는 잘 갖추어 짐
기본 README.md
문서 사이트 https://beta.electronforge.io/
고급 사용이 필요한 경우 알아서 처리해야 함
해당 내용이 electron-forge가 아니거나 설명이 없음
예) dmg 파일생성, addBypassChecker 등
다만 이슈에 문의 하면 답변이 빠르고 정확한 편

35. AutoUpdate 문제
Electron의 기본 AutoUpdate는 Squirrel 기반
Electron-forge는 윈도우는 Squirrel을 지원하나 OSX 지원 안함
다른방식의 구현을 검토해야 함

36. 느린 빌드(파일이 많을 경우)
윈도우에서 엄청 느리다
파일이 상당히 많을 경우 electron-builder에 비해 최소 수배 이상 느림
일반적인 상황에서는 무시해도 좋을 듯
OSX 에선 빠르다
wine를 사용해서 windows 파일 빌드 가능

37. 그럼에도 불구하고…

38. 이래서 선택 했습니다
빠르고 편한 세팅
편한 패키징
CI와의 연계(Travis, AppVeyor)
추후 publish 까지 붙일 예정
빠른 피드백
앞으로 더 좋아질 것으로 보인다