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.hqwc.cn/news/698636.html

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

相关文章

古月居讲师/签约作者招募计划

机器人,作为一个集成了多学科技术的复杂系统,其开发过程充满了挑战。为了帮助开发者们更好地克服这些挑战,提升项目的开发效率和质量,古月居特别招募[博客签约作者/课程讲师]。如果您平常热爱记录、分享开发者经验的习惯&#xff…

vue3 中 使用 antd中的select 组件的带搜索框 展开后可对选项进行筛选搜索功能

鼠标进入以后下拉显示&#xff1a; 输入字符串以后&#xff1a; 可以看出对数据进行了筛选。 具体代码&#xff1a; 结构上&#xff1a;<a-selectv-model:value"formState.formFlow"show-searchallowClearplaceholder"输入选择流程":options"op…

批量文件夹随机重命名:一键操作,提升管理效率的技巧

在数字化时代&#xff0c;文件夹的管理是日常工作中不可或缺的一部分。对于拥有大量文件夹的用户来说&#xff0c;批量文件夹重命名是提高工作效率的关键步骤。而随机重命名不仅能增加文件组织的多样性&#xff0c;还能在一定程度上保护隐私。本文将介绍云炫文件管理器如何通过…

答辩PPT内容生成困难?文心一言逐步引导内容生成

这些网站我愿称之为制作答辩PPT的神&#xff01; 很多快要毕业的同学在做答辩PPT的时候总是感觉毫无思路&#xff0c;一窍不通。但这并不是你们的错&#xff0c;对于平时没接触过相关方面&#xff0c;第一次搞答辩PPT的人来说&#xff0c;这是很正常的一件事。一个好的答辩PPT…

GPT-4o 屠龙式震撼!多模态、实时交互、全员免费可用,丝滑语音交互的 ChatGPT 这把赢麻了

从 5 月初爆出将在 9 日发布搜索引擎&#xff1b;到 5 月 11 日&#xff0c;官宣将在当地时间 5 月 13 日 10 时发布 ChatGPT 与 GPT-4 更新&#xff1b;再到 Sam Altman 亲自下场辟谣「不是 GPT-5&#xff0c;也不是搜索引擎」&#xff0c;而是「像魔法一样的新东西」&#xf…

transformer通俗理解

transformer中最麻烦的encoder模块其实张量和矩阵的变化维度比较复杂。我感觉这篇文章讲的特别详细Q、K、V 与 Multi-Head Attention 多头注意力机制 - 知乎 我总结一下文章几个很重要的点吧&#xff01;算是我学的一点收获 1.什么是QKV&#xff1f; 2.怎么理解多头&#xff…

解密跨境电商ERP开发的5大常见问题及解决方案

跨境电商平台开发是一个充满挑战的领域&#xff0c;企业在此过程中常常面临着各种技术、管理和资源等方面的问题。下面是解析这些问题并提供解决方案的五大主要问题&#xff1a; 1. 集成难题&#xff1a; 在跨境电商平台开发中&#xff0c;一个最为常见的问题是集成不同系统和…

移动应用开发实验四AlarmManager实现闹钟提醒

实验目的和要求 在Android Studio中&#xff0c;通过AlarmManager实现闹钟提醒。 点击“SET ALARM”后&#xff0c;采用Toast方式提示用于设定的闹钟成功&#xff0c;并包含设定的闹钟启用时间。 当闹钟生效时&#xff0c;采用AlertDialog实现闹钟题型&#xff0c;并通过Ale…

React脚手架,配置环境变量(生产模式,开发模式)

项目搭建方式&#xff1a;react脚手架(create-react-app) 1. 下载依赖&#xff1a; npm install dotenv npm install dotenv-expandnpm install dotenv-cli -S 2.配置环境变量&#xff1a; 项目根部录下创建文件.env .env.pro .env.dev 配置package.json - scripts…

ANSYS Workbench中如何从面选择创建节点集合named selection?

点击选中一个面&#xff0c;右键named selection&#xff1a;

轮式机器人简介

迄今为止,轮子一般是移动机器人学和人造交通车辆中最流行的运动机构。它可达到很高的效率, 如图所示, 而且用比较简单的机械就可实现它的制作。 另外,在轮式机器人设计中,平衡通常不是一个研究问题。 因为在所有时间里,轮式机器人一般都被设计成在任何时间里所有轮子均与地接…

MemoryModule - exp - test

文章目录 MemoryModule - exp - test概述笔记测试环境GetModuleFileName不能正常执行GetModuleFileNameWntdll_LdrGetDllFullName猜测原因用LoadLibrary载入的DLL中功能是正常的 gLog可以正常使用内存载入DLL无法支持的功能的折中方法COM操作正常调用方代码接口代码 接口入参测…