创建、执行并打包Electron工程

最新推荐文章于 2025-07-09 23:46:00 发布

原创

最新推荐文章于 2025-07-09 23:46:00 发布 · 519 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#electron #搭建 #创建 #打包 #分发

本文档介绍了如何使用Electron构建桌面应用程序，包括安装依赖、创建主脚本和网页、配置package.json以及打包分发。首先，需要安装Node.js和npm，然后通过npm初始化项目并安装Electron。接着，创建index.js作为主脚本，并编写简单的HTML页面。最后，使用Electron Forge进行打包，生成可执行程序。

官方文档：

https://www.electronjs.org/docs

依赖

Electron本质上是个Node.js程序。因此依赖Node.js与npm。安装依赖后，输入命令查看版本：

node -v
npm -v

建议使用最新版本node与npm。
在windows平台下，node无法借助n来管理版本，因此直接访问node官网下载最新版本安装即可： http://nodejs.cn/download/
npm则可执行npm install -g npm命令来更新到最新版本。

创建应用程序

基础的Electron应用程序结构为：

my-electron-app/
├── package.json
├── index.js
└── index.html

创建应用程序流程为：

安装Electron。
创建主脚本和网页。
打包。

安装Electron

创建文件夹。
打开cmd命令，cd到文件夹下。
运行：npm init，初始化项目。此时会提示输入一系列信息。
运行：npm install electron --save-dev，等待安装完成。

这样，Electron就安装完成了。

创建主脚本和网页

首先创建主脚本。
主脚本为Electron的入口，即index.js。示例为：

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

function createWindow () {
   
   
  const win = new BrowserWindow({
   
   
    width: 800,
    height: 600,
    webPreferences: {
   
   
      nodeIntegration: true
    }
  })

  win