node.js配合electron打包成安装包

最新推荐文章于 2024-05-15 15:19:10 发布

无名指的等待712

最新推荐文章于 2024-05-15 15:19:10 发布

阅读量1.3k

点赞数 2

文章标签： electron javascript es6

本文链接：https://blog.csdn.net/weixin_60523038/article/details/130024411

版权

node.js配合electron打包成为安装包

最近在忙别的事情,好久不出一期博客了,网上有很多的electron打包成为桌面软件的教程,那这一期我出一期打包成安装包的教程

文章目录

系列文章目录
前言
一、electron是什么？
二、使用步骤
- 1.首先准备一个node.js工程库
- 2.导入electron库
总结

前言

提示：这一篇就浅浅的教大家如何把chatgpt配合electron框架打包成为客户端

在之前学习到electron框架的时候总是想着如何才能把它打包成安装包让别人安装,可以实时让自己写好的软件在别人的电脑桌面端能用,但是网上找了好久也没翻出来,最后配合chatgpt,翻文档才得以解决,所以今天记录一下我是怎们做到的吧.

一、electron是什么？

介绍：我的简单理解就是将网页端的内容转成桌面端,可以实现快速使用

二、使用步骤

1.1 首先先初始化一个node.js工程

npm init -y

1.2 导入electron库

npm install --save-dev electron    这里一定要使用--save-dev的方式安装要不然会和接下来的安装包打包变得冲突

1.3 准备好一个主进程文件

这里面你需要看你的node.js项目中的package.JSON文件里面的main是不是指向index.js

如果不是请自行修改一下

1.4 接下来往index.js中写入代码

//导入所需要的模块
const { BrowserWindow, app, Menu } = require("electron");
// 控制应用程序的事件生命周期。

// 当 Electron 完成初始化时，触发一次
app.whenReady().then(() => {
  //创建一个electron项目的窗口
  const mainWindow = new BrowserWindow({
    //窗口的长度和高度
    width: 1200,
    height: 800,
//打包成为的安装包的logo
icon: "./icon.png",
  });
  //这里写一个自定义菜单栏,chatgpt用的时候老是卡住,所以做了一个刷新效果
  const template = [
    {
      label: "刷新页面",
      click: async () => {
        // 调用 `reload` 方法刷新当前页面
        const webContents = BrowserWindow.getFocusedWindow().webContents;
        webContents.reload();
      },
    },
  ];
  //这里就是将自己写好的菜单栏给放到菜单栏该有的位置
  const senu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(senu);
  //调用loadURL方法,让其加载到chatgpt的首页
  mainWindow.loadURL("https://chat.openai.com/chat");
});

1. 5 安装打包模块（一定要按照下面给的安装命令安装）

npm install --save-dev electron-builder

安装node.js打包命令

npm install packager

顺便安装了node.js的内置模块fs,和path

npm install fs

npm install path

npm install build

以上模块请记得一定要安装

1.6 接下来配置package.json的scripts里面的启动命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "electron .",
    "build": "electron-builder"
  },

现在的配置文件应该是这个样子(前提是:按照上面的步骤进行安装了)

{
  "name": "chatgpt02",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "electron .",
    "build": "electron-builder"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^24.0.0",
    "electron-builder": "^23.6.0"
  },
  "dependencies": {
    "build": "^0.1.4",
    "fs": "^0.0.1-security",
    "packager": "^0.1.9",
    "path": "^0.12.7"
  }
}

1.7 配置最重要的打包安装包步骤

先创建一个electron-builder.yml文件

（理解了下面注释之后在完成之后一定记得把注释里面的内容删除了）往文件中填写下面代码

//这里的appid可以理解成唯一标注的码
appId: com.example.myapp
//这里productName打包形成的桌面端软件名称
productName: chatgpt
//打包成为dist目录
directories:
  output: dist
//perMachine: true: 指定安装程序是针对整个计算机还是当前用户的。如果为 true，则安装程序将被安装到所有用户的计算机上；如果为 false，则安装程序将只被安装到当前用户的计算机上。
//oneClick: false: 指定是否使用一键安装模式。如果为 true，则安装程序将以默认设置直接安装，不会显示向导式的安装过程；如果为 false，则安装程序将显示向导式的安装过程，以允许用户更好地控制安装过程。
//allowElevation: true: 指定是否允许请求管理员权限以执行某些操作。如果为 true，则安装程序可以请求管理员权限以执行需要管理员权限的操作；如果为 false，则安装程序将无法执行需要管理员权限的操作。
//allowToChangeInstallationDirectory: true: 指定是否允许用户更改安装目录。如果为 true，则用户可以选择更改安装目录；如果为 false，则用户将无法更改安装目录，安装程序将使用预定义的目录进行安装。
nsis:
  perMachine: true
  oneClick: false
  allowElevation: true
  allowToChangeInstallationDirectory: true
//在windows系统中打包好的logo
win:
  icon: path/to/icon.png
  target: nsis
//打包下面几个文件夹
files:
  - build/
  - node_modules/
  - package.json
  - index.js

删掉注释之后

appId: com.example.myapp

productName: chatgpt
directories:
  output: dist
nsis:
  perMachine: true
  oneClick: false
  allowElevation: true
  allowToChangeInstallationDirectory: true
win:
  icon: path/to/icon.png
  target: nsis
files:
  - build/
  - node_modules/
  - package.json
  - index.js