新建一个node项目
安装electron依赖
pnpm i electron -D
安装其他依赖
创建一个以ts和es6为语法且能使用路径别名的koa2项目 - 掘金 (juejin.cn)
最重要的
// main.js
// Modules to control application life and create native browser window
import { app, BrowserWindow } from 'electron'
import { ChildProcess, fork } from 'child_process'
let serverProcess: ChildProcess = null
function createServerProcess() {
// 开发环境
serverProcess = fork(require.resolve('./koa-server/server'))
serverProcess.on('close', (code) => {
console.log('子线程已经退出', code)
})
}
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
// webPreferences: {
// preload: path.join(__dirname, 'preload.js')
// }
})
// 加载 index.html
mainWindow.loadFile('../index.html')
// mainWindow.loadURL('http://localhost:3000')
// 打开开发工具
mainWindow.webContents.openDevTools()
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
createServerProcess()
createWindow()
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
if (serverProcess) {
process.kill(serverProcess.pid)
}
}
})
package.json
{
... 省略无关代码
"scripts": {
"build": "rimraf dist && tsc && tsc-alias",
"watch": "tsc && tsc-alias -w",
"lint": "eslint -c .eslintrc --ext .ts ./src",
"start": "chcp 65001 && npm run build && electron ./dist/main.js",
},
... 省略无关代码
}
执行npm run dev
附录
electron-builder 的使用
利用electron-builder打包electron成exe
