使用electron进行原生应用的打包
因为信奉一句话:JavaScript 终将一统天下,所以要想方设法开疆扩土.
今天介绍的这个electron就是一大神器,可以很方便的将网页应用打包为Mac, Win, Linux下的可执行文件,只需进行简单的配置,虽比不上原生的速度和瘦小,但是性价比着实不错.
一 在package.json中指明对应版本,(electron和electron-builder需放在devDependencies中),使用yarn添加模块
{
"name": "electron_example",
"private": true,
"scripts": {
},
"devDependencies": {
"electron": "~2.0.2",
"electron-builder": "~20.7.1"
}
}
二 添加配置文件,这是最重要的一步,这是我的推荐配置.(名字只能为electron-builder.yml)
appId: app.electron.example # 应用ID
artifactName: "${productName}-${version}.${ext}" # 应用最终的名称
productName: 'Electron Example App' # 打包完成后的应用名称
npmRebuild: false # 是否在开始编译前重构原生依赖,可先尝试true, 如果出现问题再修改为false,
files:
- index.js # 打包文件入口,后文将给出
directories:
output: electron_packed/ # 输出路径
extraResources:
- from: "../dist/" #包含的待打包文件
to: ""
mac: # 打包成mac环境参数
target:
- dmg # 打包为dmg格式(可选pkg,zip等)
icon: "./build/icon.icns" # 图标所在路径(使用字符串相对路径)
dmg: # 安装界面
contents:
- x: 410
y: 170
type: link
path: /Applications
- x: 130
y: 170
type: file
win: # 打包为win环境
icon: "./build/icon.ico" # 图标所在路径
target:
- nsis # 打包为nsis格式
verifyUpdateCodeSignature: false # 是否需要验证签名
# requestedExecutionLevel: requireAdministrator # 执行等级(是否需要管理员权限,通常情况不需要)
nsis:
oneClick: false # 是否一键安装(静默安装)
createDesktopShortcut: always # 创建桌面快捷方式
createStartMenuShortcut: true # 创建开始菜单快捷方式
# include: build/installer.nsh # 是否有额外的自定义安装需求,
runAfterFinish: true # 安装完成后是否勾选立即执行
三 编写入口文件 index.js
const electron = require('electron')const app = electron.app
const BrowserWindow = electron.BrowserWindow
const ipcMain = electron.ipcMain //EventEmitter class 事件触发类
const url = require('url')
const path = require('path')
let mainWindow = null // 创建全局对象,不然当js对象被垃圾回收的时候窗口会自动关闭
// 创建浏览窗口,定义高宽
function createWindow () {
mainWindow = new BrowserWindow({
width: 1000,
height: 650,
})
// 加载本地文件
mainWindow.loadURL(url.format({
pathname: path.join(process.resourcesPath, 'index.html'),
protocol: 'file:',
slashes: true
}))
// 调试阶段也可加载调试地址
// mainWindow.loadURL('http://localhost:8000/#/')
// 打开调试工具
// mainWindow.webContents.openDevTools()
// 窗口关闭时触发
mainWindow.on('closed', function () {
mainWindow = null
})
}
// 实现单例,防止程序多开
const iShouldQuit = app.makeSingleInstance((commandLine, workingDirectory) => {
// 如果为已有窗口,调用focus,如果最小化,还会恢复窗口
if (mainWindow) {
if (mainWindow.isMinimized()) mainWindow.restore();
mainWindow.focus();
}
});
// 多开退出程序
if (iShouldQuit) {
return app.quit();
}
// 加载完成之后调用事件
app.on('ready', createWindow)
// 只对windows有效,当所有窗口关闭后退出(OS X会强制一个窗口显示)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// 针对在OS X上的dock icon 点击时创建窗口
if (mainWindow === null) {
createWindow()
}
})
// 开始响应渲染
ipcMain.on('response-render', (event, arg) => {
event.sender.sender()
})
以上配置可以基本满足需求.
注意事项:
1 打包过程应该独立,所以不应该对项目造成污染,强烈建议创建一个新的文件夹(比如本文的electron_pack文件夹),放打包配置文件相关信息,包括打包好的文件,尽量避免对项目结构造成破坏
2 打包命令可写入package.json的脚本(script)中,注意, --project electron_pack是指定待打包文件夹,--win --ia32表示windows下32位,默认不配参数的话会按照当前平台的参数进行配置.并且需要再指定的打包文件夹中添加package.json(整个项目的package.json只需添加electron和electron_example的模块依赖),打包所需的配置写在这里.
electron_pack文件目录
. ├── build │ ├── icon.icns │ ├── icon.ico │ └── icons.png ├── electron-builder.yml ├── index.js └── package.json
项目的package.json
"build:mac": "rm -rf electron_pack/electron_packed && cross-env electron-builder --project electron_pack", "build:win": "rm -rf electron_pack/electron_packed && cross-env electron-builder --win --ia32 --project electron_pack"
编译执行命令:
yarn build:mac
yarn build:win
打包所需的package.json (json格式不允许注释,此处只是便于解释和理解)
{
"name": "electron_example", # 项目名(注意与打包名的区别)
"version": "1.0.0", # 打包版本
"description": "This is the first version to pack app", # 项目描述
"main": "index.js", # 主入口(打包入口文件地址)
"devDependencies": { # 必须在此处指定的依赖
"electron": "~2.0.2",
"electron-builder": "~20.7.1"
},
"author": "Lorry",
"license": "ISC"
}
3 指定图片(icon)需要使用字符串形式并且为相对路径
4 版本的区别真的很大,如果根据相同姿势进行操作还是出了问题,请注意版本,我的版本为electron: ~2.0.2 electron-builder:~20.7.1
5 请一定使用yarn方式进行安装,可以避免一些很微妙的错误.
更多详细功能及自定义请参见electron英文文档 中文文档
