【打包】
接上回 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的结构看下，是不是很相似
