electron 安装打包更新配置,main.js /package.json配置

本文介绍了如何将React项目转化为electron桌面应用,详细讲解了从安装electron、配置package.json和main.js,到打包项目、设置更新的完整过程。通过手动更新的补充说明,帮助开发者理解每个步骤的作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

electron 安装打包更新配置,main.js /package.json配置

最近因为项目的原因需要将已完成好的react项目封装成一个桌面应用,作为已个纯前端的伸手党,开始接触到了electron,由于本人做伸手党惯了,记不住太多的配置,又怕自己忘记,所以写篇文章记录下,好了,不多说直接上代码,伸手党请进。

package.json和main.js配置

	首先简单说一下我的思路,先将已经完全开发好的react项目打包好,就跟我们平常打包一样,
	当然其他框架也一样,想信这一步只要不是一个假前端都是能够做到了,然后另起一个electron工程来专门做打包,
	接下来是我的步骤;
  1. 全局安装electron脚手架 npm install electron -g ;

  2. 新建一个文件夹peojectElectron,进入文件夹打开命令行,npm init 初始化出来一个package.json文件;

  3. 接着执行命令 npm install electron -D 安装electron,并保存为开发依赖项;

  4. 执行 npm i electron-builder --save-dev 安装打包插件;

  5. 安装用于更新的插件 npm i electron-updater --save;

  6. 在peojectElectron文件夹下新建一个src文件夹;

  7. src文件夹下新建main.js;

  8. 接下来就是是伸手党复制把,或者自己去官网研究,这里不做阐述;看main.js代码;

  9. 
    // 引入electron并创建一个Browserwindow
    const {
         
         app, BrowserWindow} = require('electron')
    const path = require('path')
    const url = require('url')
    const autoUpdater = require("electron-updater").autoUpdater; //引入 autoUpdater 更新模块
    // 保持window对象的全局引用,避免JavaScript对象被垃圾回收时,窗口被自动关闭.
    let mainWindow;
     
    function createWindow () {
         
         
    //创建浏览器窗口,宽高自定义具体大小你开心就好
    mainWindow = new BrowserWindow({
         
         show: false})
    mainWindow.maximize();
    mainWindow.show();
    
      // 加
pnpm run package > hotpot-financial-system@1.0.0 prepackage E:\安装包\243243323906 > taskkill /f /im electron.exe >nul 2>&1 & rimraf dist/electron > hotpot-financial-system@1.0.0 package E:\安装包\243243323906 > electron-builder • electron-builder version=24.13.3 os=10.0.26100 • loaded configuration file=package.json ("build" field) • writing effective config file=dist\electron\builder-effective-config.yaml • skipped dependencies rebuild reason=npmRebuild is set to false • packaging platform=win32 arch=ia32 electron=28.2.0 appOutDir=dist\electron\win-ia32-unpacked • default Electron icon is used reason=application icon is not set ⨯ Get "https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z": dial tcp 20.205.243.166:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond. github.com/develar/app-builder/pkg/download.(*Downloader).follow.func1 /Volumes/data/Documents/app-builder/pkg/download/downloader.go:206 github.com/develar/app-builder/pkg/download.(*Downloader).follow /Volumes/data/Documents/app-builder/pkg/download/downloader.go:234 github.com/develar/app-builder/pkg/download.(*Downloader).DownloadNoRetry /Volumes/data/Documents/app-builder/pkg/download/downloader.go:128 github.com/develar/app-builder/pkg/download.(*Downloader).Download /Volumes/data/Documents/app-builder/pkg/download/downloader.go:112 github.com/develar/app-builder/pkg/download.DownloadArtifact /Volumes/data/Documents/app-builder/pkg/download/artifactDownloader.go:107 github.com/develar/app-builder/pkg/download.downloadFromGithub /Volumes/data/Documents/app-builder/pkg/download/tool.go:63 github.com/develar/app-builder/pkg/download.DownloadWinCodeSign /Volumes/data/Documents/app-builder/pkg/download/tool.go:58 github.com/develar/app-builder/pkg/rcedit.editResources /Volumes/data/Documents/app-builder/pkg/rcedit/rcedit.go:30 github.com/develar/app-builder/pkg/rcedit.ConfigureCommand.func1 /Volumes/data/Documents/app-builder/pkg/rcedit/rcedit.go:25 github.com/alecthomas/kingpin.(*actionMixin).applyActions /Volumes/data/go/pkg/mod/github.com/alecthomas/kingpin@v2.2.6+incompatible/actions.go:28 github.com/alecthomas/kingpin.(*Application).applyActions /Volumes/data/go/pkg/mod/github.com/alecthomas/kingpin@v2.2.6+incompatible/app.go:557 github.com/alecthomas/kingpin.(*Application).execute /Volumes/data/go/pkg/mod/github.com/alecthomas/kingpin@v2.2.6+incompatible/app.go:390 github.com/alecthomas/kingpin.(*Application).Parse /Volumes/data/go/pkg/mod/github.com/alecthomas/kingpin@v2.2.6+incompatible/app.go:222 main.main /Volumes/data/Documents/app-builder/main.go:90 runtime.main /usr/local/Cellar/go/1.17/libexec/src/runtime/proc.go:255 runtime.goexit /usr/local/Cellar/go/1.17/libexec/src/runtime/asm_386.s:1319 • Above command failed, retrying 3 more times ⨯ Get "https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z": dial tcp 20.205.243.166:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond. github.com/develar/app-builder/pkg/download.(*Downloader).follow.func1 /Volumes/data/Documents/app-builder/pkg/download/downloader.go:206 github.com/develar/app-builder/pkg/download.(*Downloader).follow /Volumes/data/Documents/app-builder/pkg/download/downloader.go:234 github.com/develar/app-builder/pkg/download.(*Downloader).DownloadNoRetry /Volumes/data/Documents/app-builder/pkg/download/downloader.go:128 github.com/develar/app-builder/pkg/download.(*Downloader).Download /Volumes/data/Documents/app-builder/pkg/download/downloader.go:112 github.com/develar/app-builder/pkg/download.DownloadArtifact /Volumes/data/Documents/app-builder/pkg/download/artifactDownloader.go:107 github.com/develar/app-builder/pkg/download.downloadFromGithub /Volumes/data/Documents/app-builder/pkg/download/tool.go:63 github.com/develar/app-builder/pkg/download.DownloadWinCodeSign /Volumes/data/Documents/app-builder/pkg/download/tool.go:58 github.com/develar/app-builder/pkg/rcedit.editResources /Volumes/data/Documents/app-builder/pkg/rcedit/rcedit.go:30 github.com/develar/app-builder/pkg/rcedit.ConfigureCommand.func1 /Volumes/data/Documents/app-builder/pkg/rcedit/rcedit.go:25 github.com/alecthomas/kingpin.(*actionMixin).applyActions /Volumes/data/go/pkg/mod/github.com/alecthomas/kingpin@v2.2.6+incompatible/actions.go:28 github.com/alecthomas/kingpin.(*Application).applyActions /Volumes/data/go/pkg/mod/github.com/alecthomas/kingpin@v2.2.6+incompatible/app.go:557 github.com/alecthomas/kingpin.(*Application).execute /Volumes/data/go/pkg/mod/github.com/alecthomas/kingpin@v2.2.6+incompatible/app.go:390 github.com/alecthomas/kingpin.(*Application).Parse /Volumes/data/go/pkg/mod/github.com/alecthomas/kingpin@v2.2.6+incompatible/app.go:222 main.main /Volumes/data/Documents/app-builder/main.go:90 runtime.main /usr/local/Cellar/go/1.17/libexec/src/runtime/proc.go:255 runtime.goexit /usr/local/Cellar/go/1.17/libexec/src/runtime/asm_386.s:1319 • Above command failed, retrying 2 more times ⨯ Get "https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z": dial tcp 20.205.243.166:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond. github.com/develar/app-builder/pkg/download.(*Downloader).follow.func1 /Volumes/data/Documents/app-builder/pkg/download/downloader.go:206 github.com/develar/app-builder/pkg/download.(*Downloader).follow /Volumes/data/Documents/app-builder/pkg/download/downloader.go:234 github.com/develar/app-builder/pkg/download.(*Downloader).DownloadNoRetry /Volumes/data/Documents/app-builder/pkg/download/downloader.go:128 github.com/develar/app-builder/pkg/download.(*Downloader).Download /Volumes/data/Documents/app-builder/pkg/download/downloader.go:112 github.com/develar/app-builder/pkg/download.DownloadArtifact /Volumes/data/Documents/app-builder/pkg/download/artifactDownloader.go:107 github.com/develar/app-builder/pkg/download.downloadFromGithub /Volumes/data/Documents/app-builder/pkg/download/tool.go:63 github.com/develar/app-builder/pkg/download.DownloadWinCodeSign /Volumes/data/Documents/app-builder/pkg/download/tool.go:58 github.com/develar/app-builder/pkg/rcedit.editResources /Volumes/data/Documents/app-builder/pkg/rcedit/rcedit.go:30 github.com/develar/app-builder/pkg/rcedit.ConfigureCommand.func1 /Volumes/data/Documents/app-builder/pkg/rcedit/rcedit.go:25 github.com/alecthomas/kingpin.(*actionMixin).applyActions /Volumes/data/go/pkg/mod/github.com/alecthomas/kingpin@v2.2.6+incompatible/actions.go:28 github.com/alecthomas/kingpin.(*Application).applyActions /Volumes/data/go/pkg/mod/github.com/alecthomas/kingpin@v2.2.6+incompatible/app.go:557 github.com/alecthomas/kingpin.(*Application).execute /Volumes/data/go/pkg/mod/github.com/alecthomas/kingpin@v2.2.6+incompatible/app.go:390 github.com/alecthomas/kingpin.(*Application).Parse /Volumes/data/go/pkg/mod/github.com/alecthomas/kingpin@v2.2.6+incompatible/app.go:222 main.main /Volumes/data/Documents/app-builder/main.go:90 runtime.main /usr/local/Cellar/go/1.17/libexec/src/runtime/proc.go:255 runtime.goexit /usr/local/Cellar/go/1.17/libexec/src/runtime/asm_386.s:1319 • Above command failed, retrying 1 more times ⨯ Get "https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z": dial tcp 20.205.243.166:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond. github.com/develar/app-builder/pkg/download.(*Downloader).follow.func1 /Volumes/data/Documents/app-builder/pkg/download/downloader.go:206 github.com/develar/app-builder/pkg/download.(*Downloader).follow /Volumes/data/Documents/app-builder/pkg/download/downloader.go:234 github.com/develar/app-builder/pkg/download.(*Downloader).DownloadNoRetry /Volumes/data/Documents/app-builder/pkg/download/downloader.go:128 github.com/develar/app-builder/pkg/download.(*Downloader).Download /Volumes/data/Documents/app-builder/pkg/download/downloader.go:112 github.com/develar/app-builder/pkg/download.DownloadArtifact /Volumes/data/Documents/app-builder/pkg/download/artifactDownloader.go:107 github.com/develar/app-builder/pkg/download.downloadFromGithub /Volumes/data/Documents/app-builder/pkg/download/tool.go:63 github.com/develar/app-builder/pkg/download.DownloadWinCodeSign /Volumes/data/Documents/app-builder/pkg/download/tool.go:58 github.com/develar/app-builder/pkg/rcedit.editResources /Volumes/data/Documents/app-builder/pkg/rcedit/rcedit.go:30 github.com/develar/app-builder/pkg/rcedit.ConfigureCommand.func1 /Volumes/data/Documents/app-builder/pkg/rcedit/rcedit.go:25 github.com/alecthomas/kingpin.(*actionMixin).applyActions /Volumes/data/go/pkg/mod/github.com/alecthomas/kingpin@v2.2.6+incompatible/actions.go:28 github.com/alecthomas/kingpin.(*Application).applyActions /Volumes/data/go/pkg/mod/github.com/alecthomas/kingpin@v2.2.6+incompatible/app.go:557 github.com/alecthomas/kingpin.(*Application).execute /Volumes/data/go/pkg/mod/github.com/alecthomas/kingpin@v2.2.6+incompatible/app.go:390 github.com/alecthomas/kingpin.(*Application).Parse /Volumes/data/go/pkg/mod/github.com/alecthomas/kingpin@v2.2.6+incompatible/app.go:222 main.main /Volumes/data/Documents/app-builder/main.go:90 runtime.main /usr/local/Cellar/go/1.17/libexec/src/runtime/proc.go:255 runtime.goexit /usr/local/Cellar/go/1.17/libexec/src/runtime/asm_386.s:1319 • Above command failed, retrying 0 more times ⨯ E:\安装包\243243323906\node_modules\.pnpm\app-builder-bin@4.0.0\node_modules\app-builder-bin\win\ia32\app-builder.exe process failed ERR_ELECTRON_BUILDER_CANNOT_EXECUTE Exit code: 1 failedTask=build stackTrace=Error: E:\安装包\243243323906\node_modules\.pnpm\app-builder-bin@4.0.0\node_modules\app-builder-bin\win\ia32\app-builder.exe process failed ERR_ELECTRON_BUILDER_CANNOT_EXECUTE Exit code: 1 at ChildProcess.<anonymous> (E:\安装包\243243323906\node_modules\.pnpm\builder-util@24.13.1\node_modules\builder-util\src\util.ts:252:14) at Object.onceWrapper (node:events:634:26) at ChildProcess.emit (node:events:519:28) at ChildProcess.cp.emit (E:\安装包\243243323906\node_modules\.pnpm\cross-spawn@7.0.6\node_modules\cross-spawn\lib\enoent.js:34:29) at maybeClose (node:internal/child_process:1105:16) at Process.ChildProcess._handle.onexit (node:internal/child_process:305:5) From previous event: at processImmediate (node:internal/timers:478:21) From previous event: at WinPackager.signApp (E:\安装包\243243323906\node_modules\.pnpm\app-builder-lib@24.13.3_dmg-builder@24.13.3_electron-builder-squirrel-windows@24.13.3\node_modules\app-builder-lib\src\winPackager.ts:384:27) at WinPackager.doSignAfterPack (E:\安装包\243243323906\node_modules\.pnpm\app-builder-lib@24.13.3_dmg-builder@24.13.3_electron-builder-squirrel-windows@24.13.3\node_modules\app-builder-lib\src\platformPackager.ts:336:32) at WinPackager.doPack (E:\安装包\243243323906\node_modules\.pnpm\app-builder-lib@24.13.3_dmg-builder@24.13.3_electron-builder-squirrel-windows@24.13.3\node_modules\app-builder-lib\src\platformPackager.ts:321:7) at WinPackager.pack (E:\安装包\243243323906\node_modules\.pnpm\app-builder-lib@24.13.3_dmg-builder@24.13.3_electron-builder-squirrel-windows@24.13.3\node_modules\app-builder-lib\src\platformPackager.ts:140:5) at Packager.doBuild (E:\安装包\243243323906\node_modules\.pnpm\app-builder-lib@24.13.3_dmg-builder@24.13.3_electron-builder-squirrel-windows@24.13.3\node_modules\app-builder-lib\src\packager.ts:445:9) at executeFinally (E:\安装包\243243323906\node_modules\.pnpm\builder-util@24.13.1\node_modules\builder-util\src\promise.ts:12:14) at Packager._build (E:\安装包\243243323906\node_modules\.pnpm\app-builder-lib@24.13.3_dmg-builder@24.13.3_electron-builder-squirrel-windows@24.13.3\node_modules\app-builder-lib\src\packager.ts:379:31) at Packager.build (E:\安装包\243243323906\node_modules\.pnpm\app-builder-lib@24.13.3_dmg-builder@24.13.3_electron-builder-squirrel-windows@24.13.3\node_modules\app-builder-lib\src\packager.ts:340:12) at executeFinally (E:\安装包\243243323906\node_modules\.pnpm\builder-util@24.13.1\node_modules\builder-util\src\promise.ts:12:14)  ELIFECYCLE  Command failed with exit code 1.
最新发布
08-09
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值