Electron의 가장 빠른 자습서

환경

OS: Windows10

terminal: Cmder

전제

node.js, npm, electron, electron-packager는 이미 설치되어 있어야 합니다.

$ node -v
v10.3.0
$ npm -v
6.1.0
$ electron -v
v1.4.13

절차

1. 프로젝트 폴더 만들기

$ mkdir sample
$ cd sample

2. npm init로 package.json 만들기

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (sample)
version: (1.0.0)
description:
entry point: (index.js) main.js
test command:
git repository:
keywords:
author: fk2000
license: (ISC) MIT
About to write to C:\Users\fk2000\workspace\sample\package.json:

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "fk2000",
  "license": "MIT"
}


Is this OK? (yes) yes

3. 디버그 시작 확인

$ electron .

디버그 콘솔도 기동한다.

4. electron 버전 확인

패키징 명령 옵션에 Electron 버전을 입력하려면 확인하십시오.

$ electron -v
v1.4.13

5. 포장

electron-packager 명령의 사용법은 다음과 같습니다.

Usage: electron-packager [options...]

※Mac이 아니기 때문에 darwin 옵션은 skip됩니다.

$ electron-packager . sample --platform=darwin,win32 --arch=x64 --electron-version=1.4.13
Downloading tmp-18752-0-electron-v1.4.13-darwin-x64.zip
Downloading tmp-18752-1-SHASUMS256.txt-1.4.13
[============================================>] 100.0% of 2.88 kB (2.88 kB/s)
Cannot create symlinks (on Windows hosts, it requires admin privileges); skipping darwin platform
Wrote new app to C:\Users\fk2000\workspace\sample\sample-win32-x64

6. 완성된 파일 확인

 ~\workspace\sample  [email protected] 
$ ls -l
total 10
-rw-r--r-- 1 OryLab 197121  389 1月  10 17:53 index.html
-rw-r--r-- 1 OryLab 197121 1083 1月  10 17:52 main.js
drwxr-xr-x 1 OryLab 197121    0 1月  10 17:56 sample-win32-x64/
-rw-r--r-- 1 OryLab 197121  211 1月  10 17:49 package.json

7. 바이너리를 시작해 봅니다.

디버그 시작시와 동일한 화면이 표시됩니다.

$ cd sample-win32-x64
$ sample.exe

sample.exe를 실행하면 디버그 기동과 같은 것이 표시된다.


이상, Electron의 가장 빠른 튜토리얼이었습니다.