南通网站建设费用,猪八戒建站服务,行业网站推广,给漫画网站做推广electron的electron-packager打包运行和electron-builder生产安装包过程
开发electron客户端程序#xff0c;打包是绕不开的问题。 macOS 应用构建#xff0c;看似近在咫尺#xff0c;实则坑坑致命。 场景#xff1a;mac笔记本打包#xff0c;以及生产出可交付的软件安装…electron的electron-packager打包运行和electron-builder生产安装包过程
开发electron客户端程序打包是绕不开的问题。 macOS 应用构建看似近在咫尺实则坑坑致命。 场景mac笔记本打包以及生产出可交付的软件安装包如何避坑如何理解app的产生过程 可以按照我测试的路程来配置环境。包括node版本electron版本等。
一、启动基础electron项目
可以看我上一篇关于electron基本操作搭建一个简易的index.htm作为app的页面去尝试构架自己的第一款
二、检查是否安装了node
输入node -v和npm -v 查看node和npm是否安装好可以通过nvm统一管理node版本环境具体的操作可以看我关于nodejs环境配置的一篇博客mac和win通用我这边的nodejs版本是v16.10.0;如果有期间有下载失败那就用点程序员都懂的那个东西。 三、镜像换成淘宝
持久使用淘宝镜像 npm config set registry https://registry.npm.taobao.org 这个命令可以查看npm源地址 npm config get registry
四、electron-packager和electron-builder不同之处使用场景使用方法。
创建前端项目或引入前端项目, 项目目录为以下结构
--main.js
--icons
--preload.js
--index.html
--package.json(4.1) electron
开发环境安装使用以下任意命令
npm install --save-dev electron
cnpm install --save-dev electron
yarn add electron --devpackage.json配置内容如下
{name: electron-base,//初始化的npm init生成package.jsonversion: 1.0.0,//项目版本号description: 测试electron,//项目描述main: main.js,//入口文件scripts: { //脚本文件dev: nodemon --exec electron .,},devDependencies: {electron: ^25.3.1,}看见我的electron版本是25.3.1 执行yarn run dev启动这个electron项目。
然后就启动了这个项目。是在mac本上的跑的。这里的app上面的标题中间的是Thorough_path就是index.html的titleThorough_path/title标签内容。并不是app的名字在win的环境下这个标题在左侧 main.js入口文件配置以下内容const {app, BrowserWindow,Menu} require(electron);
const path require(path);
const createWindow (){Menu.setApplicationMenu(null) // null值取消顶部菜单栏const win new BrowserWindow({width:1000,height:800,icon: ./icons/icon.ico, // 设置窗口左上角的图标webPreferences:{nodeIntegration:true,contextIsolation:false,// preload: path.join(__dirname, preload.js)}})win.loadFile(./index.html);//本地地址
}
app.whenReady().then(createWindow)(4.2) electron-packager
安装electron-packager依赖以下任意一种安装即可开发环境安装我安装的是electron-packager为17.1.1 要知道的是这是一个用于打包electron应用的工具只是打包成各个平台下可执行文件并不是安装包
npm install --save-dev electron-packager
cnpm install --save-dev electron-packager
yarn add electron --devdevDependencies: {electron: ^25.3.1,electron-packager: ^17.1.1}安装成功后需要配置package.json文件
package-mac: electron-packager . Path --platformdarwin --electron-version25.3.1 --download.mirrorOptions.mirrorhttps://npm.taobao.org/mirrors/electron/ --outdist --iconicons/icon.icns,- platform设置平台windowlinux还是Mac,darwin:代表的是mac环境win32:代表win平台
- archx84还是x64
- Path的位置可以替换成你打包后的exe名字,这里就会生成Path.exe文件。
- electron-versionelectron的版本必须要指定这里设置为25.3.1可查看package.json中electron安装的版本号
- out 输出文件
- icon 图标地址执行命令 npm run packager运行成功后就会在项目根目录中看到dist文件夹运行exe文件就可以看到构建后的项目了。 生成一个可执行文件不用安装的文件点击可以直接运行
(4.3) electron-builder
全局安装electron-builder - 安装electron-builder打包成安装包
全局安装或者项目开发环境安装
yarn add electron-builder -g查看安装是否成功 使用electron-builder打包需要配置build
scripts: {dev: nodemon --exec electron .,build: electron-builder --win --x64},build: {productName:xxxx, // 项目名称appId: electron.app, // 安装包名称directories: { output: build}, // 输出文件夹copyright:xxxx, // 版权信息nsis: { //nsis相关配置打包方式为nsis时生效oneClick: false, // 是否一键安装allowElevation: true, // 允许请求提升如果为false则用户必须使用提升的权限重新启动安装程序。allowToChangeInstallationDirectory: true, // 允许修改安装目录installerIcon: ./build/icons/aaa.ico, // 安装图标uninstallerIcon: ./build/icons/bbb.ico, // 卸载图标installerHeaderIcon: ./build/icons/aaa.ico, // 安装时头部图标createDesktopShortcut: true, // 创建桌面图标createStartMenuShortcut: true, // 创建开始菜单图标shortcutName: xxxx, // 图标名称include: build/script/installer.nsh, // 包含的自定义nsis脚本},// 发布到githubpublish: {provider: github,repo: xxxx, // git仓库owner: xxxx, // 拥有者token: xxxxxxxxxxxxxxx, // gitTokenreleaseType: release,publishAutoUpdate: true // 发布自动更新需要配置GH_TOKEN。 默认true},//配置windows环境win: {icon: build/icons/aims.ico,target: [nsis,zip]},//配置mac环境mac: {target: [dmg,zip]},//配置linux环境linux: {icon: build/icons}}
}当然我这里不会配置这么全面只是简单的进行构架配置。
name: electron-base,
version: 1.0.2,
description: ,
main: main.js,
scripts: {dev: nodemon --exec electron .,package-mac: electron-packager . Path --platformdarwin --electron-version25.3.1 --download.mirrorOptions.mirrorhttps://npm.taobao.org/mirrors/electron/ --outdist --iconicons/icon.icns,build: electron-builder --win --x64},
build: {productName: Path,appId: Path.app,directories: {output: installPackages},mac: {icon: icons/icon.icns},win: {icon: icons/icon.ico,target: [nsis]},nsis: {oneClick: false,allowToChangeInstallationDirectory: true,perMachine: true},electronVersion: 25.3.1,electronDownload: {mirror: https://npm.taobao.org/mirrors/electron/}},4.2.1nsis配置
这个要详细的讲一下这个nsis的配置指的是安装过程的配置其实还是很重要的如果不配置nsis那么应用程序就会自动的安装在C盘。没有用户选择的余地这样肯定是不行的 关于nsis的配置是在build中nsis这个选项中进行配置上面是部分基础的nsis配置NSIS对于处理安装包这种东西功能非常的强大。但是学习起来并不比一门高级语言要容易。其中的奥秘还要各位大佬自行探索。
五、初始化项目配置文件
统一一些的话直接全局安装完事 全局安装electron、electron-builder、electron-packager
electron 以窗口模式启动网页程序 electron-packager 可以打包成绿色版免安装exe程序 electron-builder打包成可安装exe文件 和 绿色版免安装exe程序
npm install electron -gnpm install electron-packager -gnpm install electron-builder -gelectron 版本在淘宝镜像 https://npm.taobao.org/mirrors/electron/
打包成mac桌面app
学透 Electron 自定义 Dock 图标
主要增加一条执行脚本
scripts: {dev: nodemon --exec electron .,build: electron-builder --win --x64,build-mac:electron-builder --macos },执行yarn run build-mac即可等待一会就结束。 构建成功拖动安装之后但是发现貌似icon配置项不管用。导致安装时app图标不可见
那是因为BrowserWindow 对象的 icon 属性只对 windows/Linux 系统生效查阅了一些对于 Mac OS 需要通过 app.dock.setIcon 进行设置,但是貌似不管用之后再通过查阅文档发现这样可以解决那就是 修改build配置项将build配置项的icon路径前增加一个路径虽然文件目录结构没有这个electron文件夹但是这样写可能会生成这个指定到electron下的icons其实我的icons在根目录库下。
项目目录结构
--main.js
--icons
--preload.js
--index.html
--package.jsonmac: {icon: electron/icons/icon.icns},win: {icon: electron/icons/icon.ico,target: [nsis]}dock中也有了咋们的图标再也不是没有图像的小透明了 也算是稀里糊涂的解决了问题不过这个electron里面的还是知识很多的需要慢慢去看这里就皮毛结束。加油。 什么是.icns .icns 是 Apple 的 macOS 操作系统的 App 图标文件的扩展名你在 macOS 的「 Desktop 桌面」、「Finder 访达」、「Dock 程序坞」等看到应用程序的外观就是由一个内置在此 App 内部的扩展名为.icns的文件实现的。至于如何制作这样的一个macos文件可以参考
.icns是什么又是如何创建的
点击标题跳转↑ 附上项目中完整的pack.json
{name: electron-base,version: 1.0.4,description: ,main: main.js,scripts: {dev: nodemon --exec electron .,package-mac: electron-packager . Path --platformdarwin --electron-version25.3.1 --download.mirrorOptions.mirrorhttps://npm.taobao.org/mirrors/electron/ --outdist --iconicons/icon.icns,build: electron-builder --win --x64,build-mac:electron-builder --macos },build: {productName: Path,appId: Path.app,directories: {output: installPackages},mac: {icon: electron/icons/icon.icns},win: {icon: electron/icons/icon.ico,target: [nsis]},nsis: {oneClick: false,allowToChangeInstallationDirectory: true,perMachine: true},electronVersion: 25.3.1,electronDownload: {mirror: https://npm.taobao.org/mirrors/electron/}},keywords: [],author: ,license: ISC,dependencies: {},devDependencies: {electron: ^25.3.1,electron-packager: ^17.1.1}
}
main.js
const {app, BrowserWindow,Menu} require(electron);
const path require(path);
const createWindow (){Menu.setApplicationMenu(null) // null值取消顶部菜单栏const win new BrowserWindow({width:1000,height:800,icon: ./icons/icon.ico, // 设置窗口左上角的图标webPreferences:{nodeIntegration:true,contextIsolation:false,// preload: path.join(__dirname, preload.js)}})if (process.platform darwin) {// app.dock.setIcon(path.join(__dirname, electron/icons/icon.icns));}// win.loadURL(https://niupeng.inscode.cc/qianduan);//线上地址win.loadFile(./index.html);//本地地址// win.webContents.openDevTools();//打开开发者工具// process.env[ELECTRON_DISABLE_SECURITY_WARNINGS] true;}
app.whenReady().then(createWindow)
