[Electron.js] electron.js 빌드부터 실행까지 (electron-builder)

package.json 을 작성해 보자

script

 

  "scripts": {
    "start": "electron .",
    "build:osx": "build --mac",
    "build:linux": "npm run build:linux32 && npm run build:linux64",
    "build:linux32": "build --linux --ia32",
    "build:linux64": "build --linux --x64",
    "build:win": "npm run build:win32 && npm run build:win64",
    "build:win32": "build --win --ia32",
    "build:win64": "build --win --x64"
  },

electron-bulider, electron-packager 두개 다 사용해보았지만 electron-builder가 압도적으로 속도도빠르고 쉬웠다.

 

 

dependency

 

- dependencies에 electron-is-dev가 있어야 하며,

- electron 은 devDependencies 에 있어야 에러가 나지 않는다.

"dependencies": {
    "dropbox": "^2.5.12",
    "electron-is-dev": "latest"
  },
  "devDependencies": {
    "electron-builder": "^22.4.1",
    "electron-packager": "^14.2.1",
    "electron": "8.2.0",
    "electron-is-dev": "latest"
  },

build

 

빌드는 아래에서 퍼왔다.

"build": {
    "productName": "HelloElectron",
    "appId": "com.electron.hello",
    "asar": true, //소스코드를 asar 포맷으로 압축 패키징 옵션
    "protocols" : {
        "name" : "helloElectron",
        "schemes" : ["helloelectron"]
    },
    "mac": { //mac용 옵션
      "target": [
        "default"
      ],
      "icon": "./resources/installer/Icon.icns"
    },
    "dmg": { //mac 인스톨 옵션
      "title": "HelloElectron",
      "icon": "./resources/installer/Icon.icns"
    },
    "win": {  // windows 옵션
      "target": [  //
        "zip",  // zip
        "nsis"  // 인스톨러 실행파일
      ],
      "icon": "./resources/installer/Icon.ico"
    },
    "linux": { //리눅스 옵션
      "target": [
        "AppImage", 
        "deb",
        "rpm",
        "zip",
        "tar.gz"
      ],
      "icon": "./resources/linuxicon"
    },
    "nsis":{
      "oneClick" : false, //nsis 기본 옵션은 원클릭 true
      "allowToChangeInstallationDirectory" :true // 디렉토리 변경 옵션
    },
    "directories": {
      "buildResources": "resources/installer/",
      "output": "dist/", // 빌드 후 결과물 저장 경로
      "app": "."
    }
  },

termianl에서

electron-build build:osx

electron-builder build:osx

를 치면 끝

이유는 모르겠는데 npm build:osx 치면 되지 않았다.

 

 

출처: https://suwoni-codelab.com/electron/2017/04/17/Electron-distribution/