目标：打包一个可以在windows使用的js软件
打开官方指导中文主页：www.electronjs.org/zh/docs/lat…
创建项目代码
项目结构如下:
创建一个项目，加入package.json文件如下:
{
"name": "electron-demo",
"version": "1.0.0",
"authors" : "我自己",
"description": "你好吗",
"main": "main.js",
"scripts": {
},
"keywords": [],
"author": "",
"license": "ISC"
}
根据官方指导，加入依赖:
pnpm install --save-dev electron
然后创建index.html文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>我创建的第一个election应用的页面</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</body>
<script>
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})
</script>
</html>
然后创建一个主入口的main.js文件如下：
// main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('node:path')
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.webContents.openDevTools()
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
// 在 macOS 系统内, 如果没有已开启的应用窗口
// 点击托盘图标时通常会重新创建一个新窗口
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态,
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
// 在当前文件中你可以引入所有的主进程代码
// 也可以拆分成几个文件，然后用 require 导入。
到此，一个js软件就写完了，下面来打包成一个软件安装包
安装打包依赖：
pnpm install --save-dev @electron-forge/cli
使用其"import"命令设置 Forge 的脚手架：
npx electron-forge import
报错了:
竟然是yarn，好吧，删掉node_modules目录，重新用yarn安装后，
再运行：npx electron-forge import
成功了，使用 Forge 的 make 命令来创建可分发的应用程序：
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make"
},
运行yarn make
成功了，在out文件夹看到一个electron-demo-1.0.0 Setup.exe文件(100m大小)
