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

环境要求

  1. 安装miniconda python 环境@electron/rebuild用得着,miniconda 默认自带的 python 是 3.11 版本,比较新;

  2. 安装virsual studio 2019 要把C++桌面相关的都安装了,大概需要20G,不要安装到 C 盘,都安装到其他盘去;

运行步骤

  1. Franz原始代码,因为需要运行 lerna,所以需要 python 环境是 python2.7,因为 package-lock.json 的原因,第一次运行时绕不开,删掉 package-lock.json 可能有其他问题;

  2. 另外就是 package.json 把electron-rebuild 库更换为@electron/rebuild: 3.6.0 的库,这个库改名了,旧库依赖的 node-gyp 版本太低,只能用 python2.7,而 conda 虚拟环境下的 python2.7 可能有点问题;

  3. 接着就是全局再安装一遍@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
  1.  还需要配置全局msvs_version版本号为2019,否则 npm run 时找不到具体的 vs 库

# 这样设置 node-gyp 才能找到vs版本 建议vs版本不要放在C盘 内容太大
npm config set msvs_version 2019 --global
  1. 一切就绪后,采用命令切换到 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 的渲染进程无法执行,你也看不到登录界面,之前我在这里卡了很久

  1. 等第一次npx lerna bootstrap运行完后,安装包就会正常安装,如果你这时再在 py27 环境运行这段话,就会报以下问题,如果还想再运行这个命令,直接重开一个 Terminal,在里面运行npx lerna bootstrap

  1. 经过上面的倒腾,你只需要在一个终端里npm run dev,来打包渲染进程的 react 代码,并实现热更新,另外再打开一个终端,运行npm run start就能启动 Franz 了,这个跟我们 electron-vue 有区别,electron-vue 只是把两个命令用 runner.js 合二为一了,但是我觉得这样更好,逻辑解耦性较强

其他须知

  1. lerna 是将多个项目代码放在一个代码库里,可以通过搭建私服来管理多个库,B站有课,这个也是我们未来探索的一个方向,进一步按照 Franz 的方式将我们的代码进行解耦和隔离

  2. npx lerna run build后,你会发现packages.forms 下多了node_modules和lib两个文件夹

  3.  全局安装@electron/rebuild: 3.6.0,可以在多个 Electron 代码里进行 node-modules 库重建 

npm install -g @electron/rebuild@3.6.0
npx electron-rebuild
  1. Franz通过router方式共用了登录和主界面的窗口,没有额外创建窗口,这种方式我们也可以借鉴

  2. .npmrc 文件里最好配置上两个镜像,以加快 builder 二进制库的下载,这里其实你还能看到注释掉的 python 版本要求就是 2.7

ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/

运行说明

  1. npm run start 主进程不打印日志,这是因为默认electron命令会忽略console.log的输出,可通过配置环境变量开启,我是直接通过&&将这个设置放到了 start 命令里了,如 set ELECTRON_ENABLE_LOGGING=1 && electron --inspect=5858 ./build 这样启动,就可以打印详细日志

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/327911.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FlyFlow:支持驳回后自动跨节点跳回

本周更新 新增:审批节点驳回(拒绝配置的驳回)支持自动跳回当前节点新增:修改数据节点新增:删除数据节点新增:子流程支持配置自动跳过发起人节点优化:两个项目合并一个单体项目优化:…

JavaEE初阶-多线程进阶2

文章目录 前言一、CAS1.1 CAS的概念1.2 原子类1.3 CAS的ABA问题 二、JUC中常用类2.1 Callable接口2.2 ReentrantLock(可重入)2.3 Semaphore信号量2.4 CountDownLatch类2.5 CopyOnWriteArrayList类2.6 ConcurrentHashMap 前言 对于多线程进阶的部分&…

linux安装Openresty

安装必要的依赖库 指定仓库地址 下载openresty 添加环境变量 vi /etc/profile i export NGINX_HOME/usr/local/openresty/nginx/ export PATH${NGINX_HOME}/sbin:$PATH esc :wq source /etc/profile #启动 nginx # 重启 nginx -s reload #关闭 nginx -s stop

【class8】人工智能初步(图像识别-----卷积神经网络)

上节回顾 上节课,我们简单了解了图像识别和深度学习的相关知识。 快速回顾一下吧~ A图像识别是以图像的主要特征为基础的。B. 图像分辨率决定图像的质量。 C. 像素是图像中的最小单位D. 在图像识别的原理上,计算机和人类在本质…

Linux 生态与工具

各位大佬好 ,这里是阿川的博客 , 祝您变得更强 个人主页:在线OJ的阿川 大佬的支持和鼓励,将是我成长路上最大的动力 阿川水平有限,如有错误,欢迎大佬指正 目录 Linux生态简介:Linux工具lrzsz&#xff…

Nginx配置到系统中

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 Nginx(“engine x”…

Mixtral

文章目录 一、关于 MixtralMistral AI、 La PlateformeMistral AI LLMs 二、Mistral AI API账户设置 三、Mixtral 说明通过稀疏架构推动开放模型的前沿表现Instructed 模型使用开源部署堆栈部署 Mixtral在我们的平台上使用 Mixtral。 一、关于 Mixtral 官网:https:…

前端已死? Bootstrap--JS-jQuery

目录 Bootstrap--JS-jQuery 1 jQuery基础 介绍 基础语法: $(selector).action() 1.1 安装jQuery 地址 基础语法: $(selector).action() 2 jQuery事件 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 jQuery常用事件 2.1 鼠标事件…

Find My OBD|苹果Find My技术与OBD结合,智能防丢,全球定位

OBD是英文On-Board Diagnostics的缩写,中文翻译为“车载自动诊断系统”。这个系统将从发动机的运行状况随时监控汽车是否尾气超标,一旦超标,会马上发出警示。当系统出现故障时,故障(MIL)灯或检查发动机(Check Engine)警告灯亮&…

Linux修改终端命令颜色

1.在家目录中修改.bashrc文件 cd ~ vim .bashrc2.找到PS1相关段落,把其他的注释掉,填上该行代码,修改为自己设置的颜色 (具体颜色查看参考文章) 提供两种颜色,其他的自学调色盘吧(下文有)~ (祝你愉快) ①浅蓝色 深蓝 PS1\[\03…

【负载均衡式在线OJ项目day6】源文件路由功能及文件版题库构建

一.前言 前文讲到了OJ模块的设计思路,毫无疑问这是一个网络服务,我们先使用httplib,将源文件的路由功能实现,先把框架写好,后续再更改回调方法。 随后计划编写Modify模块,提供增删查改题库的功能(主要是查…

深度学习设计模式之简单工厂模式

文章目录 前言一、简单工厂设计模式的作用?二、详细分析1.核心组成2.实现步骤3.示例代码4.优缺点优点缺点 5.使用场景 总结 前言 本文主要学习简单工厂设计模式,这个设计模式主要是将创建复杂对象的操作单独放到一个类中,这个类就是工厂类&a…

el-menu 保持展开点击不收缩 默认选择第一个菜单

<el-menu:default-openeds"[/system]" 数组 默认展开第一个:collapse"isCollapse"close"handleClose" 点击关闭的时候 让菜单打开 就可以实现保持展开效果ref"menus":unique-opened"true":active-text-color"se…

回收站文件恢复,6种方法高效恢复数据!

“有没有朋友可以分享一下回收站里的文件有什么比较简单的恢复方法呀&#xff1f;误删了一个重要的文件实在不知道应该怎么操作才能恢复了。” 回收站作为电脑删除文件的暂存地&#xff0c;有机会为我们找回很多重要的文件和数据。很多用户在文件删除后会先查看回收站&#xff…

halo博客--解决恶意刷评论的问题

原文网址&#xff1a;halo博客--解决恶意刷评论的问题_IT利刃出鞘的博客-CSDN博客 简介 本文介绍halo博客如何通过设置评论次数来解决恶意刷评论的问题。 评论功能要设置频率的限制&#xff0c;否则可能被人一直刷评论&#xff0c;然后数据库存的垃圾评论越来越多&#xff0…

二分图及图匹配(图论学习总结部分内容)

文章目录 前言四、二分图及图匹配二分图常见模型二分图例题 e g 1 : eg1: eg1: [ Z J O I 2009 ZJOI2009 ZJOI2009​\][假期的宿舍](https://ac.nowcoder.com/acm/contest/34649/B)(二分图最大匹配板题) e g 2 : eg2: eg2:​​ [C-Going Home](https://ac.nowcoder.com/acm/con…

解决使用Vue.js前端与Flask后端API交互时跨源资源共享问题

我在使用flask以及Vue做一个项目时遇到了Vue前端与Flask后端API交互的问题就是前端获取不到后端返回的数据&#xff0c;报错&#xff1a; 上网查说是跨域问题&#xff0c;于是找了一些解决办法&#xff0c;就是可以通过设置响应头的 Access-Control-Allow-Origin 字段来允许所有…

从心理学角度看,GPT 对人有什么影响?

开启个性化AI体验&#xff1a;深入了解GPT的无限可能 导言 GPT 与我们日常生活的融合标志着技术进步的重大飞跃&#xff0c;为提高效率和创新提供了前所未有的机遇。然而&#xff0c;当我们与这些智能系统日益紧密地交织在一起时&#xff0c;探索它们对个人产生的细微的心理影响…

Linux基础之进程-进程状态

目录 一、进程状态 1.1 什么是进程状态 1.2 运行状态 1.2 阻塞状态 1.3 挂起状态 二、Linux操作系统上具体的进程状态 2.1 状态 2.2 R 和 S 状态的查看 2.3 后台进程和前台进程 2.4 休眠状态和深度休眠状态 一、进程状态 1.1 什么是进程状态 首先我们知道我们的操作系…

写一个类ChatGPT应用,前后端数据交互有哪几种

❝ 对世界的态度&#xff0c;本质都是对自己的态度 ❞ 大家好&#xff0c;我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder 前言 最近&#xff0c;公司有一个AI项目&#xff0c;要做一个文档问答的AI产品。前端部分呢&#xff0c;还是「友好借鉴」Cha…