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.mzph.cn/pingmian/12463.shtml

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

相关文章

【C++】认识C++(上)

目录 从C到C命名空间同名冲突命名空间的定义命名空间的使用 C的输入和输出缺省参数(默认参数) 从C到C C语言的出现是计算机科学和工程史上的一个重要里程碑,许多现代计算机语言都受C语言的影响。C语言是面向过程的,结构化和模块化…

力扣HOT100 - 279. 完全平方数

解题思路&#xff1a; 动态规划 class Solution {public int numSquares(int n) {int[] dp new int[n 1];// 初始化dp数组&#xff0c;默认最坏情况是每个数都是由1相加得到的for (int i 1; i < n; i) {dp[i] i;}for (int i 1; i < n; i) {for (int j 1; j * j &…

Python Twisted库:异步网络编程的利器

更多Python学习内容&#xff1a;ipengtao.com 在现代网络应用开发中&#xff0c;异步编程已经成为一种必备的技能。Python Twisted库是一款强大的异步网络编程框架&#xff0c;它提供了丰富的工具和功能&#xff0c;使得开发者可以轻松地构建高性能的网络应用。 基本概念 Twist…

在虚机VirtualBox7.0.8安装Androidx86_64系统详细步骤要点

最近需要用到安卓系统蓝牙功能做测试&#xff0c;就选择了Virtualboxandroidx86方案&#xff0c;先把系统安装好&#xff0c;后面看是否可以比较好的完成蓝牙功能测试。如果可以的话&#xff0c;我会再发文分享下的&#xff0c;敬请期待。 1.准备材料 &#xff08;1&#xff…

Python API和微服务的测试库之httpretty使用详解

概要 在现代软件开发中,API和微服务的测试是确保应用稳定性和功能正确性的关键环节。Python的HTTPretty库提供了一个强大的工具,允许开发者在不实际发起网络请求的情况下模拟HTTP请求和响应。本文将全面介绍HTTPretty的安装、特性、基本与高级功能,并结合实际应用场景,展示…

企业如何利用美国多IP服务器来提升网站的安全性?

企业如何利用美国多IP服务器来提升网站的安全性? 在当前网络环境下&#xff0c;网站安全性日益成为企业面临的重要挑战。为了有效应对各种潜在威胁&#xff0c;越来越多的企业选择利用美国多IP服务器来提升其网站的安全性。这种服务器配置能够通过一系列策略来增加网站的安全…

5G NR 吞吐量计算 and 4G LTE 吞吐量计算

5G NR Throughput References • 3GPP TS 38.306 V15.2.0 (2018-06) ➤J : number of aggregated component carriers in a band or band combination ➤Rmax : 948/1024 • For the j-th CC, Vlayers(j) is the maximum number of layers ➤Qm(j) : Maximum modulation orde…

视频推拉流/视频直播点播平台EasyDSS使用Mysql数据库接口报错502如何处理?

视频推拉流/视频直播点播EasyDSS互联网直播平台支持一站式的上传、转码、直播、回放、嵌入、分享功能&#xff0c;具有多屏播放、自由组合、接口丰富等特点。平台可以为用户提供专业、稳定的直播推流、转码、分发和播放服务&#xff0c;全面满足超低延迟、超高画质、超大并发访…

meshlab: pymeshlab合并多个物体模型并保存(flatten visible layers)

一、关于环境 请参考&#xff1a;pymeshlab遍历文件夹中模型、缩放并导出指定格式-CSDN博客 二、关于代码 本文所给出代码仅为参考&#xff0c;禁止转载和引用&#xff0c;仅供个人学习。 本文所给出的例子是https://download.csdn.net/download/weixin_42605076/89233917中的…

计算机视觉——OpenCV实现Lucas-Kanade 光流追踪

1.光流 光流法是计算机视觉中用于估计图像序列中物体运动的关键技术。它类似于观察夜空中的彗星&#xff0c;通过其在天空中的运动轨迹来追踪它的路径。在图像处理中&#xff0c;光流帮助我们理解像素点如何在连续的帧之间移动。 1.1 稀疏光流法 稀疏光流法关注于图像中的关…

tarjan学习

1.割点&#xff08;必须经过&#xff09;&#xff1a;当时&#xff0c;y是一个割点&#xff0c;x是y的一个子节点&#xff0c;当没有点x时&#xff0c;y无法访问其他点 2.割边&#xff08;必须经过&#xff09;&#xff1a;当时&#xff0c;y不经过这条边无法到达x&#xff0c…

默认成员函数:析构、深浅拷贝

析构函数 析构函数&#xff1a;与构造函数功能相反&#xff0c;析构函数不是完成对对象本身的销毁&#xff0c;局部对象销毁工作是由编译器完成的。而对象在销毁时会自动调用析构函数&#xff0c;完成对象中资源的清理工作。 特性 析构函数名时在类名前面加上字符~ class D…

Spring Bean的生命周期 五步 七步 十步 循序渐进

&#x1f468;‍&#x1f3eb; 参考视频地址 &#x1f496; 五步版 实例化 bean&#xff08;构造方法&#xff09;属性注入&#xff08;set() 方法&#xff09;初始化方法&#xff08;自定义&#xff09;使用bean销毁方法&#xff08;自定义&#xff09; &#x1f496; 七步版…

linux的 /usr/sbin/nologin /sbin/nologin /bin/false /etc/nologin 的作用与区别

/usr/sbin/nologin /sbin/nologin /bin/false /etc/nologin 的作用与区别 /usr/sbin/nologin /sbin/nologin /bin/false 这三者的作用几乎一样&#xff0c;都是禁止用户登录。 /usr/sbin/nologin /sbin/nologin 是同一个文件&#xff0c;通过软连接指向。 当把用户的bash设置…

生态系统类型分布数据、土地利用数据、植被类型分布、自然保护区分布数据

引言 全国自然保护区生态系统类型分布信息产品是指基于Landsat TM数字影像&#xff08;以地形图纠正&#xff09;&#xff0c;采用全数字化人机交互遥感快速提取方法&#xff0c;建立全国自然保护区生态系统结构数据集&#xff0c;同时做成多种尺度的栅格数据&#xff0c;其中包…

JVM面试题:85道JVM虚拟机面试题及答案

面试题 1 .简述Java堆的结构&#xff1f;什么是堆中的永久代(Perm Gen space)? JVM整体结构及内存模型 试题回答参考思路&#xff1a; 1、堆结构 JVM的堆是运行时数据区&#xff0c;所有类的实例和数组都是在堆上分配内存。它在JVM启动的时候被创建。对象所占的堆内存是由自…

美国站群服务器如何提高企业网站的负载均衡能力?

美国站群服务器如何提高企业网站的负载均衡能力? 美国站群服务器是企业提高网站负载均衡能力的重要工具之一。随着网络流量的增加和用户需求的多样化&#xff0c;如何有效地管理和分配流量成为了企业面临的挑战。通过采用美国站群服务器&#xff0c;企业可以实现流量的智能分…

排序(一)----冒泡排序,插入排序

前言 今天讲一些简单的排序,冒泡排序和插入排序,但是这两个排序时间复杂度较大,只是起到一定的学习作用,只需要了解并会使用就行,本文章是以升序为例子来介绍的 一冒泡排序 思路 冒泡排序是一种简单的排序算法&#xff0c;它重复地遍历要排序的序列&#xff0c;每次比较相邻…

Dato for Mac v5.2.11激活版:掌握时间,掌控生活

在忙碌的生活中&#xff0c;您是否常常觉得时间不够用&#xff1f;Dato for Mac&#xff0c;您的时间管理专家&#xff0c;助您轻松掌控每一天。清晰的日历视图、个性化的提醒功能&#xff0c;让您的日程安排井井有条。无论是工作还是生活&#xff0c;Dato for Mac都能成为您的…

AI图像生成-调整

一、两张图画风不相似 2、在两张图的共同输出口新添加一个空白正面提示词板块和条件合并板块 二、预处理插件&#xff08;提取人物姿态&#xff09; 1、新建节点-》ControlNet预处理器-》面部与姿态-》Openpose姿态预处理器 2、添加上传图片板块与预览图片板块 3、提取姿态 右…