手动打包Electron比较繁琐,现在有两个自动打包Electron应用的工具:

自动打包工具会带来很多好处,他会自动帮你打包多个平台的安装包(windows/macos/linux),还会集成自动更新功能。这里我使用的是electron-builder

Quick Start

安装:

1
npm i --save-dev electron-builder

确保你的package.json中包含这些字段:name, description, version and author

pacpackage.json中添加build属性:

1
2
3
4
5
6
7
8
9
"build": {
"appId": "your.id",
"mac": {
"category": "your.app.category.type"
},
"win": {
"iconUrl": "(windows-only) https link to icon"
}
}

全部的属性说明见all options

在项目根目录下建立build文件夹,其中存放三个图片:

  1. background.png (macOS DMG background)
  2. icon.icns (macOS app icon)
  3. icon.ico (Windows app icon)

package.json中添加两个script命令:

1
2
3
4
"scripts": {
"pack": "build --dir",
"dist": "build"
}

然后运行npm run dist就行啦!默认会在项目目录的dist目录下生成可执行程序,安装包和zip包。比如我在mac上生成的例子:

1
2
3
4
5
6
7
.
├── github
│   └── latest-mac.json
└── mac
├── mmnote-1.0.0-mac.zip
├── mmnote-1.0.0.dmg
└── mmnote.app

其中github目录是用于自动更新的。

定制

默认输出目录在dist。修改输出目录可以在build属性中添加配置:

1
2
3
"directories": {
"output": "package"
}

asar格式

asar格式是Electron项目组推出的一种文件打包格式,官网介绍如下:

Asar is a simple extensive archive format, it works like tar that concatenates all files together without compression, while having random access support.
Asar是一个简单的可扩展的打包格式,类似于tar那样把所有文件不带压缩地打包到一个文件中,并且支持随机访问

支持随机访问是一个亮点吧,这样所谓Electron App的载体,传输更方便了,但是访问速度不会降低很多。

安装:

1
npm install -g asar

查看一个asar包中的文件:

1
asar list x.asar

在应用中访问asar

Electron应用中支持两种方式来访问asar:

1 Node APIs provided by Node.js

Electron对nodejs做了一些补丁,所以像fs.readFilerequire可以像访问普通目录一样访问asar文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 读取打包文件中的资源
const fs = require('fs')
fs.readFileSync('/path/to/example.asar/file.txt')
List all files under the root of the archive:
// 列出打包文件根目录下的文件
const fs = require('fs')
fs.readdirSync('/path/to/example.asar')
// 导入打包文件中的模块
require('/path/to/example.asar/dir/module.js')
You can also display a web page in an asar archive with BrowserWindow:
// 也可以使用asar中的页面初始化BrowserWindow
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({width: 800, height: 600})
win.loadURL('file:///path/to/example.asar/static/index.html')

2 Web APIs provided by Chromium

在网页中可以使用file协议来访问asar中的文件:

1
2
3
4
5
6
<script>
let $ = require('./jquery.min.js')
$.get('file:///path/to/example.asar/file.txt', (data) => {
console.log(data)
})
</script>

参考资料

asar: