From 7ec046370f5f82f2e83e2682838be642bebb69f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8D=89=E9=9E=8B=E6=B2=A1=E5=8F=B7?= <308487730@qq.com> Date: Tue, 2 Jan 2024 12:17:48 +0800 Subject: [PATCH] refactor: use `vite-plugin-electron/simple` API --- electron/main/index.ts | 4 +-- vite.config.flat.txt | 76 ++++++++++++++++++++++++++++++++++++++++++ vite.config.ts | 32 ++++++++---------- 3 files changed, 92 insertions(+), 20 deletions(-) create mode 100644 vite.config.flat.txt diff --git a/electron/main/index.ts b/electron/main/index.ts index 050f6820..f9120757 100644 --- a/electron/main/index.ts +++ b/electron/main/index.ts @@ -12,7 +12,7 @@ const __dirname = dirname(__filename) // │ ├─┬ main // │ │ └── index.js > Electron-Main // │ └─┬ preload -// │ └── index.js > Preload-Scripts +// │ └── index.mjs > Preload-Scripts // ├─┬ dist // │ └── index.html > Electron-Renderer // @@ -40,7 +40,7 @@ if (!app.requestSingleInstanceLock()) { let win: BrowserWindow | null = null // Here, you can also use other preload -const preload = join(__dirname, '../preload/index.js') +const preload = join(__dirname, '../preload/index.mjs') const url = process.env.VITE_DEV_SERVER_URL const indexHtml = join(process.env.DIST, 'index.html') diff --git a/vite.config.flat.txt b/vite.config.flat.txt new file mode 100644 index 00000000..1ab23d59 --- /dev/null +++ b/vite.config.flat.txt @@ -0,0 +1,76 @@ +import { rmSync } from 'node:fs' +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import electron from 'vite-plugin-electron' +import renderer from 'vite-plugin-electron-renderer' +import pkg from './package.json' + +// https://vitejs.dev/config/ +export default defineConfig(({ command }) => { + rmSync('dist-electron', { recursive: true, force: true }) + + const isServe = command === 'serve' + const isBuild = command === 'build' + const sourcemap = isServe || !!process.env.VSCODE_DEBUG + + return { + plugins: [ + vue(), + electron([ + { + // Main process entry file of the Electron App. + entry: 'electron/main/index.ts', + onstart({ startup }) { + if (process.env.VSCODE_DEBUG) { + console.log(/* For `.vscode/.debug.script.mjs` */'[startup] Electron App') + } else { + startup() + } + }, + vite: { + build: { + sourcemap, + minify: isBuild, + outDir: 'dist-electron/main', + rollupOptions: { + // Some third-party Node.js libraries may not be built correctly by Vite, especially `C/C++` addons, + // we can use `external` to exclude them to ensure they work correctly. + // Others need to put them in `dependencies` to ensure they are collected into `app.asar` after the app is built. + // Of course, this is not absolute, just this way is relatively simple. :) + external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}), + }, + }, + }, + }, + { + entry: 'electron/preload/index.ts', + onstart({ reload }) { + // Notify the Renderer process to reload the page when the Preload scripts build is complete, + // instead of restarting the entire Electron App. + reload() + }, + vite: { + build: { + sourcemap: sourcemap ? 'inline' : undefined, // #332 + minify: isBuild, + outDir: 'dist-electron/preload', + rollupOptions: { + external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}), + }, + }, + }, + } + ]), + // Use Node.js API in the Renderer process + renderer(), + ], + server: process.env.VSCODE_DEBUG && (() => { + const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL) + return { + host: url.hostname, + port: +url.port, + } + })(), + clearScreen: false, + } +}) diff --git a/vite.config.ts b/vite.config.ts index 1ab23d59..b9a57eb5 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,13 +1,12 @@ -import { rmSync } from 'node:fs' +import fs from 'node:fs' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' -import electron from 'vite-plugin-electron' -import renderer from 'vite-plugin-electron-renderer' +import electron from 'vite-plugin-electron/simple' import pkg from './package.json' // https://vitejs.dev/config/ export default defineConfig(({ command }) => { - rmSync('dist-electron', { recursive: true, force: true }) + fs.rmSync('dist-electron', { recursive: true, force: true }) const isServe = command === 'serve' const isBuild = command === 'build' @@ -16,9 +15,9 @@ export default defineConfig(({ command }) => { return { plugins: [ vue(), - electron([ - { - // Main process entry file of the Electron App. + electron({ + main: { + // Shortcut of `build.lib.entry` entry: 'electron/main/index.ts', onstart({ startup }) { if (process.env.VSCODE_DEBUG) { @@ -42,13 +41,10 @@ export default defineConfig(({ command }) => { }, }, }, - { - entry: 'electron/preload/index.ts', - onstart({ reload }) { - // Notify the Renderer process to reload the page when the Preload scripts build is complete, - // instead of restarting the entire Electron App. - reload() - }, + preload: { + // Shortcut of `build.rollupOptions.input`. + // Preload scripts may contain Web assets, so use the `build.rollupOptions.input` instead `build.lib.entry`. + input: 'electron/preload/index.ts', vite: { build: { sourcemap: sourcemap ? 'inline' : undefined, // #332 @@ -59,10 +55,10 @@ export default defineConfig(({ command }) => { }, }, }, - } - ]), - // Use Node.js API in the Renderer process - renderer(), + }, + // Use Node.js API in the Renderer process + renderer: {}, + }), ], server: process.env.VSCODE_DEBUG && (() => { const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL)