Electron + React 应用打包全流程(electron-react)

java8

帖子摘要：第一次用 Typora 写博希望效果不错~ 这几天有个创意编程比赛要写一个电脑端应用。我准备用 React.js  Electron 做因为熟悉~编程部分一路风雨无阻到了打包却出现了问题。Electr......

# E4 q7 t: f3 u) |8 w/ u大家好，欢迎来到Java吧（www.java8.com），交流、学习Java技术、获取Java资源无任何套路，今天说一说：“Electron + React 应用打包全流程”

3 s+ |# S6 x: C& I# t# Y
- k3 V6 O6 y/ t( f        
               
                    
                        
                    
& d4 N5 C* E) r, s9 U4 M$ T. ]                    第一次用 Typora 写博希望效果不错~

这几天有个创意编程比赛要写一个电脑端应用。我准备用 React.js + Electron 做因为熟悉~编程部分一路风雨无阻到了打包却出现了问题。Electron 没打过包不知道一打包一下两天两夜就没了T_T但最后还是打包成功了~ 由于里面坑很多把我打包的流程浅写在下面供需要的人参考。
9 Y% F( r/ d0 p  ^7 \1 ^6 P
6 D  I* ?+ x+ v- J1. 打包工具的选择
1 b1 R9 Q2 R4 t% Z& \粽锁粥汁Electron 的打包工具有两个electron-packager 和 electron-builder。它们都可以把 Electron 应用打包成可执行文件。这里我果断选择了 electron-builder。原因有两点

" L+ g0 E7 v; {, L3 I) }1. 打包文件体积小。用 electron-packager 我试着打了下包打出来一下子两个 G。要知道我写的只是一个小程序就占用两个 G…… 而使用 electron-builder 打包出来的文件才 91M 多。装在电脑上也才 400 多 M。
. ], m9 D3 g/ i1 s
7 w2 X- V+ N& N5 R2 n% E2. 和普通应用几乎没有区别。electron-packager 只能生成“绿色版”也就是没有安装程序直接运行里面的 exe。而 electron-builder 使用 NSIS可以把安装包打包出来。运行安装包可以安装应用电脑设置也能识别得到也很方便卸载。

( R5 h  R4 P5 c$ W2. 生成静态文件
这一步我们就是要把 React 项目的静态文件打包出来。这一步虽然简单但也有几个坑需要注意。如果你使用 React Router那 BrowserRouter 要替换成 HashRouter因为 BrowserRouter 打包之后路由使用不了路由组件本应该显示的部分直接白屏。

( N& _$ P) A( X! D! U) J9 v  H

c0ff019851e34038a1729da4cd083c1e.png (21.71 KB, 下载次数: 0, 售价: 4 金钱)

2023-1-19 10:22 上传

点击文件名下载附件
c0ff019851e34038a1729da4cd083c1e.png

* o6 r* A+ i9 f7 a7 H7 Q
! E6 E' @( d$ y' i& g然后就可以执行打包命令了。这个应该有学过。对于 npm运行 npm run build。对于 yarn就把前面的 npm 换成 yarn。

打包生成出来的文件也不能直接用。如果直接用的话 index.html 加载不出 js 文件会导致白屏。打开生成出来的 index.html把引入 js 的语句加上一个点。它代表从当前目录下的 static 加载 js。因为打包出来之后层级变了直接使用 / 就变成从根路径加载 js 了。

b94ff6b4375b4db6bd60619241be9399.png (22.97 KB, 下载次数: 0, 售价: 4 金钱)

2023-1-19 10:22 上传

点击文件名下载附件
b94ff6b4375b4db6bd60619241be9399.png

' q) {6 c) I2 K
最后就是把你应用的图标 favicon 的大小调整成 256x256。Electron 的应用图标大小必须要大于等于 256x256。别问我为什么人家 electron-builder 要求的T_T
1 {; F! h$ Z5 C
' v+ k9 r! u- `$ q3 K6 L3 {. i# x

25295c242bb64bca86959d21430418c4.png (40.4 KB, 下载次数: 0, 售价: 1 金钱)

2023-1-19 10:22 上传

点击文件名下载附件
25295c242bb64bca86959d21430418c4.png

9 ^/ c0 D5 o- U* s5 Y$ }) f
2 X  u* ^* K1 l9 E& ~( _( p6 u3. Electron 入口文件配置
Electron 入口文件就是 main.jsElectron 开启的时候从这个文件开始加载也是一个大坑。一不小心配置错误打包出来就又白屏了。Electron 入口文件的坑主要在于加载页面。

之前开发的时候使用的 loadURL(“localhost:3000”) 用不了了因为我们要加载的是刚刚生成出来的静态页面。这里需要用到 loadFile 来加载一个 html 文件。毫无疑问肯定是要引入我们刚刚打包出来的 index.html。
1 Q" ?& K3 O/ v) Y& `0 ?; J# _4 Y
首先把入口文件名字改为 main.js 然后移动到项目根目录与 package.json 同级然后把之前的 loadURL 删了改成 loadFile(“build/index.html”)代表加载 build 下的 index.html 文件。网上大部分教程都是教的 path.join(__dirname, “xxx”) 这种形式亲测无效。最简单的就是最好的~

e0d11a1418d74b1d9c195a23de62a0a7.png (32.06 KB, 下载次数: 0, 售价: 1 金钱)

2023-1-19 10:22 上传

点击文件名下载附件
e0d11a1418d74b1d9c195a23de62a0a7.png

4 t- h; s* d5 K. i  N' Z* E
4. electron-builder 配置
这是最重要的决定成败的一步。打开 package.json首先你需要把 main 属性的值设置为 ./main.js就是刚刚的那个 Electron 入口文件。

4a887b93067b4e5eabcf31787fcdba90.png (4.18 KB, 下载次数: 0, 售价: 4 金钱)

2023-1-19 10:22 上传

点击文件名下载附件
4a887b93067b4e5eabcf31787fcdba90.png

然后是 electron-builder 的配置了。这里我们只打包 Windows 的安装包。往 package.json 里加入如下代码。粘贴的时候注释“阅后即焚”~

"build": {
* e; u$ x0 H+ O2 p# L/ x! ^) H
    "appId": "XXX", // 软件包名填你软件的名字
    "productName": "XXX", // 产品名称也填你软件的名字
& P2 r! s2 t! Y0 \6 K4 f
    "copyright": "GPL 3.0", // 使用版权的名称可选
9 _3 m- K2 H3 ?
    "directories": { // 一些用到的文件夹
3 L% W  j) a( t
      "buildResources": "build", // 需要打包的静态文件目录
      "output": "dist" // 打包文件目录默认为 dist
+ y& v3 Z) F, M( A. S: f, x4 \
    },
    "nsis": { // 安装包生成程序 NSIS 的配置
      "oneClick": false, // 是否一键安装
6 n" |* T% p$ N- U/ I# z& J
      "language": "2052", // 语言为中文
      "perMachine": true, // 按机器安装
      "allowToChangeInstallationDirectory": true // 允许用户自定义安装路径
: {2 u) n" O5 c' J& q  O
    },
, V' D2 u$ J' m0 z* f5 w0 S! n
    "win": { // Windows 下的配置
      "icon": "./build/favicon.png", // 图标路径
) x" l2 }2 _+ m0 x5 a
      "target": "nsis" // 使用 NSIS 生成安装包
/ }8 W# N7 h, C3 i, {
    },
$ d1 N0 R- q7 O! e$ {
    "files": [ // 需要打包进去的文件
      "build/**/*", // build 下所有静态文件
      "./main.js" // 入口文件 main.js
    ],
9 U2 ?$ _! ~, l: M
    "extends": null // 不使用扩展
/ n3 p8 E: L" l" p
}
复制代码

$ t+ [) p9 o5 Z+ f1 R' }最后在 script 里添加一个条目 builder如下

72878d2d10a14835b289a71e9f9bbdde.png (22.36 KB, 下载次数: 0, 售价: 1 金钱)

2023-1-19 10:22 上传

点击文件名下载附件
72878d2d10a14835b289a71e9f9bbdde.png

; S) m" O) G5 t0 w
保存就配置完成了~
) |) j3 T6 M! k8 R& \
如果你想要配置其它平台或是其它配置请参考官网配置说明https://www.electron.build/configuration/configuration

3 G: W# F% X" S0 ?3 b2 k1 e% a$ G5. 准备打包文件
到这一步我们就可以安装打包工具 electron-builder 了。直接一行代码npm i electron-builder --save-dev 或是 yarn add electron-builder -D。
0 q% V# {! [$ X8 \% ~, j
) e0 a6 P1 _9 y7 xelectron-builder 在打包时需要很多依赖从官方下载地址下载非常慢所以我们要配置镜像。对于 npm输入
7 h* G5 W/ z! P+ f2 D" W

npm config set electron_mirror https://npmmirror.com/mirrors/electron/
0 ~$ b) l+ @  M: P, m
复制代码

对于 yarn把上面的 npm 替换成 yarn 即可。

& x; {* M  t2 L* |( }* H除此之外electron-builder 还需要一些镜像站没有的依赖要从 GitHub 上下载我们可以把这些文件分别下载并解压在如下目录

  n) R9 _% W6 p/ x6 o! o7 Y& owinCodeSignC:\Users\用户名\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.6.0

nsisC:\Users\用户名\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1

- P3 ]! ]$ Q$ M# N. qnsis-resourcesC:\Users\用户名\AppData\Local\electron-builder\Cache\nsis\nsis-resources-3.4.1
. c! u4 \& P( r- E; d8 P, V: ]8 @
它们的下载链接
8 T/ n* U: g6 i  X& _7 q
+ i$ v! G) {) E& N- W3 XwinCodeSignhttps://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z
% @. ^2 j; ^# g0 @5 V3 v  s! ~
nsishttps://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z
3 t. P: A8 D# a# p7 ~8 ~
nsis-resourceshttps://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z
) r) @% _5 O  t! i2 m, n
PS. 如果你去 GitHub 上看这些文件你可能会看见它们有更新的版本出来。但是人家 electron-builder 只认上面的版本版本不对 electron-builder 还要重新下载。上次我就是下载了 nsis 更新的版本然后导致了 electron-builder 又下载了一遍 nsisT_T
$ o3 s' }9 m$ H) H
6. 打包过程
0 H7 @! R; T/ f$ s+ c接下来就是最后的打包了。如果你的 electron 没有安装为 dev 依赖请卸载之后重新安装并加上 --save-dev。
8 z' G( v7 T5 W% L. t
, b1 A$ E0 S7 K2 B2 |9 S然后输入 npm run builder 开始打包。等待一会儿即可。它可能会报几个警告但是没事~

; ^. ]4 k" W9 D" l- H. z

4b666864be6d45c8846c8e1a9998ef7c.png (44.84 KB, 下载次数: 0, 售价: 4 金钱)

2023-1-19 10:22 上传

点击文件名下载附件
4b666864be6d45c8846c8e1a9998ef7c.png

9 z1 P5 J! s/ w# x+ E
7 t9 e9 }# ]8 H. X2 o2 i打包后你会看见生成了一个 dist 文件夹。dist 下有一个文件夹是 win-unpacked里面是绿色版免安装的打包程序。运行里面的 .exe 文件就可以打开你打包后的应用了。
+ S* H0 I' ~& ~* h1 r1 m  a# M
) R7 Q: z, O: H/ P6 }* D$ h

f0914d613eb94df79d18c7e5df39b447.png (35.94 KB, 下载次数: 0, 售价: 3 金钱)

2023-1-19 10:22 上传

点击文件名下载附件
f0914d613eb94df79d18c7e5df39b447.png

如果发现有白屏其实上面所有的排坑都是为了避免白屏可以在 main.js 里把开发者工具开起来然后打包运行根据它的报错进行相应的调整。不过上面排了那么多坑应该不会白屏了~
+ H, F& j- @1 u% O. c3 U
2 Z5 k6 g8 H9 x8 N9 d6 B5 v! Kdist 下的 .exe 文件就是你应用的安装包安装到电脑上就可以跟普通软件一样使用了。

$ i7 K, h9 P& D6 ^

58c5aab31884455986b1ec5b9b862263.png (12.36 KB, 下载次数: 0, 售价: 4 金钱)

2023-1-19 10:22 上传

点击文件名下载附件
58c5aab31884455986b1ec5b9b862263.png

如果能成功运行你的 React.js + Electron 应用就打包完成了恭喜~
8 C7 x- e# v0 y5 R( k4 t; _
P.S. Electron 应用也是真的大即使使用 builder 打包也还要 400 多 M看来前端即使有了 Electron 和原生后端应用还是有些差距~
               
- G1 _% k$ o/ h               
) R5 z5 s/ v: A4 q               
1 C2 Y" ^& a- u9 }0 O" D+ T本文来源csdn，由Java吧转载发布，观点不代表Java吧的立场，转载请标明来源出处：https://www.java8.com