Electron을 통해 데스크톱 응용 프로그램 만들기

개시하다

Electron을 사용하여 만든 응용 프로그램을 지정된 형식으로 구성하는 방법에 대해 설명합니다.

Electron 소개

공식 사이트

교차 플랫폼을 만드는 데스크톱 응용 프로그램의 프레임워크

Visual Studio Code, Twitch 애플리케이션, Microsoft Teams 등은 모두 Electron으로 제작

Electron의 응용 프로그램 구조

주 프로세스

마스터 프로세스는 응용 프로그램을 시작할 때 먼저 생성된 다음 렌더링 프로그램을 관리합니다.
Electron에서 준비한 브라우저 창 인스턴스를 작성하여 웹 페이지를 만듭니다.
주 프로세스는 항상 하나입니다. '주 프로세스 끝' = '응용 프로그램 끝'.

렌더링 프로그램

렌더링 프로그램은 상응하는 웹 페이지를 관리한다.웹 페이지에서 GUI 작업을 수행합니다.
렌더링 프로세스는 주 프로세스와 IPC(Inter Process Communication)를 통해 통신합니다.
통신은 웹 페이지의 동작에서 주요 프로세스를 처리하고 필요한 값을 발송한다.

운영 환경

node v14.15.4

npm v6.14.10

git version 2.30.0.windows.1

절차.

정식 창고에서 프로젝트를 종료하고 시작

git 명령을 실행할 수 있는 CUI 도구를 사용하여 다음 명령을 실행

>>> git clone https://github.com/electron/electron-quick-start

>>> cd electron-quick-start

>>> npm i

>>> npm run start

electron-builder 설치

사용 electron-builder 실행 파일 만들기

프로젝트 폴더에서 다음 명령을 실행

npm install -D electron-builder

항목 바로 아래의build-win입니다.js 만들기

const builder = require("electron-builder");

builder.build({
  config: {
    appId: "electron.quick.start.tutorial.demo",
    win: {
      target: "nsis",
    },
    nsis: {
      oneClick: false,
      allowToChangeInstallationDirectory: true,
    },
  },
});

nsis

Windows 기본 대상

oneClick

클릭 설치기 만들기

allowToChangeInstallationDirectory

설치 디렉토리를 변경할 수 있는지 여부

프로젝트 폴더에서 다음 명령을 실행

>>> node build-win.js

명령을 실행하여 dist 폴더 아래에 지정한 형식의 실행 파일을 만듭니다

win-unpacked의 부하.exe 형식의 파일을 두 번 클릭하면 시작할 수 있습니다.

위 단계에서 Electron을 사용하여 데스크톱 응용 프로그램을 만들었습니다.