본 보도에 관하여

Electron의Quick Start Guide는 초보자의 시각으로 쓴다.

본 기사에서 만든 것

텍스트만 표시하는 Mac 데스크톱 프로그램

컨디션

Mac
electron 11.0.3

$ node -v
v14.15.1
$ npm -v
6.14.8

nodejs가 설치되어 있지 않으면 가능한 한 빨리 아래에서 다운로드하고 설치하십시오.
Node.js에 대한 다운로드 링크
LTE 추천.

전제 조건

HTML, JavaScript의 기본
Node.기초

Electron 소개

HTML, 자바스크립트 등 웹 데스크톱 기술을 사용하여 맥과 윈도의 데스크톱 응용 프레임워크를 만들 수 있다.
npm 설치 후 사용.

Electron의 설치

작업용 폴더 만들기
여기first-electron라는 이름으로 만들었어요.
그리고 먼저 프로젝트를 만들고 Electron을 설치합니다.

first-electron$ npm init -y
first-electron$ npm install --save-dev electron

Electron은 건물에 포함되지 않기 때문에 save dev를 추가합니다.
그럼 프로젝트의 내용은 다음과 같습니다.

first-electron
├── package-lock.json
└── package.json

응용 프로그램 만들기

일단 HTML처럼 써야지.
index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello Electron!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
    <h1>Hello Electron!</h1>
</body>
</html>

이어서 시작점 자바스크립트를 만들어 보도록 하겠습니다.
main.js

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

const createWindow = () => {
  // windowを作成
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  // windowにindex.htmlを描画
  win.loadFile('index.html')
  // DevToolsを開く
  win.webContents.openDevTools()
}

// 初期化時にwindowを作成
app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

마지막으로 이쯤에서 패키지.일반적으로 json은 다음과 같다고 생각한다
package.json

{
  "name": "first-electron",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^11.0.3"
  }
}

version,main,scripts는 다음과 같이 수정합니다.
package.json

{
  "name": "first-electron",
  "version": "0.1.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^11.0.3"
  }
}

이렇게 하면 완성된다.어플리케이션 확인 가능

$npm start

정지시Ctrl + C

Mac의 응용 프로그램

1 Electron Forge 가져오기

first-electron$ npx @electron-forge/cli import
✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore


We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!

여기서package.json
package.json

{
  "name": "first-electron",
  "version": "0.1.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
...

그 다음.git도 추가됐어요.
2 생성

first-electron$ npm run make                  

> [email protected] make /Users/Teach/workspace/electron/first-electron
> electron-forge make

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64

퍼스트-electron>out보다 낮을 수 있습니다.

이것을 두 번 클릭하면 프로그램을 시작할 수 있습니다.

Reference

이 문제에 관하여(Electron 일본어 빠른 시작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Teach/items/513739a3d7324cb12295

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Electron 일본어 빠른 시작