使用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英文文档 中文文档