Franz Electron + React 源码启动运行填坑指南
环境要求
-
安装miniconda python 环境@electron/rebuild用得着,miniconda 默认自带的 python 是 3.11 版本,比较新;
-
安装virsual studio 2019 要把C++桌面相关的都安装了,大概需要20G,不要安装到 C 盘,都安装到其他盘去;
运行步骤
-
Franz原始代码,因为需要运行 lerna,所以需要 python 环境是 python2.7,因为 package-lock.json 的原因,第一次运行时绕不开,删掉 package-lock.json 可能有其他问题;
-
另外就是 package.json 把electron-rebuild 库更换为@electron/rebuild: 3.6.0 的库,这个库改名了,旧库依赖的 node-gyp 版本太低,只能用 python2.7,而 conda 虚拟环境下的 python2.7 可能有点问题;
-
接着就是全局再安装一遍@electron/rebuild: 3.6.0
npm install @electron/rebuild@3.6.0 -g
,重构建时在默认环境下执行;
下面是 conda 创建 python2.7 环境的命令
# python2.7 conda 创建和使用方式
conda create -n py27 python=2.7
conda activate py27
-
还需要配置全局msvs_version版本号为2019,否则 npm run 时找不到具体的 vs 库
# 这样设置 node-gyp 才能找到vs版本 建议vs版本不要放在C盘 内容太大
npm config set msvs_version 2019 --global
-
一切就绪后,采用命令切换到 python2.7 环境,然后运行
npx lerna bootstrap
,如果不切到 python2.7 环境,则会报rU
问题,这个是 python2.7 语法问题-
必须用conda 切换到python2.7环境
conda activate py2.7
,然后再运行上面的安装依赖命令 -
运行
npx lerna run build
,来构建UI子包,否则你运行npm run start
,本地是没有内容的,这非常重要,运行完毕后,你会看到 packages.forms/theme/ui 文件夹下多出来一个 lib 文件夹,这个会被用到,没有这些内容,Franz 的渲染进程无法执行,你也看不到登录界面,之前我在这里卡了很久
-
-
等第一次
npx lerna bootstrap
运行完后,安装包就会正常安装,如果你这时再在 py27 环境运行这段话,就会报以下问题,如果还想再运行这个命令,直接重开一个 Terminal,在里面运行npx lerna bootstrap
-
经过上面的倒腾,你只需要在一个终端里
npm run dev
,来打包渲染进程的 react 代码,并实现热更新,另外再打开一个终端,运行npm run start
就能启动 Franz 了,这个跟我们 electron-vue 有区别,electron-vue 只是把两个命令用 runner.js 合二为一了,但是我觉得这样更好,逻辑解耦性较强
其他须知
-
lerna 是将多个项目代码放在一个代码库里,可以通过搭建私服来管理多个库,B站有课,这个也是我们未来探索的一个方向,进一步按照 Franz 的方式将我们的代码进行解耦和隔离
-
npx lerna run build
后,你会发现packages.forms 下多了node_modules和lib两个文件夹 -
全局安装@electron/rebuild: 3.6.0,可以在多个 Electron 代码里进行 node-modules 库重建
npm install -g @electron/rebuild@3.6.0
npx electron-rebuild
-
Franz通过router方式共用了登录和主界面的窗口,没有额外创建窗口,这种方式我们也可以借鉴
-
.npmrc 文件里最好配置上两个镜像,以加快 builder 二进制库的下载,这里其实你还能看到注释掉的 python 版本要求就是 2.7
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/
运行说明
-
npm run start
主进程不打印日志,这是因为默认electron命令会忽略console.log的输出,可通过配置环境变量开启,我是直接通过&&将这个设置放到了 start 命令里了,如set ELECTRON_ENABLE_LOGGING=1 && electron --inspect=5858 ./build
这样启动,就可以打印详细日志
原文地址:https://blog.csdn.net/wangsenling/article/details/138837391
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!