electron 安装打包更新配置,main.js /package.json配置
最近因为项目的原因需要将已完成好的react项目封装成一个桌面应用,作为已个纯前端的伸手党,开始接触到了electron,由于本人做伸手党惯了,记不住太多的配置,又怕自己忘记,所以写篇文章记录下,好了,不多说直接上代码,伸手党请进。
package.json和main.js配置
首先简单说一下我的思路,先将已经完全开发好的react项目打包好,就跟我们平常打包一样,
当然其他框架也一样,想信这一步只要不是一个假前端都是能够做到了,然后另起一个electron工程来专门做打包,
接下来是我的步骤;
-
全局安装electron脚手架 npm install electron -g ;
-
新建一个文件夹peojectElectron,进入文件夹打开命令行,npm init 初始化出来一个package.json文件;
-
接着执行命令 npm install electron -D 安装electron,并保存为开发依赖项;
-
执行 npm i electron-builder --save-dev 安装打包插件;
-
安装用于更新的插件 npm i electron-updater --save;
-
在peojectElectron文件夹下新建一个src文件夹;
-
src文件夹下新建main.js;
-
接下来就是是伸手党复制把,或者自己去官网研究,这里不做阐述;看main.js代码;
-
// 引入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(); // 加载应用-----