일렉트론 빌드하기: Electron Installation file build process

박두팔이·2024년 10월 21일

ELECTRON

목록 보기

5/5

빌드 명령어: `npm run build:win`

// package.json 
{
  "name": "stl-3d-viewer",
  "version": "1.0.0",
  "description": "A simple STL 3D viewer built with Electron and Three.js",
  "main": "./dist/main/index.js",
  "author": "stl-3d-viewer.com",
  "homepage": "https://electron-vite.org",
  "scripts": {
    "format": "prettier --write .",
    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts,.vue --fix",
    "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
    "typecheck:web": "vue-tsc --noEmit -p tsconfig.web.json --composite false",
    "typecheck": "npm run typecheck:node && npm run typecheck:web",
    "start": "electron-vite preview",
    "dev": "electron-vite dev",
    "build": "electron-vite build",
    "postinstall": "electron-builder install-app-deps",
    "build:unpack": "npm run build && electron-builder --dir",
    "build:win": "npm run build && electron-builder --win",
    "build:mac": "npm run build && electron-builder --mac",
    "build:linux": "npm run build && electron-builder --linux"
  },
  "dependencies": {
    "@electron-toolkit/preload": "^3.0.0",
    "@electron-toolkit/utils": "^3.0.0",
    "three": "^0.169.0",
    "three.meshline": "^1.4.0"
  },
  "devDependencies": {
    "@electron-toolkit/eslint-config": "^1.0.2",
    "@electron-toolkit/eslint-config-ts": "^2.0.0",
    "@electron-toolkit/tsconfig": "^1.0.1",
    "@rushstack/eslint-patch": "^1.10.3",
    "@types/node": "^20.14.8",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vue/eslint-config-prettier": "^9.0.0",
    "@vue/eslint-config-typescript": "^13.0.0",
    "electron": "^31.0.2",
    "electron-builder": "^24.13.3",
    "electron-vite": "^2.3.0",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.26.0",
    "prettier": "^3.3.2",
    "typescript": "^5.5.2",
    "vite": "^5.3.1",
    "vue": "^3.4.30",
    "vue-tsc": "^2.0.22"
  },
  "build": {
    "appId": "com.stl-3d-viewer",
    "productName": "STL 3D Viewer",
    "files": [
      "dist/**/*",
      "package.json",
      "node_modules/**/*"
    ],
    "directories": {
      "buildResources": "build"
    },
    "win": {
      "icon": "build/icon.ico",
      "target": "nsis"
    },
    "mac": {
      "icon": "build/icon.ico",
      "target": "dmg"
    },
    "linux": {
      "icon": "build/icon.ico",
      "target": "AppImage"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    }
  }
}

npm run build:win 명령어 실행 후,"npm run build && electron-builder --win" 스크립트 실행

✅ npm run build:win

npm(Node Package Manager)

npm에서 패키지 설치, 의존성 관리, 스크립트 실행 등을 위한 명령어

run

npm run 명령어는 package.json 파일의 scripts 섹션에 정의된 사용자 정의 스크립트를 실행하는 역할

npm run 동작 방식

package.json 파일의 scripts 섹션 탐색:
- 프로젝트 루트 디렉토리에 있는 package.json파일에서 scripts섹션을 찾아 해당 스크립트에 대한 명령어를 실행
- run 명령어는 npm의 내장 명령어로 package.json파일에 정의된 스크립트를 실행하는 데 사용한다.
- npm run <script> 형태로 사용하며 특정 스크립트 이름에 대해서는 run을 생략할 수 있다.
```
// ex. 특정 스크립트 예시
{
  "scripts": {
    "start": "node app.js",
    "test": "(생략)"npm run
  }
}
```
- npm run build:win에서의 npm run과 "build:win": "npm run build && electron-builder --win",코드의 npm run build의 동작은 서로 다른 의미를 갖고 있다. 전자의 경우, npm run은 npm패키지 매니저를 통해 script섹션의 build:win 을 실행하고 후자의 경우, npm run은 스크립트 안에서 다른 스크립트를 실행하는 역할을 한다.

build:win

build:win 스크립트를 사용하는 이유는 각 운영체제마다 설치 파일 포맷과 요구사항이 다르기 때문.

Windows: 보통 .exe 파일 / macOS: DMG(Disk Image) 파일을 사용
build:win이 실행되면, "npm run build && electron-builder --win" 스크립트가 실행

✅ npm run build

npm run build가 실행되면 npm은 script내부에 있는 build 명령어를 실행한다.
"build": "electron-vite build" 가 실행된다.

✅ electron-vite build

electron-vite build 명령어는 Electron과 Vite를 통합하여 애플리케이션을 프로덕션용으로 빌드하는 과정에서 사용되는 명령어이다.
Vite를 통해 번들링과 빌드 작업을 수행하고 electron애플리케이션의 메인 프로세스와 렌더러 프로세스를 처리한다.
vite.config.js나 vite.config.ts 파일을 사용해 Electron과 Vite의 설정을 기반으로 애플리케이션을 빌드한다.

// electron.vite.config.ts
import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()],
    build: {
      outDir: 'dist/main'
    }
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src')
      }
    },
    plugins: [vue()],
    build: {
      outDir: 'dist/renderer' // 렌더러 빌드 결과 저장 폴더
    }
  }
})

electron-vite build명령어가 실행될 때 electron.vite.config 파일이 로드되어 Electron애플리케이션의 메인프로세스, 프리로드 스크립트, 렌더러 프로세스의 빌드 과정을 처리하게 된다.
1. Main process build
```
main: {
  plugins: [externalizeDepsPlugin()],
  build: {
    outDir: 'dist/main'
  }
}
```
- externalizeDepsPlugin(): 메인 프로세스에서 node_modules에 있는 외부 패키지들을 번들링하지 않도록 처리하는 플러그인.
- 이 플러그인을 통해 외부 의존성들을 node_modules 폴더에 남겨두고, 빌드 결과물에 포함되지 않도록 함.
- build.outDir: 메인 프로세스의 빌드 결과물이 저장될 디렉터리 경로. dist/main 디렉터리에 저장되도록 설정함

Renderer process build

renderer: {
  resolve: {
    alias: {
      '@renderer': resolve('src/renderer/src')
    }
  },
  plugins: [vue()],
  build: {
    outDir: 'dist/renderer'
  }
}

resolve.alias: @renderer라는 별칭을 정의하여 경로 참조를 간단하게 할 수 있게 설정
plugins: [vue()]: 렌더러 프로세스에서 Vue.js를 사용할 수 있도록 플러그인을 설정
build.outDir: 렌더러 프로세스의 빌드 결과물이 저장될 디렉터리 경로를 지정

이 과정을 통해 Vite를 사용하여 각 프로세스의 번들링 및 최적화 작업을 수행하고, 그 결과물을 설정된 디렉터리에 저장한다.

위와 같이 "build:win": "npm run build && electron-builder --win" 코드에서 npm run build에 대한 명령이 실행된 후 완료되면 나머지 electron-builder --win에 대해서도 수행해야 한다.

✅ electron-builder --win

Electron Builder를 사용하여 Windows용 설치 파일을 생성하는 명령어
이 명령어는 electron-builder 도구를 기반으로 동작하며, package.json 파일 또는 별도의 설정 파일에서 설정된 빌드 설정(config)에 따라 작동한다.

package.json 파일의 build 섹션:
- 가장 일반적으로 Electron Builder의 설정은 package.json 파일의 build 섹션에 정의되어 있다. 이 섹션에서 빌드 관련 설정을 정의하고, Electron Builder는 이 정보를 사용하여 설치 파일을 생성한다.

// 코드 예시
"build": {
    "appId": "com.stl-3d-viewer",
    "productName": "STL 3D Viewer",
    "files": [
      "dist/**/*",
      "package.json",
      "node_modules/**/*"
    ],
    "win": {
      "icon": "build/icon.ico",
      "target": "nsis"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    }

appId: 애플리케이션의 고유 식별자
productName: 애플리케이션 이름, 설치 파일에 표시
files: 빌드에 포함할 파일 경로를 지정
directories: 빌드 과정에서 사용할 리소스나 출력 디렉터리를 지정
win: Windows 빌드에 관련된 설정
- icon: 설치 파일에 사용될 아이콘 경로를 지정
- target: Windows에서 사용할 설치 형식을 정. 일반적으로 nsis (Nullsoft Scriptable Install System)를 많이 사용함
nsis: NSIS 설치 파일과 관련된 세부 설정
- oneClick: false로 설정하면 설치 과정 중 사용자 입력을 허용
- allowToChangeInstallationDirectory: 사용자가 설치 디렉터리를 변경할 수 있게 허용하는 설정

박두팔이

기억을 위한 기록 :>

이전 포스트

일렉트론 빌드하기: Electron Installation file build process

ELECTRON

빌드 명령어: `npm run build:win`

✅ npm run build:win

npm(Node Package Manager)

run

npm run 동작 방식

build:win

✅ npm run build

✅ electron-vite build

✅ electron-builder --win

[Electron]Electron이란?

0개의 댓글

일렉트론 빌드하기: Electron Installation file build process

ELECTRON

빌드 명령어: npm run build:win

✅ npm run build:win

npm(Node Package Manager)

run

npm run 동작 방식

build:win

✅ npm run build

✅ electron-vite build

✅ electron-builder --win

[Electron]Electron이란?

0개의 댓글

빌드 명령어: `npm run build:win`