ubuntu20安装electron并用electron-packager打包

2023-05-16

起因是想复现港科大的无人机集群GUI界面:https://github.com/HKUST-Aerial-Robotics/swarm_gcs

这是一个用javascript写的,基于electron和nodejs的可以用浏览器打开的gui界面,其中3d显示的部分用的是Three.js。electron有一个好处是可以跨平台,目前在ubuntu20上运行(其实也可以在windows和手机端)。

1、安装nodejs和npm

因为基于nodejs,所以想需要先安装nodejs和它的包管理器npm:

sudo apt install nodejs npm 
node -v # v10.19.0
npm -v # v6.14.4

下载项目源码后可以直接用npm启动:

npm start

2、安装electron

其实去读`package.json` 的 `scripts: start`可以发现本质是用 `electron .` 来启动的。所以还是得安装electron。这里应该是需要在项目本地安装而非全局:

sudo npm install electron --save-dev --verbose --unsafe-perm=true

其中 `--save-dev` 表示只将electron安装在该项目的node_modules目录下,同时`package.json`中的`devDependencies`会增加一项 "electron": "^10.4.7"。此时,全局终端里没有electron的链接。

相应的,如果用`--save` 就会`package.json`中的`Dependencies`增加一项 "electron": "^10.4.7"。

如果用 `-g` 则表示将安装至全局中,该模块依赖不会被写入devDependencies或dependencies中。此时终端输入electron可以弹出一个ui界面。

`--verbose --unsafe-perm=true` 是为了解决可能出现的网络报错,有可能还需要改淘宝源之类的。参考node.js - Unable to install electron from npm - Stack Overflow

3、用electron-packager打包

先全局安装electron-packager:

sudo npm install electron-packager -g --verbose --unsafe-perm=true

安装成功后运行electron-packager,会报错:

CANNOT RUN WITH NODE 10.19.0
Electron Packager requires Node >= 14.17.5.

说明之前安装的nodejs版本低了,但是用ubuntu20的apt只能安装到10.19.0的node。为了解决这个问题,我先apt remove卸载了之前安装的nodejs,然后在在Index of /dist/v20.0.0/下载了最新的v20.0.0版本nodejs(参考https://blog.csdn.net/huiskai/article/details/116109255)。解压后建立软链接:

sudo mv node-v20.0.0-linux-x64 /usr/local/node
sudo ln -s /usr/local/node/bin/node /usr/bin/node
sudo ln -s /usr/local/node/bin/npm /usr/bin/npm
node -v # 20.0.0
npm -v
# 删除软链接只需要rm /usr/bin/xxx就行

然后在swarm_gcs项目中对这个nodejs项目进行打包:

electron-packager . swarm_gcs --overwrite

成功后会生成一个swarm_gcs-linux-x64的文件夹(300MB),里面有一个可执行程序swarm_gcs可以直接运行(不能移动到其他地方),效果和运行npm start或者用浏览器是一样的。

打包成功后我把软链接删除了,新安装的node也删除了,用apt重新安装为了低版本的node和npm。

4、electron和Qt比较

顺便一提,Qt和electron都是可以跨平台的GUI开发框架。相比较Qt,electron的原生性没那么强(性能可能差一些,集成了webkit浏览器,导致程序打包很大。而且很难直接与c++层交互),但是更容易做出炫酷的效果(3d显示,数据交互),而且纯javascript不需要会c++。

 参考:客户端开发GUI框架对比与技术选型总结_gui开发选型_HW140701的博客-CSDN博客

electron更适合做前端显示和交互界面,和ROS或者机器人交互的客户端(后端)要和前端分离开,前端和后端可以用过rosbridge进行通信(基于json,支持javascript)。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ubuntu20安装electron并用electron-packager打包 的相关文章

  • 在 Electron process.stderr 中未定义

    我正在尝试在我的 Electron 应用程序中使用 sqlite3 nodejs 插件 我在加载 sqlite3 模块时遇到错误 查看崩溃的堆栈跟踪 我发现 sqlite3 有多个依赖项 其中之一是日志库 npmlog 该库尝试从以下位置初
  • 是否可以将远程文件从 Electron App 拖到文件系统上?

    我一直在尝试 Electron 应用程序的文件系统拖放功能 并且在使用本地文件进行所有操作时没有遇到任何问题 我在文档中没有遇到任何内容 所以我想看看是否有人知道这是否可能 我想使用 Electron 中的拖出功能将远程文件拖到应用程序之外
  • Electron 应用程序:无法加载预加载脚本

    每次我启动电子应用程序时都会遇到此错误 electron js2c renderer init js 91 Unable to load preload script C Users Desktop Projects Electron Ap
  • 在 Electron 中使用量角器

    我正在尝试为我运行的应用程序设置单元测试和 e2e 测试Electron http electron atom io using 量角器 https angular github io protractor 我参考了很多不同的帖子 this
  • Electron:如何安全地将全局变量注入BrowserWindow / BrowserView?

    我想使用 Electron 加载外部网页BrowserView 它的 API 几乎与BrowserWindow const currentWindow remote getCurrentWindow const view new remot
  • 正确使用电子

    我想进入 Electron 并且我已经开始学习它 但是我认为我不太明白应该如何使用它 根据我收集的信息 使用 Electron 我能够创建跨桌面应用程序 铬 with HTML CSS 和 JavaScript并在后台执行任务 NodeJS
  • 未捕获的 EvalError:拒绝将字符串评估为 JavaScript,因为“unsafe-eval”不是内容安全 Pol 中允许的脚本源

    Electron React TypeScript 应用程序的内容安全策略是什么 我什至没有使用 unsafe eval 但出现错误 以下是我尝试过并收到上述错误消息的一些内容安全策略 gt gt 您收到此错误是因为您正在尝试执行以下操作u
  • setInterval 使用 Electron 一小时后停止

    希望有人能在这里指出我正确的方向 我的电子应用程序需要每 10 分钟左右执行一次 API 调用 目前 我在渲染器进程中使用 setInterval 循环来执行此操作 该循环每 10 分钟触发一次 它通常工作得很好 几个小时后似乎就停止了 我
  • 如何使用电子反应样板正确设置材料用户界面

    我在使用 electro react boilerplate 运行的material ui v4 9 5 库时遇到问题 重现 跟着安装教程 https electron react boilerplate js org docs insta
  • 类型错误:不是构造函数

    我只是将代码用作有关 JavaScript 类的学习练习 该代码产生 TypeError SimpleLogger 不是构造函数 该类似乎已导出 但我无法在 main js 文件中实例化它 我已经减少了代码以仅显示问题 我想知道是否有人能发
  • 无法在电子js中加载反应

    这是我的 package js 文件 name cabed version 0 1 0 private false dependencies testing library jest dom 5 16 5 testing library r
  • 在 Atom-shell 中禁用退格键

    我一直在搜索 interwebz 和 Atom shell 文档 试图找出如何禁用back 的功能backspace浏览器窗口中的键 我不想求助于 javascriptonkeydown监听器 有效 而是使用更本机的东西 更多地在应用程序级
  • 如何在Electron中运行express?

    我已经能够通过以下存储库在电子应用程序中成功运行express https github com theallmightyjohnmanning electron express https github com theallmightyj
  • Electron & ReactJS,使用 BrowserWindow 进行 GitHub oAuth 身份验证

    我已经用 ReactJs 设置了 github 的 Electron 所以我得到了一个BrowserWindow一个 React 应用程序在该窗口中运行得很好 我想要实现的是通过 GitHub 进行身份验证 所以当用户按下Login wit
  • 带光谱测试的电子应用程序的简单示例

    我正在尝试学习如何测试应用程序 使用电子构建 使用 Spectron 为此 我从网上获取了一个示例应用程序 其中包含简单的标题 计数器标签和增量按钮 我使用摩卡作为测试运行 测试应启动应用程序 按下按钮并检查计数器标签 我什至无法达到应用程
  • Electron Web 蓝牙 API requestDevice() 错误

    我正在尝试开发一个与蓝牙低功耗设备通信的应用程序 我使用 Web Bluetooth API 建立了一个工作 网站 一切正常 所以我使用 Electron 框架来构建一个应用程序 这个问题是已知的 如果你开始navigator blueto
  • 是否可以在 Mac Pro 上构建 Electron 应用程序?由于奇怪的 GPU 问题,似乎不是这样

    我尝试拉取并尝试为 Electron 应用程序构建两个不同的引导程序存储库 https github com pastahito electron react webpack https github com pastahito elect
  • Electron 中的收据热敏打印机

    我需要找到一种在 javascript 中打印收据的方法Electron 我已经尝试过了QZ TRAY但由于 Electron 它不起作用 我也尝试过节点热敏打印机但它也从来没有对我有用 这里有人知道如何在 javascript Elect
  • 如何在React Material UI简单输入中启用文件上传?

    我正在创建一个简单的表单来使用带有 redux 表单和材料 ui 的 electro react boilerplate 来上传文件 问题是我不知道如何创建输入文件字段 因为材料用户界面不支持上传文件输入 关于如何实现这一目标有什么想法吗
  • Electron — 无法显示自定义图标

    我在以两种不同的方式设置 Electron 应用程序的图标时遇到问题 非打包 通过终端运行应用程序 我的 main js 确实指定了一个 图标 值 指向图标文件 但它不适用 包装 使用电子包装器 我的 package json 文件指定了

随机推荐

  • app后端设计(5)-- 表情的处理

    在app 的应用中 xff0c 文字中夹带表情是个很常见 xff0c 那么 xff0c 在后台处理表情的时间 xff0c 我遇到过下面两个问题 xff1a 1 表情在mysql 的存储 表情的utf8 编码 xff0c 有时是有4 个字节的
  • app后端设计(6)-- LBS

    在LBS的应用中 xff0c 一个基本的需求是查找附近的用户 xff0c 现在有两种做法 xff1a 1 使用mysql的空间数据库 xff0c 具体做法参考 xff1a http blog sina com cn s blog a48af
  • app后端设计--总目录

    做了3年app相关的系统架构 xff0c api设计 xff0c 先后在3个创业公司中工作 xff0c 经历过手机网页端 xff0c android客户端 xff0c iphone客户端 xff0c 现就职于app云后端平台bmob xff
  • app后端设计(7)-- 项目管理

    移动互联网行业是个快速发展的行业 xff0c 需求不断变化 xff0c 产品更新快 基于移动互联网的以上特点 xff0c 在开发产品的过程中 xff0c 我们放弃了传统的瀑布流开发模型 xff0c 引入了精益的理念和scrum 这个敏捷开发
  • app后端设计(8)-- 数据库分表

    当项目上线后 xff0c 随着用户的增长 xff0c 有些数据表的规模会以几何级增长 xff0c 当数据达到一定规模的时候 xff08 例如100万条 xff09 xff0c 查询 xff0c 读取性能就下降得很厉害 xff0c 这时 xf
  • app后端设计(9)-- 动态通知

    在app中 xff0c 例如在通知界面 xff0c 当新通知的时候 xff0c 需要显示有多少条通知 xff0c 用户点击 获取新通知 后 xff0c 就能看到新的通知 那么在app端 xff0c 怎么才能知道有多少条新通知 xff1f 实
  • app后端设计(10)--数据增量更新

    在新浪微博的app中 xff0c 从别的页面进入主页 xff0c 在没有网络的情况下 xff0c 首页中的已经收到的微博还是能显示的 xff0c 这显然是把相关的数据存储在app本地 使用数据的app本地存储 xff0c 能减少网络的流量
  • app后端设计(11)-- 系统架构(2014.12.05更新)

    个人认为 xff0c 在小型的创业团队中 xff0c 特别是以应用产品为主 xff0c 在架构后台的时候 xff0c 需要集中精力解决自身业务上的问题 xff0c 不是花时间解决第三方已经解决的问题 xff0c 简单点来说 xff0c 就是
  • 多机器人集群网络通信协议分析

    本文讨论的是多机器人网络通信各层的情况和协议 每个机器人连接一个数据传输通信模块 xff08 以下简称为数传 xff0c 也泛指市面上的图传或图数一体的通信模块 xff09 xff0c 数传之间进行组网来传递信息 根据ISO的划分 xff0
  • Nginx多虚拟主机下泛域名配置

    http www tuicool com articles F3Azuq 近上一个应用 xff0c 让用户可以自定义二级域名 xff0c 所以要配置一个泛域名来解析用户的自定义域名 首先来说说nginx下的泛域名配置 xff0c nginx
  • PHP集成支付宝快速实现充值功能

    http blog lixiphp com php alipay fast chongzhi axzz2wy4huhBm 本文将介绍如何快速通过PHP类库来集成 整合支付宝来实现充值功能 如果你的系统想要扩充积分 账户余额等功能 xff0c
  • 分布式定时任务框架——python定时任务框架APScheduler扩展

    http bbs 7boo org forum php mod 61 viewthread amp tid 61 14546 如果将定时任务部署在一台服务器上 xff0c 那么这个定时任务就是整个系统的单点 xff0c 这台服务器出现故障的
  • yii批量插入的方法

    code style margin 0px padding 0px border 0px font family none span class kwd style margin 0px padding 0px border 0px spa
  • MongoDB之DBref(关联插入,查询,删除) 实例深入

    http blog csdn net crazyjixiang article details 6668288 suppose I have the following datastructure var user 61 id 39 foo
  • MongoDB基本使用

    http www cnblogs com TankMa archive 2011 06 08 2074947 html 成功启动MongoDB后 xff0c 再打开一个命令行窗口输入mongo xff0c 就可以进行数据库的一些操作 输入h
  • 一个靠谱的phpredisadmin文件

    http download csdn net detail newjueqi 7227487
  • CORS(跨域资源共享) 的配置

    http blog csdn net ohyoyo2014 article details 24863197 兼容情况 xff1a 各种新版本的ie10 firefox opera safari chrome以及移动版safari和andr
  • Go调用C代码,Cgo札记

    http www myexception cn program 679738 html Go调用C代码 xff0c Cgo笔记 参考 xff1a 官方文档 xff1a http golang org cmd cgo http blog go
  • node.js面向对象实现(二)继承

    http blog sina com cn s blog b5a53f2e0101nrdi html 继承是面向对象中非常重要的一个概念 xff0c 那么在Node js中如何实现继承呢 xff1f node js在util中提供了inhe
  • ubuntu20安装electron并用electron-packager打包

    起因是想复现港科大的无人机集群GUI界面 xff1a https github com HKUST Aerial Robotics swarm gcs 这是一个用javascript写的 xff0c 基于electron和nodejs的可以