Electron安装及打包exe

作为后端小白，正在努力学习前端中，当然其他领域有所涉猎也是极好的。前几天领导下发任务，需要将一个开源项目打包成可执行程序，小白一脸懵，立马一圈搜索，真别说，这班上的跟划水一样，教程七七八八，看着相似却又不似，看着看着小鸡附身，不停点头，太困了。第二天才稍稍看懂了些，话不多说。

准备工作

1. 安装 node.js
2. 安装npm

node -v
npm -v

若安装完毕，以上命令会输出 Node.js 和 npm 的版本信息

安装Electron

打开项目文件夹，增加三个文件（与index.html平级）

• package.json
• main.js
• preload.js

cmd 进入到项目文件夹，执行一下两条命令

npm init -y
npm i --save-dev electron

分别出现

和
warn只是说明跳过可选依赖项，问题不大，继续向前。
接下去往新建的三个文件中填充值。
main.js

const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
 const win = new BrowserWindow({
   width: 800,
   height: 600,
   webPreferences: {
     preload: path.join(__dirname, 'preload.js')
   }
 })

 win.loadFile('index.html')
}

app.whenReady().then(() => {
 createWindow()

 app.on('activate', () => {
   if (BrowserWindow.getAllWindows().length === 0) {
     createWindow()
   }
 })
})

app.on('window-all-closed', () => {
 if (process.platform !== 'darwin') {
   app.quit()
 }
})

preload.js

window.addEventListener('DOMContentLoaded', () => {
 const replaceText = (selector, text) => {
   const element = document.getElementById(selector)
   if (element) element.innerText = text
 }

 for (const type of ['chrome', 'node', 'electron']) {
   replaceText(`${type}-version`, process.versions[type])
 }
})

package.json（初始化时已经填充了值，现小小修改）

{
   "name": "my-electron-app",
   "version": "0.1.0",
   "author": "your name",
   "description": "My Electron app",
   "main": "main.js",
   "scripts": {
       "start": "electron ."
   }
}

一切准备就绪，运行查看

npm start

执行后会弹出一个exe程序，大功告成！
现在需要将项目打包成一整个软件包，使用Electron Forge
导入 Electron Forge 到应用文件夹：

npm install --save-dev @electron-forge/cli

如图所示

再执行

npx electron-forge import

由于我之前执行过，所以会显示已经配置过

创建一个分发版本

npm run make

这时你会发现你的项目文件夹内多了一个out的文件夹，打开它就能看到打包好的文件夹，可以压缩分享了，开心！