electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)

系统管理员 2022-12-17 05:57 624阅读 0赞

# 我的electron教程系列 #

[electron教程(一): electron的安装和项目的创建][electron_ electron]

[electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范][electron_ _ VSCode_ ESLint _ Google JavaScript Style Guide]

[electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint][electron_ _TypeScript_electron_ VSCode_TypeScript_ TS_ESLint]

[electron教程(二): http服务器, ws服务器, 子进程管理][electron_ http_ ws_]

[electron教程(三): 使用ffi-napi引入C++的dll][electron_ _ffi-napi_C_dll]

[electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)][electron_ _electron-builder_electron-packager_.exe]

# 引言 #

本篇将介绍如何将你开发的electron项目(main.js), 打包成一个可执行桌面程序(.exe).

有两个流行的工具可以做到这一点: `electron-builder` 和 `electron-packager`.

我不会详细地对比两者的优劣, 但会通过三个事实来帮助你选择合适的工具.

1. `electron-builder`的Star为7.7k, `electron-packager`的Star为6.6k.  
2. 根据`electron-builder`的作者介绍, `electron-builder`打包后会比`electron-packager`更小, 还可以通过捐款来让作者优先帮你解决问题.  
3. `electron-builder`不支持`node原生模块`和`二进制模块`, 所有这类型的模块在打包的过程中, 都会经历一次`electron-rebuild`, 被编译成`electron模块`. 这个机制引入了一些问题: 某些模块无法通过`electron-rebuild`编译, [ffi-napi][electron_ _ffi-napi_C_dll]就是其中之一, 所以如果你的项目想要通过引入`ffi-napi`来使用C++的dll, 就只能选择`electron-packager`进行打包了.

# electron-packager #

### 1. 部署node.js+electron环境 ###

按步骤完成[electron教程(一): electron的安装和项目的创建][electron_ electron 1]所介绍的内容.

### 2. 安装electron-packager ###

执行指令:

yarn add electron-packager --save-dev

### 3. 在package.json中添加打包脚本 ###

//FIXME todo:因为我优化了项目目录, 把main.js和其他js移动到了src文件夹中, index.html及lib移动到了html中, 所以脚本中的目录可能需要一些修改

在package.json中的`scripts`中, 添加如下内容:

"packager": "electron-packager ./ testapp --win --out ./outputs"

如图所示:

![a7f9883b99fe37944d6ee4d2fd98d9ff.png][]

你可以在[electron-packager的github][electron-packager_github]上查找该脚本支持的所有的参数.

### 4. 打包 ###

执行指令:

npm run packager

![68e860066c48585492daa0f07af68fdb.png][]

如果顺利的话, 会出现打包成功的提示, 项目的根目录下出现`outputs`目录, 该目录下有`testapp-win32-x64`目录, 此目录下有若干文件, 包括`testapp.exe`可执行程序.

注:

\* `outputs`目录的名字是我们在packager脚本中指定的  
\* `testapp-win32-x64`的名字是因为我们指定了生成win平台下的程序, 如果你指定生成linux和mac平台下, 就会出现针对该平台的目录.  
\* `testapp.exe`同样是我们在packager脚本中指定的名字

![ffd520ec43420992f733c4c6bb785df8.png][]

### 4.1. 打包过程中会遇到的问题 ###

第一次执行打包指令的时候, 会非常非常的慢, 甚至可能会失败, 通常的原因如下:

下载速度太慢

electron-packager在当前机器的首次打包的时候，会下载electron的预编译文件至当前用户目录，而electron-prebuilder的默认源在国外，在网络不好的情况下，即便有代理，速度也会非常慢。

可选的方案如下:

\* 使用代理

\* 更换阿里镜像源 (成功率不高)

在执行打包脚本前, 先执行指令, 指定从阿里的镜像源来下载electron预编译文件:

npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

\* 使用cnpm (成功率较高, 但会引发别的问题, 如下)

用下面的指令替换`npm run packager`:

cnpm run packager

\* cnpm导致文件过大

如果你在项目构建过程中, 是通过`cnpm`来安装模块的, 会导致你项目中的`node_muduoles`体积非常大.

使用cnpm安装模块, 会导致所有的包都是扁平化的安装, `node_modules`中会有非常多的文件, 直接导致了`electron-packager`打包非常的慢.

而npm和yarn安装时, 所有的包都是树状解构的, 层级变深, 但是打包速度会快很多.

如果你已经使用cnpm安装过某些模块, 建议你删除这些模块, 以及这些模块的依赖, 重新使用npm和yarn安装.

一个技巧可以帮你快速完成上述步骤:

将项目根目录的`node_modules`彻底删除, 然后执行指令:

yarn install

该指令会读取项目目录下`package.json`中的`devDependencies`和`dependencies`中的内容(也就是你之前安装过的全部模块), 一次性重新安装.

注:

某些模块无法通过yarn安装, 比如`ffi-napi`, 如果你希望删除`node_modules`后利用`package.json`重新安装, 按照如下步骤即可:

1. 删除无法yarn的模块: 在`package.json`中, 将`ffi-napi`的内容删除.  
2. yarn安装其他模块: 通过`yarn install`先安装其他模块.  
3. 手动安装该模块: 执行`npm i ffi-napi`重新安装`ffi-napi`.

# electron-builder #

注:

因为我自己的项目中, 使用了`ffi-napi`. 所以我只能选择`electron-packager`作为打包工具.

在这里`electron-builder`只是简单的介绍了使用流程, 如果你在使用中遇到了什么问题, 可以参考`electron-packager`中的解决方案, 或者留言告诉我.

### 1. 部署node.js+electron环境 ###

[electron教程(一): electron的安装和项目的创建][electron_ electron 1]

### 2. 安装electron-builder ###

执行指令:

yarn add electron-builder --save-dev

### 3. 在package.json中添加打包脚本 ###

在package.json中, 添加如下内容:

"build": {
        "appId": " your.id ",
        "mac": {
            "category": " your.app.category.type "
        }
      },

在scripts中, 添加如下内容:

"pack": " electron-builder --dir ",
        "dist": " electron-builder --win --x64",
        "postinstall": "electron-builder install-app-deps"

如下图所示:  
![56797798a6227d8d901391f2363e1f97.png][]

### 4. 打包 ###

执行命令, 编译:

yarn postinstall

再执行命令, 打包:

yarn dist

\--------------------------------- E la nave va

[electron_ electron]: https://www.cnblogs.com/silenzio/p/11580104.html
[electron_ _ VSCode_ ESLint _ Google JavaScript Style Guide]: https://www.cnblogs.com/silenzio/p/11684336.html
[electron_ _TypeScript_electron_ VSCode_TypeScript_ TS_ESLint]: https://www.cnblogs.com/silenzio/p/11724373.html
[electron_ http_ ws_]: https://www.cnblogs.com/silenzio/p/11580267.html
[electron_ _ffi-napi_C_dll]: https://www.cnblogs.com/silenzio/p/11606389.html
[electron_ _electron-builder_electron-packager_.exe]: https://www.cnblogs.com/silenzio/p/11639960.html
[electron_ electron 1]: https://www.cnblogs.com/silenzio/p/11571830.html
[a7f9883b99fe37944d6ee4d2fd98d9ff.png]: /images/20221123/681ca60c9cdc4a2b89165ed8a3c871c0.png
[electron-packager_github]: https://github.com/electron/electron-packager
[68e860066c48585492daa0f07af68fdb.png]: /images/20221123/48833d9316e04b1b811768ccf33dffa2.png
[ffd520ec43420992f733c4c6bb785df8.png]: /images/20221123/b1a7fb20a1fc484b8ed0896ae28eec3e.png
[56797798a6227d8d901391f2363e1f97.png]: /images/20221123/0f90d79a02e74234a680daa0569ccafa.png