Electron实战笔记之构建App.md

米洛 2022/6/13 Electron

# 构建Electron App

之前我们介绍过Electron的搭建以及与系统交互的内容，当一个应用逐渐完善，肯定是得共享给他人使用的。

那么今天我们就来介绍一下Eelectron里面的打包工具: Electron-Builder

# Electron的打包工具

根据官网的指引，官方推荐了以下3款打包工具。我尝试了其中的2款，并成功打出了mac/windows双系统的app，并且测试了一番，感觉还不错。

electron-forge
electron-builder
electron-packager

对于forge，我看了一下近期更新的不是很频繁，甚至npm包版本还是beta版本

并且我根据文档来，还报了错，所以，我选择了electron-builder。

# Electron Builder

electron-builder (opens new window)官网的文档比较详细，而且配置也非常丰富。

由于官网的例子比较丰富，所以我这就只介绍最简单的使用场景了。

# 打包umi项目

我们需要先将umi项目构建，变为对应的静态资源（html/js/css)。

# umi build
npm run build

1
2

# 改造package.json

同样，package.json也需要进行一些适当的调整。主要是为了加入打包的配置数据:

# 加入build参数

{
    "appId": "pora",
    "files": [
      "!**/node_modules/*"
    ],
    "includeSubNodeModules": false,
    "icon": "./logo.ico",
    "mac": {
      "category": "woody.app.pora"
    },
    "electronDownload": {
      "mirror": "https://npm.taobao.org/mirrors/electron/"
}

1
2
3
4
5
6
7
8
9
10
11
12
13

我们一个个来看这些参数:

appId

构建的唯一标识
files

需要打包的文件列表，默认来说会打包所有，由于我们已经build好了，其实不太需要node_modules的数据，这里我们就拒绝打包node_modules的数据即可。
includeSubNodeModules

不打包子模块。
icon

这里值得注意的是，mac需要512x512的ico图标，mac支持png和ico等，windows需要ico文件。（都不支持svg）我是在线搜了个svg转ico的网站转换的。
mac

mac下独有的配置，我也不知道有没有啥用，主要是类似Java package的路径，标识app唯一路径的。
electronDownload

这配置可以加上，不然可能会被墙，过程中。

# 加入Scripts命令

我们把"app:dist": "electron-builder",加入到scripts。

最终效果如图所示:

接着我们就可以开始下一步了。

# 安装electron和electron-builder

npm install --save-dev electron
npm install --save-dev electron-builder

1
2

这里可以用yarn和cnpm，你们啥装得上就用啥。--save-dev是指调试环境使用。

# 启动builder

// cnpm run app:dist
npm run app:dist

1
2

接着我们就可以启动npm命令，执行对应的操作了。稍等片刻，就可以得到dist目录, 注意，umi目录默认build输出的也是dist，我这里是改成了别的，所以2者没冲突。

大家可以参考下我这个项目: https://github.com/wuranxu/pora (opens new window)

注意还得指定main.js的输出目录哈。

# 看看打包后的内容

Windows下，默认会有安装版和绿色版，绿色版比较大，几乎裸的app就有100来MB，所以可以给安装版其他人用。

注意安装版也是有很多配置的，我比较懒，这里就没写上，都是默认的。建议给出绿色版

下面的dmg则是mac平台打包后，传到Windows这台机器来的，其实正常来讲不会生成dmg的哈。

打开pora以后，然后我就得到了自己的轻量版本mdnice的markdown编辑器，做工比较粗糙，主要是自用为主。

欢迎大家一起探讨哈~有打包问题欢迎大家留言~~

米洛的小窝

Choose mode