Como criar um 앱 Electron usando Vite

This article is also in .

Então você quer disponibilizar seu novo aplicativo em Vite usando Electron , mas não quer usar o código pronto dos outros. Vamos entender como funciona e fazer o nosso próprio.

크리아 음 앱 Vite

Nós vamos utilizar a estrutura de arquivos do Vite como base do nosso projeto. Inicie com o comando:

$ npm create vite@latest

Depois siga as instruções no terminal. 예를 들어 사전 설정react-ts을 활용하십시오. Vuejs와 provavelmente todos outros에서 기능을 수행할 수 있습니다.

Electron의 중독자

Agora adicionamos o Electron ao nosso projeto:

$ npm i -D electron@latest

Depois criamos um diretório electron na raíz, e dois arquivos main.js e preload.js . Nossa estrutura de arquivos ficou assim:

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

Electron에 대한 질문

Electron precisa de um arquivo de entrada para funcionar, vamos editar o 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()
  }
})

Arquivo preload.js는 튜토리얼을 참조하십시오. Mas você provavelmente vai utilizar num aplicativo real.

Adicione-o aopackage.json:

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

테스트를 실행하려면 dev 서버에서 Vite num 터미널을 실행하고 Electron을 실행하십시오.

# Primeiro terminal
$ npm run dev

# Segundo terminal
$ npm run electron:dev

Completamente desacoplados, o HMR funciona normalmente já que só estamos abrindo o dev server do Vite no Electron을 수리하십시오.

Mas eu quero executar de um único terminal/comando!

Para isso podemos criar um script customizado. Crie um novo arquivoscripts/dev.mjs com:

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"
},
...

Agora você pode abrir ambos dev server num único comandonpm run electron:dev .

Live Reload Nem TypeScript no electron/main.js에 대한 예를 참고하십시오. Para isso funcionar você pode implementar algo parecido com isso . 최소한의 의견은 필요한 경우에만 필요합니다.

Gerando o executável

Nosso dev server está funcionando bem. 앱을 실행할 수 있는 장소는 없습니다.

Vamos usar o electron-builder . Adicione ao projeto:

$ npm i -D electron-builder

E precisamos de uma arquivo de configuração, cry o electron-builder.yaml na raíz:

# 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

Adicione a propriedade base ao arquivo de configuração do 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://의 기능이 필요합니다.

Agora adicione o script aopackage.json :

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

Você pode ver, iremos primeiramente executar a build do Vite, e depois do Electron.

Vite estará localizada no diretóriodist 빌드, Electron estará localizada no diretório 빌드release . 아디치오네 암보스 아오.gitignore .

comocomandonpm run electron:build .

Eeeee é isso! Você agora tem seu 앱 Electron usando Vite!

튜토리얼 완료 코드: 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/