Electron创建和打包流程

首先看node是否安装，顺便看看安装的哪个版本

node -v
npm -v

如果是国内环境，可以换成阿里云的源

npm set registry http://registry.npmmirror.com

如果没有安装yarn可以安装一下yarn，好用

npm -install -g yarn

都安装好后可以实际创建项目了

首先创建一个文件夹并初始化

mkdir myapp && cd myapp

初始化

yarn init

记得description和author要填，打包要用

然后将electron依赖安装到包里

yarn add -dev electron

我把用到的文件和内容列到下面

// 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 导入。

// preload.js

// 所有的 Node.js API接口 都可以在 preload 进程中被调用.
// 它拥有与Chrome扩展一样的沙盒。
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])
    }
  })

<!--index.html-->

<!DOCTYPE html>
<html>
  <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>你好!</title>
  </head>
  <body>
    <h1>你好!</h1>
    我们正在使用 Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    和 Electron <span id="electron-version"></span>.

    <！-- 您也可以此进程中运行其他文件 -->
    <script src="./renderer.js"></script>
  </body>
</html>

{
  "name": "mypp",
  "version": "1.0.0",
  "description": "myapp",
  "main": "main.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "author": "csecong",
  "license": "ISC",
  "devDependencies": {
    "@electron-forge/cli": "^7.3.0",
    "@electron-forge/maker-deb": "^7.3.0",
    "@electron-forge/maker-rpm": "^7.3.0",
    "@electron-forge/maker-squirrel": "^7.3.0",
    "@electron-forge/maker-zip": "^7.3.0",
    "@electron-forge/plugin-auto-unpack-natives": "^7.3.0",
    "electron": "^29.0.1"
  },
  "dependencies": {
    "@electron-forge/plugin-fuses": "^7.3.0",
    "@electron/fuses": "^1.7.0",
    "electron-squirrel-startup": "^1.0.0"
  }
}

上面这个文件是package.json

文件准备完成，使用start在开发模式下打开应用

yarn start

下面我们使用Electron Forge打包应用

yarn add --dev @electron-forge/cli
npx electron-forge import

安装完成后还有两个依赖需要安装，要不然打包会报错

yarn add @electron-forge/plugin-fuses

yarn add @electron/fuses

ok，依赖安装完成，打包程序试试吧

yarn make

打包完成会在out目录生成可执行文件，不过打包出来的文件真的有点大，毕竟打包了一个环境进去

工具软件