diff --git a/.gitignore b/.gitignore
index cb801a2..3c0d0bb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,4 @@ release
package-lock.json
pnpm-lock.yaml
yarn.lock
+dist-electron
diff --git a/.vscode/launch.json b/.vscode/launch.json
index decf6a3..c36a0e2 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -33,7 +33,8 @@
"--remote-debugging-port=9229",
"."
],
- "envFile": "${workspaceFolder}/.vscode/.debug.env"
+ "envFile": "${workspaceFolder}/.vscode/.debug.env",
+ "console": "integratedTerminal"
},
{
"name": "Debug Renderer Process",
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index 0fdfa46..ef1386a 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -12,6 +12,7 @@
"owner": "typescript",
"fileLocation": "relative",
"pattern": {
+ // TODO: correct "regexp"
"regexp": "^([a-zA-Z]\\:\/?([\\w\\-]\/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
"file": 1,
"line": 3,
@@ -21,8 +22,7 @@
},
"background": {
"activeOnStart": true,
- "beginsPattern": "^.*building for development.*$",
- "endsPattern": "built in [0-9]*ms.*$",
+ "endsPattern": "^.*[startup] Electron App.*$",
}
}
}
diff --git a/electron-builder.json5 b/electron-builder.json5
index 3da0db0..6bde6a5 100644
--- a/electron-builder.json5
+++ b/electron-builder.json5
@@ -10,7 +10,10 @@
output: "release/${version}",
buildResources: "electron/resources",
},
- files: ["dist"],
+ files: [
+ "dist-electron",
+ "dist"
+ ],
win: {
target: [
{
diff --git a/electron/electron-env.d.ts b/electron/electron-env.d.ts
index b0ec4b6..3b33998 100644
--- a/electron/electron-env.d.ts
+++ b/electron/electron-env.d.ts
@@ -1,22 +1,9 @@
-///
+///
declare namespace NodeJS {
interface ProcessEnv {
- /**
- * The built directory structure
- *
- * ```tree
- * ├─┬ dist
- * │ ├─┬ electron
- * │ │ ├─┬ main
- * │ │ │ └── index.js
- * │ │ └─┬ preload
- * │ │ └── index.js
- * │ ├── index.html
- * │ ├── ...other-static-files-from-public
- * │
- * ```
- */
+ VSCODE_DEBUG?: 'true'
+ DIST_ELECTRON: string
DIST: string
/** /dist/ or /public/ */
PUBLIC: string
diff --git a/electron/main/index.ts b/electron/main/index.ts
index 4e13919..819f640 100644
--- a/electron/main/index.ts
+++ b/electron/main/index.ts
@@ -1,17 +1,16 @@
// The built directory structure
//
+// ├─┬ dist-electron
+// │ ├─┬ main
+// │ │ └── index.js > Electron-Main
+// │ └─┬ preload
+// │ └── index.js > Preload-Scripts
// ├─┬ dist
-// │ ├─┬ electron
-// │ │ ├─┬ main
-// │ │ │ └── index.js
-// │ │ └─┬ preload
-// │ │ └── index.js
-// │ ├── index.html
-// │ ├── ...other-static-files-from-public
-// │
-process.env.DIST = join(__dirname, '../..')
-process.env.PUBLIC = app.isPackaged ? process.env.DIST : join(process.env.DIST, '../public')
-process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
+// │ └── index.html > Electron-Renderer
+//
+process.env.DIST_ELECTRON = join(__dirname, '..')
+process.env.DIST = join(process.env.DIST_ELECTRON, '../dist')
+process.env.PUBLIC = app.isPackaged ? process.env.DIST : join(process.env.DIST_ELECTRON, '../public')
import { app, BrowserWindow, shell, ipcMain } from 'electron'
import { release } from 'os'
diff --git a/package.json b/package.json
index 8b6f66b..d1f9a88 100644
--- a/package.json
+++ b/package.json
@@ -2,11 +2,11 @@
"name": "electron-vite-react",
"productName": "Electron",
"private": true,
- "version": "2.0.0",
+ "version": "2.1.0",
"description": "Vite React Electron boilerplate.",
"author": "草鞋没号 <308487730@qq.com>",
"license": "MIT",
- "main": "dist/electron/main/index.js",
+ "main": "dist-electron/main/index.js",
"scripts": {
"dev": "vite",
"build": "tsc && vite build && electron-builder"
@@ -26,12 +26,10 @@
"sass": "^1.54.4",
"typescript": "^4.7.4",
"vite": "^3.0.7",
- "vite-plugin-electron": "^0.9.2"
+ "vite-electron-plugin": "^0.4.1"
},
"debug": {
"env": {
- "VITE_DEV_SERVER_HOSTNAME": "127.0.0.1",
- "VITE_DEV_SERVER_PORT": 7777,
"VITE_DEV_SERVER_URL": "http://127.0.0.1:7777"
}
}
diff --git a/src/main.tsx b/src/main.tsx
index a012db0..c897ef0 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,9 +1,17 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
-// import './samples/node-api'
import 'styles/index.css'
+/**
+ * If you enables use of Node.js API in the Renderer-process
+ * ```
+ * npm i -D vite-plugin-electron-renderer
+ * ```
+ * @see - https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#electron-renderervite-serve
+ */
+// import './samples/node-api'
+
ReactDOM.createRoot(document.getElementById('root')!).render(
diff --git a/vite.config.ts b/vite.config.ts
index 9c112e7..f62ed82 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,10 +2,11 @@ import { rmSync } from 'fs'
import path from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
-import electron, { onstart } from 'vite-plugin-electron'
+import electron from 'vite-electron-plugin'
+import { customStart } from 'vite-electron-plugin/plugin'
import pkg from './package.json'
-rmSync(path.join(__dirname, 'dist'), { recursive: true, force: true }) // v14.14.0
+rmSync(path.join(__dirname, 'dist-electron'), { recursive: true, force: true })
// https://vitejs.dev/config/
export default defineConfig({
@@ -18,38 +19,33 @@ export default defineConfig({
plugins: [
react(),
electron({
- main: {
- entry: 'electron/main/index.ts',
- vite: {
- build: {
- // For Debug
- sourcemap: true,
- outDir: 'dist/electron/main',
- },
- // Will start Electron via VSCode Debug
- plugins: [process.env.VSCODE_DEBUG ? onstart() : null],
- },
+ include: [
+ 'electron',
+ 'preload',
+ ],
+ transformOptions: {
+ sourcemap: !!process.env.VSCODE_DEBUG,
},
- preload: {
- input: {
- // You can configure multiple preload scripts here
- index: path.join(__dirname, 'electron/preload/index.ts'),
- },
- vite: {
- build: {
- // For Debug
- sourcemap: 'inline',
- outDir: 'dist/electron/preload',
- }
- },
- },
- // Enables use of Node.js API in the Electron-Renderer
- // https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#electron-renderervite-serve
- renderer: {},
+ // Will start Electron via VSCode Debug
+ plugins: process.env.VSCODE_DEBUG
+ ? [customStart(debounce(() => console.log(/* For `.vscode/.debug.script.mjs` */'[startup] Electron App')))]
+ : undefined,
}),
],
- server: process.env.VSCODE_DEBUG ? {
- host: pkg.debug.env.VITE_DEV_SERVER_HOSTNAME,
- port: pkg.debug.env.VITE_DEV_SERVER_PORT,
- } : undefined,
+ server: process.env.VSCODE_DEBUG ? (() => {
+ const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL)
+ return {
+ host: url.hostname,
+ port: +url.port,
+ }
+ })() : undefined,
+ clearScreen: false,
})
+
+function debounce void>(fn: Fn, delay = 299) {
+ let t: NodeJS.Timeout
+ return ((...args) => {
+ clearTimeout(t)
+ t = setTimeout(() => fn(...args), delay)
+ }) as Fn
+}