Vite 2와 최소한의 상용구로 Electron 앱을 만드는 방법

Este artigo também está disponível em .

따라서 새 Vite 응용 프로그램을 Electron 로 래핑하고 싶지만 다른 상용구를 사용하고 싶지는 않습니다. 그것이 어떻게 작동하는지 이해하고 우리 자신을 구축합시다.

Vite 앱 만들기

Vite 의 사전 설정을 프로젝트의 기본 파일 구조로 사용할 것입니다. 다음 명령으로 시작합니다.

$ npm create vite@latest

그런 다음 Vite의 지시를 따릅니다. 이 예에서는 Reactreact-ts 사전 설정을 만들었습니다. 그러나 Vuejs 및 아마도 다른 것과도 작동합니다.

전자 추가

이제 프로젝트에 Electron을 추가합니다.

$ npm i -D electron@latest

그런 다음 프로젝트 루트에 electron 폴더와 main.js 및 preload.js 두 개의 파일을 만듭니다. 폴더 구조는 다음과 같습니다.

project-root/
├── electron/
│   ├── main.js 
│   └── preload.js
├── src/
│   └── ...
├── index.html
├── package.json
├── vite.config.ts
└── ...

전자 항목 파일

Electron이 작동하려면 항목 파일이 필요합니다. electron/main.js를 편집해 보겠습니다.

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

if (!app.requestSingleInstanceLock()) {
  app.quit()
  process.exit(0)
}

let win = null

async function createWindow () {
  win = new BrowserWindow({
    title: 'Main window',
    width: 1024,
    height: 768,
    webPreferences: {
      preload: join(__dirname, '../electron/preload.js'),
      nodeIntegration: true
    }
  })

  if (app.isPackaged) {
    // win.removeMenu()
    win.loadFile(join(__dirname, '../dist/index.html'))
  } else {
    // Vite's dev server
    win.loadURL('http://localhost:3000')
    win.webContents.openDevTools()
  }

app.whenReady().then(createWindow)

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

app.on('second-instance', () => {
  if (win) {
    // Focus on the main window if the user tried to open another
    if (win.isMinimized()) win.restore()
    win.focus()
  }
})

app.on('activate', () => {
  const allWindows = BrowserWindow.getAllWindows()
  if (allWindows.length) {
    allWindows[0].focus()
  } else {
    createWindow()
  }
})

이 자습서에서는 preload.js 파일이 비어 있습니다. 하지만 아마 실제 앱에서 사용할 것입니다.
package.json에 추가하십시오.

  ...
+ "main": "electron/main.js",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
+   "electron:dev": "electron ."
  },
  ...

이제 앱을 테스트하고 터미널 인스턴스에서 Vite의 개발 서버를 실행하고 다른 인스턴스에서 Electron을 실행할 수 있습니다.

# First instance
$ npm run dev

# Second instance
$ npm run electron:dev

완전히 분리된 것을 볼 수 있습니다. Vite의 dev 서버 URL을 열었기 때문에 HMR이 잘 작동합니다.

But I want it to run in a single instance/command!

이를 위해 사용자 지정 스크립트를 만들 수 있습니다. 다음을 사용하여 새 파일scripts/dev.mjs을 만듭니다.

import { spawn } from 'child_process'
import { createServer } from 'vite'
import electron from 'electron'

const server = await createServer({ configFile: 'vite.config.ts' })

spawn(electron, ['.'], { stdio: 'inherit' }).once('exit', process.exit)

await server.listen()

그리고 package.json에서 개발 스크립트를 업데이트합니다.

...
"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
- "electron:dev": "electron ."
+ "electron:dev": "node scripts/dev.mjs"
},
...

이제 단일npm run electron:dev 명령으로 개발 서버를 시작할 수 있습니다.

이 예에서는 electron/main.js 에 대한 실시간 재로드나 TypeScript가 없다는 점에 유의하십시오. 이를 위해 무언가를 할 수 있습니다like this. IMO 대부분의 경우 필요하지 않습니다.

앱 빌드

우리 개발 서버는 잘 작동합니다. 이제 앱을 빌드할 수 있어야 합니다.

우리는 electron-builder을 사용할 것입니다. 프로젝트에 추가하십시오.

$ npm i -D electron-builder

그리고 구성 파일이 필요합니다. 프로젝트 루트에 파일electron-builder.yaml을 생성해 보겠습니다.

# https://www.electron.build/configuration/configuration

appId: your.app.id
asar: true
directories:
  output: release/${version}

files:
- dist
- electron

mac:
  artifactName: "${productName}_${version}.${ext}"
  target:
  - dmg
win:
  target:
  - target: nsis
    arch:
    - x64
  artifactName: "${productName}_${version}.${ext}"
nsis:
  oneClick: false
  perMachine: false
  allowToChangeInstallationDirectory: true
  deleteAppDataOnUninstall: false

base에서 Vite의 구성 파일에 vite.config.ts 속성을 추가합니다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [react()]
})

이렇게 하면 Electron./ 프로토콜 내에서 작업하는 데 필요한 모든 자산에 file:// 접두사가 추가됩니다.

이제 빌드 스크립트를 package.json에 추가합니다.

...
"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
  "electron:dev": "node scripts/dev.mjs",
+ "electron:build": "npm run build && electron-builder"
},
...

보시다시피 Vite의 빌드를 먼저 실행한 다음 Electron-builder를 실행할 것입니다.

Vite의 빌드는 dist 디렉토리에 있고 Electron의 빌드는 release 디렉토리에 있습니다. 둘 다 .gitignore 에 추가해야 합니다.

이제 npm run electron:build 명령을 사용하여 앱을 빌드할 수 있습니다.

아 그리고 짜잔! Vite와 함께 작동하는 Electron 앱이 있습니다!

이 튜토리얼의 소스 코드: https://github.com/rafaelpimpa/vite-electron

참조

https://github.com/electron-vite/electron-vite-boilerplate

https://github.com/electron-vite/vite-plugin-electron

https://vitejs.dev/

https://www.electronjs.org/