feat: electron@28, supports "type": "module"

electron/main/index.ts

@@ -1,14 +1,18 @@
 import { app, BrowserWindow, shell, ipcMain } from 'electron'
 import { release } from 'node:os'
-import { join } from 'node:path'
+import { join, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 
 // The built directory structure
 //
 // ├─┬ dist-electron
 // │ ├─┬ main
-// │ │ └── index.js    > Electron-Main
+// │ │ └── index.mjs    > Electron-Main
 // │ └─┬ preload
-// │   └── index.js    > Preload-Scripts
+// │   └── index.mjs    > Preload-Scripts
 // ├─┬ dist
 // │ └── index.html    > Electron-Renderer
 //
@@ -36,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')
 
@@ -47,9 +51,10 @@ async function createWindow() {
     webPreferences: {
       preload,
       // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
+      // nodeIntegration: true,
+
       // Consider using contextBridge.exposeInMainWorld
       // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
-      nodeIntegration: true,
       contextIsolation: false,
     },
   })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "electron-vue-vite",
-  "version": "2.2.0",
+  "version": "28.0.0",
   "main": "dist-electron/main/index.mjs",
   "description": "Really simple Electron + Vue + Vite boilerplate.",
   "author": "草鞋没号 <[email protected]>",
@@ -18,6 +18,7 @@
       "VITE_DEV_SERVER_URL": "http://127.0.0.1:3344/"
     }
   },
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build && electron-builder",

src/demos/ipc.ts

@@ -0,0 +1,5 @@
+import { ipcRenderer } from 'electron'
+
+ipcRenderer.on('main-process-message', (_event, ...args) => {
+  console.log('[Receive Main-process message]:', ...args)
+})

src/samples/node-api.ts → src/demos/node.ts

@@ -1,10 +1,5 @@
 import { lstat } from 'node:fs/promises'
 import { cwd } from 'node:process'
-import { ipcRenderer } from 'electron'
-
-ipcRenderer.on('main-process-message', (_event, ...args) => {
-  console.log('[Receive Main-process message]:', ...args)
-})
 
 lstat(cwd()).then(stats => {
   console.log('[fs.lstat]', stats)

src/main.ts

@@ -1,7 +1,11 @@
 import { createApp } from 'vue'
-import "./style.css"
 import App from './App.vue'
-import './samples/node-api'
+
+import './style.css'
+
+// `nodeIntegration` needs to be enabled in the Main process.
+// import './demos/node'
+// import './demos/ipc'
 
 createApp(App)
   .mount('#app')

vite.config.ts

@@ -3,7 +3,6 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import electron from 'vite-plugin-electron'
 import renderer from 'vite-plugin-electron-renderer'
-import { notBundle } from 'vite-plugin-electron/plugin'
 import pkg from './package.json'
 
 // https://vitejs.dev/config/
@@ -41,11 +40,6 @@ export default defineConfig(({ command }) => {
                 external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}),
               },
             },
-            plugins: [
-              // This is just an option to improve build performance, it's non-deterministic!
-              // e.g. `import log from 'electron-log'` -> `const log = require('electron-log')` 
-              isServe && notBundle(),
-            ],
           },
         },
         {
@@ -64,9 +58,6 @@ export default defineConfig(({ command }) => {
                 external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}),
               },
             },
-            plugins: [
-              isServe && notBundle(),
-            ],
           },
         }
       ]),