????????项目中，有时会需要将Web页面应用打包为桌面程序。像visual studio code就是使用Web页面打包的桌面程序。
????????本文记录了使用Electron打包Angular项目的步骤。前提条件是已有项目已经按照Angular脚手架进行创建及开发，并且能够正常发布。
1、安装Electron依赖库
????????执行以下命令安装配置依赖库：
npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
npm install electron -g
npm install electron-packager -g2、在项目src/目录下添加文件： el-main.js ， package.json
????????添加后的目录结构：
????????其中 el-main.js 包含 electron 所需的启动程序入口，文件代码如下：
const?{?app,?Menu,?BrowserWindow?}?=?require('electron');
//?保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
//?垃圾回收的时候，window对象将会自动的关闭
let?win
function?createWindow()?{
????//?创建浏览器窗口。
????win?=?new?BrowserWindow({
????????width:?800,
????????height:?600,
????????minWidth:?500,
????????minHeight:?500,
????????webPreferences:?{ nodeIntegration:?true }
????})
????//?加载index.html文件
????win.loadFile('index.html')??//?这个路径可以根据你实际的项目目录结构进行修正
????//?打开开发者工具
????win.webContents.openDevTools()
????//隐藏菜单栏
????Menu.setApplicationMenu(null)
????//?当?window?被关闭，这个事件会被触发。
????win.on('closed',?()?=>?{
????????//?取消引用?window?对象，如果你的应用支持多窗口的话，
????????//?通常会把多个?window?对象存放在一个数组里面，
????????//?与此同时，你应该删除相应的元素。
????????win?=?null
????})
}
//?Electron?会在初始化后并准备
//?创建浏览器窗口时，调用这个函数。
//?部分?API?在?ready?事件触发后才能使用。
app.on('ready',?createWindow)
//?当全部窗口关闭时退出。
app.on('window-all-closed',?()?=>?{
????//?在?macOS?上，除非用户用?Cmd?+?Q?确定地退出，
????//?否则绝大部分应用及其菜单栏会保持激活。
????if?(process.platform?!==?'darwin')?{
????????app.quit()
????}
})
app.on('activate',?()?=>?{
????//?在macOS上，当单击dock图标并且没有其他窗口打开时，
????//?通常在应用程序中重新创建一个窗口。
????if?(win?===?null)?{
????????createWindow()
????}
})
//?在这个文件中，你可以续写应用剩下主进程代码。
//?也可以拆分成几个文件，然后用?require?导入。?????????package.json 包含electron打包配置信息，代码如下：
{
????"name":?"my-project",
????"version":?"1.0.0",
????"main":?"el-main.js",
????"description":?"my-project",
????"author":?"abc@qq.com"
}3、修改angular.json将上一步骤添加的文件加入到发布目录中
????????修改节点为： build.options.assets, 修改后的节点如下图所示：
4、修改项目原有的package.json添加打包指令
"pack":?"electron-packager?--electron-version=11.2.2?./dist/matrix?matrix?--platform=win32?--arch=x64??--app-version=1.0.0?--asar?--overwrite?--out=./dist"????????其中 ?./dist/matrix 用于指定打包的文件的目录
????????如下图所示：
? ? ? ? 到此，调用npm run pack就可以进行打包操作了。（打包前应确保项目已经发布过，即?./dist/matrix 目录内有正确的已发布内容）。
????????运行结果如下图所示：
????????打包结束之后，你可以在项目的 dist 目录下找到两个文件夹：
????????|--dist
????????|--dist/matrix
????????|--dist/matrix-win32-x64
? ? ? ? 目录matrix-win32-x64中就是打包的桌面程序，点击里边的exe文件就可以运行程序。
????????如果需要打包linux环境的桌面程序可以添加对应的打包指令：
"pack4linux":?"electron-packager?--electron-version=11.2.2?./dist/matrix?matrix?--platform=linux??--arch=x64??--asar?--app-version=1.0.0?--out=./dist?--overwrite"????????如果需要打包IOS环境的桌面程序可以添加对应的打包指令：
"pack4mac": electron-packager --electron-version=11.2.2?./dist/matrix?matrix --platform=darwin --arch=x64 --asar --app-version=0.0.0 --out=./dist?--overwrite"