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