Electron에서 앱 빌드까지의 흐름

12085 단어 HTMLCSSElectron자바스크립트
오랜만에 Windows용의 간단한 데스크탑 앱 개발할 필요가 발생했습니다만, 일상 Mac 환경 속, 이제 Windows 환경에서 Visual Studio 넣어 Form 앱을 쓰는 것도 뭐니까 Electron으로 쓰려고 생각했을 때의 메모.

추가



2019년 10월 30일에 Electron 7.0 환경에서 동작하도록 일부 코드 재작성했습니다.

하고 싶은 일



뭐, HTML이라든지 CSS라든지 JS는 이해하고 있을 생각이므로, HelloWorld 앱을 Mac용, Win용의 단체 앱으로서 빌드할 때까지의 흐름을 확인.

완성판은 아래와 같은 느낌.



전제



Mac에서 Windows 용 데스크톱 앱을 개발하고 싶습니다.

준비



작업 공간 확보



electron는 package.json가 없는 경우에 성난 시스템에 있는 사람. 그래서 npm init하여 package.json을 만들어 둔다.
mkdir myApp
cd myApp
npm init -y

아무것도 바꾸지 않아도 됩니다만, electron에서는 엔드포인트를 main.js로 하는 문화와 같이 변경합니다.

script등은 환경에 맞추어 기호로(아무것도 변경하지 않아도 좋다).

package.json
{
+  "name": "myApp",
  "version": "1.0.0",
  "description": "",
+  "main": "main.js",
  "scripts": {
+    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

electron 설치



global이라도 좋지만, 대단한 빈도로 버전 업되기 때문에 우선 로컬에 설치.
작업 폴더에서 다음을 실행.
npm i -D electron

-D는 --save-dev와 동의.

필요한 파일 생성



main.js가 엔드 포인트가되어 거기에서 index.html을 호출하는 것처럼 느끼기 때문에 두 개의 파일을 먼저 만들어 둡니다.
touch main.js index.html

구현



main.js



구현 내용은 Electron의 QuickStart 에 있는 녀석을 베이스로 조금 수정(거의 만입니다만).
Mac이라면 조금 불필요한 기술이 필요하다.

main.js
const { app, BrowserWindow } = require('electron')

let win

function createWindow() {

    //ウインドウの作成
    win = new BrowserWindow({
        width: 400,
        height: 400,
        webPreferences: {
            nodeIntegration: true, //Electron6から必要らしい
        }
    })

    //ウインドウに表示する内容
    win.loadFile('index.html')

    //デバッグ画面表示
    // win.webContents.openDevTools()

    //このウインドウが閉じられたときの処理
    win.on('closed', () => {
        win = null
    })
}

//アプリが初期化されたとき（起動されたとき）
app.on('ready', () => {
    createWindow();
})

//全ウインドウが閉じられたとき
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

//アクティブになったとき（MacだとDockがクリックされたとき）
app.on('activate', () => {
    if (win === null) {
        createWindow()
    }
})

index.html



실제 앱이되는 파일.

index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
</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>

실행(동작 확인)


npm start

npx electron .라도 좋다.

패키징(electron-builder로 빌드)



단독으로 움직이는 어플리케이션화하는 몇 가지 방법이 있지만, electron-builder가 가장 메이저? 같기 때문에 사용해 보겠습니다. electron-builder를 사용하면 설치 프로그램 형식으로 출력하거나 아이콘 설정 등을 할 수 있다.

우선 설치.
npm install -D electron-builder

아래는 최소한도.

package.json에 기술할 수도 있지만, 독립된 빌드 조건을 js 파일로 할 수도 있다.
Windows용으로 아래와 같이 써 보았다.

zip한 상태에서 x64와 ia32(x86)용으로 출력한다. target을 nsis라고 하면 installer 형식이 된다.

표준에서는 dist 폴더가 작성되어 거기의 출력되도록. git 사용하면 .gitignore에 dist/로 하는 것이 좋을지도.

build-win
const builder = require('electron-builder');

builder.build({
    config: {
        'appId': 'local.test.app1',
        'win':{
            'target': {
                'target': 'zip',
                'arch': [
                    'x64',
                    'ia32',
                ]
            }
        }
    }
});

appId는 필요에 따라 변경.

Mac용. target을 dmg라든지 할 수 있다.

build-mac
const builder = require('electron-builder');

builder.build({
    config: {
        'appId': 'appId': 'local.test.app1',,
        'mac':{
            'target': 'zip',
        }
    }
});

빌드 실행.
node build-win
node build-mac

환경에 관계없이 Win(ia64)나 Mac용의 exe 파일은 빌드되는 것 같다.
덧붙여 Win32 환경은 Windows가 아니면 빌드할 수 없게 된 것 같습니다.
Electron의 가장 빠른 자습서
Electron에서 File Open 및 Save

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage