Franz Electron + React 源码启动运行填坑指南

森叶

已于 2024-05-14 09:26:42 修改

阅读量671

点赞数 19

分类专栏： Electron Vue 技术开发文章标签： electron react.js javascript

于 2024-05-14 09:21:51 首次发布

本文链接：https://blog.csdn.net/wangsenling/article/details/138837391

版权

2 篇文章 0 订阅

订阅专栏

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

# 这样设置 node-gyp 才能找到vs版本 建议vs版本不要放在C盘 内容太大
npm config set msvs_version 2019 --global

一切就绪后，采用命令切换到 python2.7 环境，然后运行npx lerna bootstrap,如果不切到 python2.7 环境，则会报rU问题，这个是 python2.7 语法问题
1. 必须用conda 切换到python2.7环境 conda activate py2.7,然后再运行上面的安装依赖命令
2. 运行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

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 这样启动，就可以打印详细日志

关注