回答

收藏

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

知识点 知识点 25 人阅读 | 0 人回复 | 2023-01-19

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

# E4 q7 t: f3 u) |8 w/ u大家好,欢迎来到Java吧(www.java8.com),交流、学习Java技术、获取Java资源无任何套路,今天说一说:“Electron + React 应用打包全流程”7 M0 e1 U: Z! q! U" r0 L9 |

3 s+ |# S6 x: C& I# t# Y
- k3 V6 O6 y/ t( f        & D2 o. D* Y6 F+ P3 l" w
                8 B' h, h2 F9 O$ F7 |  ?0 Q$ E
                    & h* M: T. j" y+ G
                        & [7 _$ W. L9 {6 J3 t* K: `  ?
                    
& d4 N5 C* E) r, s9 U4 M$ T. ]                    第一次用 Typora 写博希望效果不错~7 J2 L- \9 \5 z/ n2 ?
: u3 i/ H/ w* h6 _1 P
这几天有个创意编程比赛要写一个电脑端应用。我准备用 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。原因有两点. Q1 b+ Y$ _5 _! b7 ~% [$ T

" 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可以把安装包打包出来。运行安装包可以安装应用电脑设置也能识别得到也很方便卸载。$ Y# f  j1 v  _* T0 O* W0 c$ v

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

( N& _$ P) A( X! D! U) J9 v  H
c0ff019851e34038a1729da4cd083c1e.png (21.71 KB, 下载次数: 0, 售价: 4 金钱)
分享到:
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则