Angular项目使用Electron打包为桌面程序

        项目中，有时会需要将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 -g

2、在项目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"