빌드란 ?

npm i electron

C:\Users\mark\electron-install>npm i electron
`-- electron@1.6.6
  +-- electron-download@3.3.0
  | +-- debug@2.6.4
  | | `-- ms@0.7.3
  | +-- fs-extra@0.30.0
  | | +-- graceful-fs@4.1.11
  | | +-- jsonfile@2.4.0
  | | +-- klaw@1.3.1
  | | +-- path-is-absolute@1.0.1
  | | `-- rimraf@2.6.1
  | |   `-- glob@7.1.1
  | |     +-- fs.realpath@1.0.0
  | |     +-- inflight@1.0.6
  | |     | `-- wrappy@1.0.2
  | |     +-- minimatch@3.0.3
  | |     | `-- brace-expansion@1.1.7
  | |     |   +-- balanced-match@0.4.2
  | |     |   `-- concat-map@0.0.1
  | |     `-- once@1.4.0
  | +-- home-path@1.0.5
  | +-- minimist@1.2.0
  | +-- nugget@2.0.1
  | | +-- pretty-bytes@1.0.4
  | | | +-- get-stdin@4.0.1
  | | | `-- meow@3.7.0
  | | |   +-- camelcase-keys@2.1.0
  | | |   | `-- camelcase@2.1.1
  | | |   +-- decamelize@1.2.0
  | | |   +-- loud-rejection@1.6.0
  | | |   | +-- currently-unhandled@0.4.1
  | | |   | | `-- array-find-index@1.0.2
  | | |   | `-- signal-exit@3.0.2
  | | |   +-- map-obj@1.0.1
  | | |   +-- normalize-package-data@2.3.8
  | | |   | +-- hosted-git-info@2.4.2
  | | |   | +-- is-builtin-module@1.0.0
  | | |   | | `-- builtin-modules@1.1.1
  | | |   | `-- validate-npm-package-license@3.0.1
  | | |   |   +-- spdx-correct@1.0.2
  | | |   |   | `-- spdx-license-ids@1.2.2
  | | |   |   `-- spdx-expression-parse@1.0.4
  | | |   +-- object-assign@4.1.1
  | | |   +-- read-pkg-up@1.0.1
  | | |   | +-- find-up@1.1.2
  | | |   | `-- read-pkg@1.1.0
  | | |   |   +-- load-json-file@1.1.0
  | | |   |   | +-- parse-json@2.2.0
  | | |   |   | | `-- error-ex@1.3.1
  | | |   |   | |   `-- is-arrayish@0.2.1
  | | |   |   | +-- pify@2.3.0
  | | |   |   | `-- strip-bom@2.0.0
  | | |   |   |   `-- is-utf8@0.2.1
  | | |   |   `-- path-type@1.1.0
  | | |   +-- redent@1.0.0
  | | |   | +-- indent-string@2.1.0
  | | |   | | `-- repeating@2.0.1
  | | |   | |   `-- is-finite@1.0.2
  | | |   | `-- strip-indent@1.0.1
  | | |   `-- trim-newlines@1.0.0
  | | +-- progress-stream@1.2.0
  | | | +-- speedometer@0.1.4
  | | | `-- through2@0.2.3
  | | |   +-- readable-stream@1.1.14
  | | |   | `-- isarray@0.0.1
  | | |   `-- xtend@2.1.2
  | | |     `-- object-keys@0.4.0
  | | +-- request@2.81.0
  | | | +-- aws-sign2@0.6.0
  | | | +-- aws4@1.6.0
  | | | +-- caseless@0.12.0
  | | | +-- combined-stream@1.0.5
  | | | | `-- delayed-stream@1.0.0
  | | | +-- extend@3.0.0
  | | | +-- forever-agent@0.6.1
  | | | +-- form-data@2.1.4
  | | | | `-- asynckit@0.4.0
  | | | +-- har-validator@4.2.1
  | | | | +-- ajv@4.11.7
  | | | | | +-- co@4.6.0
  | | | | | `-- json-stable-stringify@1.0.1
  | | | | |   `-- jsonify@0.0.0
  | | | | `-- har-schema@1.0.5
  | | | +-- hawk@3.1.3
  | | | | +-- boom@2.10.1
  | | | | +-- cryptiles@2.0.5
  | | | | +-- hoek@2.16.3
  | | | | `-- sntp@1.0.9
  | | | +-- http-signature@1.1.1
  | | | | +-- assert-plus@0.2.0
  | | | | +-- jsprim@1.4.0
  | | | | | +-- assert-plus@1.0.0
  | | | | | +-- extsprintf@1.0.2
  | | | | | +-- json-schema@0.2.3
  | | | | | `-- verror@1.3.6
  | | | | `-- sshpk@1.13.0
  | | | |   +-- asn1@0.2.3
  | | | |   +-- assert-plus@1.0.0
  | | | |   +-- bcrypt-pbkdf@1.0.1
  | | | |   +-- dashdash@1.14.1
  | | | |   | `-- assert-plus@1.0.0
  | | | |   +-- ecc-jsbn@0.1.1
  | | | |   +-- getpass@0.1.7
  | | | |   | `-- assert-plus@1.0.0
  | | | |   +-- jodid25519@1.0.2
  | | | |   +-- jsbn@0.1.1
  | | | |   `-- tweetnacl@0.14.5
  | | | +-- is-typedarray@1.0.0
  | | | +-- isstream@0.1.2
  | | | +-- json-stringify-safe@5.0.1
  | | | +-- mime-types@2.1.15
  | | | | `-- mime-db@1.27.0
  | | | +-- oauth-sign@0.8.2
  | | | +-- performance-now@0.2.0
  | | | +-- qs@6.4.0
  | | | +-- safe-buffer@5.0.1
  | | | +-- stringstream@0.0.5
  | | | +-- tough-cookie@2.3.2
  | | | | `-- punycode@1.4.1
  | | | +-- tunnel-agent@0.6.0
  | | | `-- uuid@3.0.1
  | | +-- single-line-log@1.1.2
  | | | `-- string-width@1.0.2
  | | |   +-- code-point-at@1.1.0
  | | |   +-- is-fullwidth-code-point@1.0.0
  | | |   | `-- number-is-nan@1.0.1
  | | |   `-- strip-ansi@3.0.1
  | | |     `-- ansi-regex@2.1.1
  | | `-- throttleit@0.0.2
  | +-- path-exists@2.1.0
  | | `-- pinkie-promise@2.0.1
  | |   `-- pinkie@2.0.4
  | +-- rc@1.2.1
  | | +-- deep-extend@0.4.1
  | | +-- ini@1.3.4
  | | `-- strip-json-comments@2.0.1
  | +-- semver@5.3.0
  | `-- sumchecker@1.3.1
  |   `-- es6-promise@4.1.0
  `-- extract-zip@1.6.0
    +-- concat-stream@1.5.0
    | +-- inherits@2.0.3
    | +-- readable-stream@2.0.6
    | | +-- core-util-is@1.0.2
    | | +-- isarray@1.0.0
    | | +-- process-nextick-args@1.0.7
    | | +-- string_decoder@0.10.31
    | | `-- util-deprecate@1.0.2
    | `-- typedarray@0.0.6
    +-- debug@0.7.4
    +-- mkdirp@0.5.0
    | `-- minimist@0.0.8
    `-- yauzl@2.4.1
      `-- fd-slicer@1.0.1
        `-- pend@1.2.0

npm i electron

• step1. 모듈 및 의존 모듈
  • electron 모듈 설치
  • electron-download 모듈 설치
  • 기타 의존 모듈 설치
• step2. postinstall 실행
  • node_modules/electron/install.js 실행
  • electron-download 모듈을 통해 OS / Architecture 에 맞는 prebuilt 된 실행 파일 다운로드하여,
  • node_modules/electron/dist/ 에 저장
  • 그래서 얼마 전까지는 모듈 이름도 'electron-prebuilt' (deprecated)

npm start

{
  "name": "ProtoPie-Authoring",
  "productName": "ProtoPie",
  "companyName": "Studio XID",
  "version": "3.3.0-qa.1",
  "author": "Studio XID <eng@protopie.io> (https://protopie.io)",
  "description": "Super-Awesome Interaction Prototyping Tool",
  "homepage": "https://www.protopie.io/",
  "main": "./output/electron/main.js",
  "private": true,
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "1.4.15"
  }
}

npm start

• step1. electron . 실행
  • npm script 의 명령은 우선 node_modules/.bin/ 안에서 찾는다.
  • node/modules/.bin/electron.cmd . 실행
• step2. node_modules/electron/cli.js 실행
  • node_modules/electron/path.txt 를 읽어서, ${실행 파일}을 찾는다.
  • package.json 이 있는 폴더를 인자로 넣어서node_modules/electron/${실행 파일}을 실행

C:\Users\mark\electron-install>type node_modules\electron\path.txt
dist/electron.exe

결국

OS / Architecture 에 맞게 미리 빌드된

실행파일을 실행하는것 !

node_modules/electron/dist/electron.exe

프로덕션용 앱 만들고 배포하기

step1. prebuilt 된 실행파일(.zip)을 구합니다.

step2. 개발 완료된 소스를 위치에 맞게 넣습니다.

// macOS
electron/Electron.app/Contents/Resources/app/
├── package.json
├── main.js
└── index.html

// macOS - asar
electron/Electron.app/Contents/Resources/
└── app.asar

// Windows
electron/resources/app
├── package.json
├── main.js
└── index.html

// Windows - asar
electron/resources/
└── app.asar

step3. Rebranding

• 실행파일의 이름이나 아이콘을 각자에 맞게 수정하는일
  • 어어어엄청 귀찮아요
  • 개발자가 할짓은 아닌듯
• electron 을 fork 떠서 처리해야할 필요가 없다. (공식 문서)
• 룰에 맞게 수작업을 할 수 있다.
• 하지만 귀찮으니 공식 문서에서 추천하는 모듈들을 사용한다.
  • electron-packager
  • electron-builder (현재 사용 중)
  • I LOVE 'electron-userland'

step4. '설치 파일'로 만들기

• 토이 프로젝트나, 내부용 앱이라면 step3 에서 멈춰도 충분하지만,
• 진정한 상용 앱이라면 .app / .zip 으로 줄순 없자나요?
  • macOS => .dmg 로 만들기
  • Windows => .exe 로 만들기 (NOT 실행 프로그램)
• 이것도 만들어서 다 할수 있지만,
  • 우리에겐 'electron-builder' 가 있습니다.
  • 'electron-packager' 는 step3 까지만 해줍니다.
• 그리고 설치 파일로 만들기 전, 후에는 codesign 이 필요합니다.

step5. 배포용 서버에 설치파일 올리기