Electron.js 프로젝트 빌드 방법(윈도우 실행파일 만들기)

일렉트론 빌드, electron 빌드, electron build

[ 빌드툴 별 빌드 방법 ]

//-------------------------------------
< electron-builder >  <== 추천
https://github.com/electron-userland/electron-builder - 13.3k
- v25 , 24-03

     - 설치
npm install -g electron-builder

 

     - package.json 파일

"build": {
        "appId": "mjraker.id",
        "productName": "mjraker App",
        "icon": "dist/raker1.ico",
"directories": {
       "output": "dist"
    },
     "files": [
       "**/*",
      "!node_modules"
     ],
        "win": {
            "target": "nsis"
        }
    },

    - 빌드 실행
electron-builder --win


//-------------------------------------
< @electron/packager >
https://github.com/electron/packager - 68
     - v18 , 23-12
     - electron-packager 는 개발 중단

> npm install --save-dev @electron/packager

> npx electron-packager . testapp --platform=win32 --arch=x64 --out=dist
     - or
> node_modules\.bin\electron-packager . testapp --platform=win32 --arch=x64 --out=dist


//-------------------------------------
< electron-forge >  <== 비추, 빌드된 크기 크고, 느림
- @electron-forge/cli
https://github.com/electron/forge - 6.2k
- v7.3 , 24-02
별도 패키지 electron-forge 는 개발 중단

> npm install --save-dev @electron-forge/cli @electron-forge/maker-squirrel

//-------------------
package.json 수정

"config": {
        "forge": {
            "packagerConfig": {
                "icon": "dist/App1.ico"
            },
            "makers": [
                {
                    "name": "@electron-forge/maker-squirrel",
                    "config": {
                        "name": "MyApp",
                        "setupIcon": "dist/App1.ico"
                    }
                }
            ]
        }
    },

- 빌드 명령
> npx electron-forge make


//-----------------------------------------------------------------------------
* 빌드된 용량 줄이기 ( electron-builder )

- package.jsson에서 build -> files 항목에 필요한 항목만 추가 한다.

"build": {       
        "files": [
            "!node_modules",   <== 처음에 오면 나중에 기술된 것은 포함됨
            "app/**/*",
            "config.js",
            "node_modules/picnic",
            "node_modules/microtip/**/*"
        ],
        
    },

 

//-----------------------------------------------------------------------------

< 참고 >

@electron/rebuild 패키지 용도
- 시스템에 설치된 node.js의 버전과 electron이 사용하는 node.js의 버전이 달라서 작동을 확인하기 위해 필요
- Electron Forge & Electron Builder 등의 빌드 툴에서 사용
- 빌드에러가 난다면 이 rebuild를 실행해 본다.

 

> npm install --save-dev @electron/rebuild
> node_modules\.bin\electron-rebuild

    - 에러 메시지
Error: node-gyp failed to rebuild  '...\node_modules\process-list'

     - 해결 방법
package.json 에서 'process-list'  패키지 삭제