electron 开发 - 技术栈

教程：https://www.electronjs.org/zh/docs/latest/tutorial/quick-start

系统：Windows 10

工具： PowerShell

文件目录：index.html main.js package.json 和 preload.js 是手动添加的，其余是编译生成的

index.html

复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/zh-CN/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>

main.js

复制代码

const { app, BrowserWindow } = require('electron')
// 在你文件顶部导入 Node.js 的 path 模块
const path = require('node:path')

// 修改已有的 createWindow() 方法
const 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('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

package.json

复制代码

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "author": "sunjinlei",
  "license": "MIT",
  "devDependencies": {
    "@electron-forge/cli": "^7.3.1",
    "@electron-forge/maker-deb": "^7.3.1",
    "@electron-forge/maker-rpm": "^7.3.1",
    "@electron-forge/maker-squirrel": "^7.3.1",
    "@electron-forge/maker-zip": "^7.3.1",
    "@electron-forge/plugin-auto-unpack-natives": "^7.3.1",
    "@electron-forge/plugin-fuses": "^7.3.1",
    "electron": "^29.1.6"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0"
  }
}

preload.js

复制代码

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])
  }
})

查看 node.js 和 npm 版本

复制代码

node -v
npm -v

项目初始化：

复制代码

mkdir my-electron-app ; cd my-electron-app
npm init

安装 Electron

复制代码

npm install --save-dev electron

启动项目:

复制代码

npm start

安装打包环境，运行一次即可:

复制代码

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

打包：

复制代码

npm run make

node.js 版本需要大于 18，否则设置 Forge 脚手架会出错

复制代码

PS D:\my-electron-app> npx electron-forge import

An unhandled exception has occurred inside Forge:
Cannot find module 'stream/promises'
...

可以手动从 node.js官网下载安装最新版

如果打包出错提示找不到 @electron-forge/plugin-fuses

复制代码

PS D:\my-electron-app> npm run make

> my-electron-app@1.0.0 make
> electron-forge make

√ Checking your system
- Loading configuration
× Loading configuration
  › Cannot find module '@electron-forge/plugin-fuses'
  Require stack:
  - D:\my-electron-app\forge.config.js
  - D:\my-ele...
■ Resolving make targets
■ Running package command
■ Running preMake hook
■ Making distributables
■ Running postMake hook

An unhandled rejection has occurred inside Forge:
Error: Cannot find module '@electron-forge/plugin-fuses'
Require stack:
...

需要手动安装

复制代码

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

效果：