手动打包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.readFile和require可以像访问普通目录一样访问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：