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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

防静电托盘的用途和性能

防静电托盘主要的用途就是将静电消除,比较广泛的使用在电子的器件以及其在生产的过程中,需要进行转载的周转、运输、贮存和包装等,在行业中我们还可以称之为导静电的托盘,正常情况下防静电托盘的高度为100mm以下,比较适…

一招教你学浪app视频如何下载到本地

在这个知识爆炸的时代,学习从未如此便捷,而今天,我要分享的这个小秘密,将彻底改变你获取知识的方式:一招教你如何将学浪课程轻松下载到本地,让精彩的学习内容随时随地触手可及,开启你的随身学习…

用Div标签替换ul和li标签

使用 <div> 标签可以替换 <ul> 和 <li> 标签的功能&#xff0c;从而创建类似于列表的结构。下面是一个简单的示例&#xff0c;演示如何使用 <div> 标签替换 <ul> 和 <li> 标签&#xff1a;下面是我整理的接种解决方案&#xff0c;可以一起…

vue(九) 生命周期 v3.0和v2.0对比,父子组件生命周期的执行顺序

文章目录 生命周期vue2.0生命周期1.图示2.生命周期解释说明3.代码示例 vue3.0生命周期1.图示2.生命周期解释说明3.代码示例 父子组件中生命周期执行顺序v.3和v2.0生命周期对比 生命周期 每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤&#xff0c;比如设置好数据侦听…

2024年【电工(高级)】考试总结及电工(高级)复审考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年电工&#xff08;高级&#xff09;考试总结为正在备考电工&#xff08;高级&#xff09;操作证的学员准备的理论考试专题&#xff0c;每个月更新的电工&#xff08;高级&#xff09;复审考试祝您顺利通过电工&a…

Git系列:git show 使用技巧

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

OpenAI将最强人工智能拉入现实:GPT-4o情感交互颠覆认知——钢铁侠的“贾维斯”出生了,还是个女娃!

在科技飞速发展的今天&#xff0c;人工智能&#xff08;AI&#xff09;已不再是遥不可及的科幻概念&#xff0c;而是逐渐渗透进我们的日常生活。近期&#xff0c;OpenAI公司宣布推出其最新的人工智能模型GPT-4o&#xff0c;这一模型以其卓越的情感交互能力和高度的智能化水平&a…

SpringBoot+MybatisPlus实现读写分离,自动切换数据源

读写分离有必要吗&#xff1f; 实现读写分离势必要与你所做的项目相关&#xff0c;如果项目读多写少&#xff0c;那就可以设置读写分离&#xff0c;让“读”可以更快&#xff0c;因为你可以把你的“读”数据库的innodb设置为MyISAM引擎&#xff0c;让MySQL处理速度更快。 实现…

Kafka学习-Java使用Kafka

文章目录 前言一、Kafka1、什么是消息队列offset 2、高性能topicpartition 3、高扩展broker 4、高可用replicas、leader、follower 5、持久化和过期策略6、消费者组7、Zookeeper8、架构图 二、安装Zookeeper三、安装Kafka四、Java中使用Kafka1、引入依赖2、生产者3、消费者4、运…

Unity使用sherpa-onnx实现离线语音合成

sherpa-onnx https://github.com/k2-fsa/sherpa-onnx 相关dll和lib库拷进Unity&#xff0c;官方示例代码稍作修改 using SherpaOnnx; using System; using System.IO; using System.Runtime.InteropServices; using UnityEngine;public class TTS : MonoBehaviour {public st…

Google I/O 2024 干货全解读:Gemini AI 横空出世,智能未来触手可及!

Google I/O 2024 干货全解读&#xff1a;Gemini AI 横空出世&#xff0c;智能未来触手可及&#xff01; 博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》…

git 拉取指定目录

指令方式 打开 git 自带的Git Bash 工具 以拉取github中 fastjson 的 /src/test/java/oracle/sql/ 目录为例 1.创建文件夹和git 初始化 cd D:/Program\ Files mkdir fastjson cd fastjson git init 2.设置允许克隆子目录 git config core.sparsecheckout true 3.添加远程…

前端开发攻略---用代码带你走近双色球再到远离双色球

1、演示 2、玩法及规则 双色球是一种流行的彩票游戏&#xff0c;它在很多国家都有自己的版本。以下是双色球的详细玩法&#xff1a; 选择号码&#xff1a;玩家需要从1至33的红色球中选择6个号码&#xff0c;并且从1至16的蓝色球中选择1个号码&#xff0c;构成一组7个号码。 购…

使用make_blobs生成数据并使用KNN机器学习算法进行分类和预测以及可视化

生成数据 使用make_blobs生成数据并使用matplotlib进行可视化 完整代码&#xff1a; from sklearn.datasets import make_blobs # KNN 分类器 from sklearn.neighbors import KNeighborsClassifier # 画图工具 import matplotlib.pyplot as plt # 数据集拆分工具 from sklea…

Linux 第三十一章

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…

力扣127.单词接龙讲解

距离上一次刷题已经过去了.........嗯............我数一一下............整整十天&#xff0c;今天再来解一道算法题 由于这段时间准备简历&#xff0c;没咋写博客。。今天回来了&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&…

【二叉树】(二)二叉树的基础修改构造及属性求解1

&#xff08;二&#xff09;二叉树的基础修改构造及属性求解1 翻转二叉树递归实现迭代实现&#xff08;深度遍历&#xff09;层序实现&#xff08;广度遍历&#xff09; 对称二叉树递归实现迭代实现&#xff08;非层序遍历&#xff09; 二叉树的最大深度递归法迭代法&#xff0…

你了解黑龙江等保测评么?

等保测评的全称是信息安全等级保护测评&#xff0c;是信息安全等级保护工作中的一项重要内容。 具体来说&#xff0c;等保测评是指按照国家相关标准和技术规范&#xff0c;对信息系统安全等级保护状况进行检测评估的活动。 其主要目的是发现信息系统存在的安全隐患和不足&…

学会给文件夹加密,保密措施不可或缺!

我们的个人信息、工作文件和其他重要数据都存储在各种设备和文件夹中&#xff0c;如何保证这些数据的安全&#xff0c;防止未经授权的访问和泄露&#xff0c;成为了一个不容忽视的问题。本文将探讨给文件夹加密的必要性&#xff0c;以及如何在手机和电脑上进行文件夹加密。 操作…

使用KNN预测一个新的点,以及将这个点用五角星进行matplotlib可视化展示

概述 基于之前的KNN案例继续做一些操作。 之前的完整代码如下&#xff1a; from sklearn.datasets import make_blobs # KNN 分类器 from sklearn.neighbors import KNeighborsClassifier # 画图工具 import matplotlib.pyplot as plt # 数据集拆分工具 from sklearn.model_…