Electron 시작하기

Code 2020. 8. 3. 21:25

Electron 시작하기

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

* Electron의 Node.js 버전

Electron은 내부적으로 별도의 Node.js버전을 가지고 있음

    - 설치된 Node버전과 Electron 앱에서 사용하는 버전은 다음

 

2020/08 현재 최신  Node.js v14.7.0

시스템에 최신 Node.js v14를 설치해도

Electron v9.1.2 의 process.versions.node 값은 v12.14.1

    - LTS 버전만 사용

 

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

Node.js의 ES6 모듈 지원

    v8.5.0 (2017) --experimental-modules 옵션으로 ES6 모듈 지원

 

    v13.2.0 (2019) 부터 --experimental-modules 옵션 없이 지원

        - *.mjs 파일은 ES6 모듈로 인식 (import)

        - *.js , *.cjs 파일은 기존의 ComonJS 모듈로 인식 (require)

        - package.json에 "type": "module" 설정이 있으면 *.js 파일도  ES6 모듈로 인식

 

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

  • 프로젝트 초기화
    프로젝트 폴더 생성
    -> npm init
    -> package.json 파일 생성됨

  • package.json 파일에 다음을 추가

"scripts": {
"start": "electron index.js"
},

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

  • index.js 파일 생성
const { app, BrowserWindow } = require("electron");

function createWindow() {
// 브라우저 창을 생성합니다.
const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
    nodeIntegration: true,
    },
});

// and load the index.html of the app.
win.loadFile("index.html");

// 개발자 도구를 엽니다.
win.webContents.openDevTools();
}

// 이 메소드는 Electron의 초기화가 완료되고
// 브라우저 윈도우가 생성될 준비가 되었을때 호출된다.
// 어떤 API는 이 이벤트가 나타난 이후에만 사용할 수 있습니다.
app.whenReady().then(createWindow);

// 모든 윈도우가 닫히면 종료된다.
app.on("window-all-closed", () => {
    // macOS에서는 사용자가 명확하게 Cmd + Q를 누르기 전까지는
    // 애플리케이션이나 메뉴 바가 활성화된 상태로 머물러 있는 것이 일반적입니다.
    if (process.platform !== "darwin") {
        app.quit();
    }
});

app.on("activate", () => {
    // macOS에서는 dock 아이콘이 클릭되고 다른 윈도우가 열려있지 않았다면
    // 앱에서 새로운 창을 다시 여는 것이 일반적입니다.
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

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

  • index.html 파일 작성
<!DOCTYPE html>
    <html>

<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>

<body>
    <h1>Hello World!</h1>
    We are using node
    <script>document.write(process.versions.node)</script>,
    Chrome
    <script>document.write(process.versions.chrome)</script>,
    and Electron
    <script>document.write(process.versions.electron)</script>.
</body>

</html>

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

  • 작성한 프로그램 실행 방법
    • 방법1

      electron index.js

    • 방법2 : package.json에 다음 설정이 된 경우
    "scripts": {
        "start": "electron index.js"
    }, 
  • 다음 명령으로 시작 가능

    npm start

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

  • 디버깅 하기
    • electron vscode debug breakpoint
    • .vscode/launch.json 파일 생성
    {
    "version": "0.2.0",
    "configurations": [
        {
        "name": "Debug Main Process",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceFolder}",
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
        "windows": {
        "runtimeExecutable": "\${workspaceFolder}/node_modules/.bin/electron.cmd"
        },
        "args" : ["."],
        "outputCapture": "std"
        }
    ]
    }
  • index.js 파일에 브레이크포이트 설정(F9) 하고 디버깅시작(F5)

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

*.exe 파일로  빌드

 

    - electron-builder 설치

npm i -g electron-builder

 

    - exe 빌드

electron-builder --win 7z --x64

        - 실행파일이 105MB, 압축파일이 42MB

 

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

// 참고

Electron 본 프로그램 빌드

https://www.electronjs.org/docs/development/build-instructions-gn

    - depot_tools 설치하다 포기

    - windows용 설치가 없어서 '리눅스용 lsb_release 없음 에러'에서 더 진행이 안됨

    - python 도 지원이 중단된 v2를 사용

 

 

//----------------------
// 참고
https://www.electronjs.org/docs/tutorial/first-app

https://www.electronjs.org/docs/tutorial/debugging-main-process-vscode

https://github.com/sindresorhus/awesome-electron#boilerplates

Posted by 코덴스

댓글을 달아 주세요