【打包】

接上回 Electron那些事01：起步_uikoo9的专栏-CSDN博客

简单介绍了electron，以及使用electron做了一个桌面应用demo，

相信大家现在最想做的事情就是将桌面应用打包后发给其他人体验，本节开始electron打包

【electron-packager】

官方推荐的打包工具有3个

几个工具的区别后续单独写一篇文章介绍，

简单的说electron-forge和electron-builder都是打包工具集功能比较多，适合想快速上手的小伙伴，但是遇到一些定制化的需求也比较难受

本节使用electron-packager打包，GitHub - electron/electron-packager: Customize and package your Electron app with OS-specific bundles (.app, .exe, etc.) via JS or CLI

【查看electron应用内容】

讲打包前需要先说一下用electron开发的应用的大体结构，

就拿vscode来说吧，找到vscode后右键点击显示包内容，

可以看到包内容如下

大家可以找找你在使用的应用，相信我，使用electron应用还是挺多的

凡是Contents/Resources/app这类型目录结构，十有八九是electron应用，

且app文件夹下是你主要是的代码，resources外的是系统层级的代码，

也就是说不管你用electron开发多少个应用，resources内的部分会不同，resources外的大体相同

那么怎么判断到底是不是electron开发的，可以看这个目录contents/macos/下，

【开发和打包的不同】

讲了electron应用大概的目录结构，下面要说一下开发时应用跑起来和打包后应用跑起来的不同

开发时，拿上一节的代码为例，红框了几个重点

1.左侧红框内的文件，是你应用跑起来的实际代码，

上面示例和是代码项目其他文件同一层级的，有一些混淆，就是你应用中真正有用的是左侧红框内的代码

2.本地开发是应用跑起来的原理

执行npm start，也就是npm run start

等同于执行electron .

electron会在.（当前目录）去找package.json中的main属性，值为main.js，这个是入口

然后和main.js关联的index.html，preload.js，util/menu.js对应的运行起来

3.为什么开发时electron在devDependencies内

大家有没有注意到electron的npm包是在devDependencies内，而不是在dependencies内，

是因为electron并不是你应用打包后运行依赖的npm包

应用打包时通过打包工具将electron环境打到包内，提供electron的环境

所以electron这个npm包放到devDependencies内，完全是为了你本地开发的时候有electron环境

这个还是比较重要的一点，可以多理解下

4.那么问题来了

那么可以看到上图代码，其实是“开发环境各文件”和“electron应用实际代码”的混合，

目前这个代码结构不合理，就是一个demo，但是实际中可能发布后的应用也是这种结构。。

【拆分代码】

1.将上述electron应用实际代码拆分到src文件夹下

2.为electron应用定制了一个package.json，

3.这个package.json的name和外层的不同，可以理解为你应用最终的名字

4.这个package.json中有dependencies，这个是electron应用实际以来的npm包

5.右侧的package.json是原来外层package.json，可以看到删除了main属性同时将start命令修改为electron src，意思是让electron执行src内的代码

以上代码见：GitHub - insistime/electron-guides at 0.0.4

【electron-packager打包】

electron-packager的打包也比较简单，详见：Options | electron-packager

代码如下

// electron pakcager
var electronPackager    = require('electron-packager');// options
var options = {dir             : 'src',out             : 'out',appCopyright    : 'Copyright © 2022 vq版权所有',appVersion      : '0.0.1',overwrite       : true,arch            : 'x64',name            : 'vq'
};// pack
electronPackager(options);

dir是源文件的目录

out是打包目录

外层package.json中添加这两个脚本

    "prebuild": "cd src && npm i","build": "node electron-packager.js",

执行npm run build

【看效果】

在out下生成了vq-darwin-x64文件夹，vq是应用名，darwin是macos，x64是平台

这个文件夹下的vq就是应用（mac下其实就是文件夹）

右键vp点击显示包内容如下

1.结构和上面讲的electron结构一样

2.app下的文件就是开发是src下的文件，使用到的npm包也只有一个

对比之前vscode的结构看下，是不是很相似

以上代码见：GitHub - insistime/electron-guides at 0.0.5

【生成图标】

虽然已经生成了mac下的应用，但是应用图标是默认electron的图标，感觉不能好好装x了，

生成一个自己的图标，这里也比较坑，

electron官方文档和electron-packager官方文档都没说明需要什么样的图片作为图标

不是常见的png，jpg，ico等，而是icns，估计是apple官方有类似规范

生成的方法见这个博客：快速生成 Mac App icns 图标 - 简书

大概就是准备1024x1024的png图片，然后mac命令就可以搞定了

搞定后修改electron-packager打包的选项

看效果

以上代码详见：https://github.com/insistime/electron-guides/tree/0.0.6

【安装包】

虽然已经生成好了mac下的应用，但是不方便直接发给其他人，在mac下其实就是一个文件夹，所以需要打成安装包dmg来分发，比较简单的也可以自己zip一下发出去，但是效果就没那么好了，哈哈~

回到electron-packager，可以看到推荐了很多相关npm包，这里使用electron-installer-dmg来生成dmg包

安装

npm i -D electron-installer-dmg

打包dmg代码

// electron installer dmg
var electronDMG = require('electron-installer-dmg');// pack dmg config
var packdmgConfig = require('./packdmg.config.js');// dmg
electronDMG(packdmgConfig, function(err){console.log(err);
});

打包dmg的配置

'use strict';// path
var path = require('path');// app config
var appConfig = require('./app.config.js');// packmac config
var packmacConfig = require('./packmac.config.js');// app env
var appEnv = 'online';// app path
var appPath = path.resolve(__dirname, `../${packmacConfig.out}/${appConfig.appName}-darwin-${packmacConfig.arch}/${appConfig.appName}.app`);// background
var background = path.resolve(__dirname, '../static/bg.png');// packdmg config
module.exports = {name            : `${appConfig.appName}-${appEnv}-${appConfig.appVersion}`,appPath         : appPath,icon            : appConfig.appIconPath,iconSize        : 80,background      : background,overwrite       : true,debug           : false,out             : path.resolve(__dirname, '../out/dmg')
};

配置比较简单，主要是获取上一步生成mac app应用的路径等

icon还是采用上一步生成好的icns文件

background是dmg打开后的背景图，这里随便找了一张图片

package.json中加了对应的脚本

"packdmg": "node ./pack/pack-dmg.js",

看效果

生成了dmg，双击后如图

背景图可以设计一下，类似讲app拖拽进去applications文件夹等

从生成mac app到生成dmg分几步

1.在src文件夹下，npm i安装好src下依赖的npm包

2.npm run packmac，生成mac下app

3.npm run packdmg，生成dmg文件

以上代码详见：https://github.com/insistime/electron-guides/tree/0.0.8

【总结】

1.了解electron-packager

2.了解electron应用结构

3.了解electron应用开发和打包后运行的不同

4.使用electron-packager打包一个应用

5.electron应用mac图标定制

6.使用electron-installer-dmg生成dmg安装包

Electron那些事02：打包相关推荐

Electron那些事05：保护源码asar
[前言] 回顾之前的章节Electron那些事02:打包_uikoo9的博客-CSDN博客打包应用这里还有一个优化点,本节来优化一下 [对比Electron应用] 对比几个electron应用的文件 ...
electron打包在linux环境运行,通过Electron基于网页版打包Linux端飞书（Electron-Lark）...
在Linux系统下使用飞书,可使用下面提供的通过Electron基于网页版打包的Linux端飞书(Electron-Lark),提供deb和tar.xz包下载,支持Deepin.Ubuntu等版本. ...
【最简单】Electron 怎么将网页打包成桌面应用（web前端页面怎么生成exe可执行文件）
在 HTML5的崛起.JavaScript要一统天下之际,有一个名为[跨平台]的技术越来越火.为什么会这么火?因为软件开发者只需一次编写程序,即可在 Windows.Linux.Mac.IOS.And ...
Electron初步【02】--第一个Electron App
目录结构与文件 Electron App的目录结构如下: your-app/ ├── package.json ├── main.js └── index.html 其中的package.json和N ...
使用Electron将Web项目打包成windows桌面应用
1.从官网下载node.js并安装. 2.有不少人反映使用此命令安装Electron不成功,可能是国外镜像的问题. npm install --save-dev electron-prebuilt 3 ...
使用electron把vue项目打包成windows应用exe程序
1.安装electron依赖 npm install electron --save-devnpm install electron-packager --save-dev 2.修改vue.confi ...
使用 Electron 给前端项目打包成exe
还是接着上一篇的例子,在项目目录输入这个命令上一篇文章地址:https://juejin.im/post/6889422940928999438 使用electron-packager打包成exe ...
【Electron】使用Electron将web项目打包成桌面应用程序
目录一.所需环境&打包前准备 1.安装node.js 2.安装electron 3.web项目二.打包过程 1.打包配置 2. 安装打包器 3.执行打包命令: Electron是由GitH ...
electron之asar加密打包
全局安装 npm install -g asar 安装打包工具electron-packager npm i electron-packager 配置打包命令 electron-packager . ...

Electron那些事02：打包