wondows10用Electron打包threejs的项目记录

背景

电脑是用的mac,安装了parallels desktop ,想用electron 想同时打包出  苹果版本和windows版本。因为是在虚拟机里安装,它常被我重装,所以记录一下打包的整个过程。另外就是node生态太活跃,几个依赖没记录具体版本,很容易各种报错。

需要环境

window10

node: 18.18.2

yarn: 1.22.21

nrm: 1.2.6

electron: 23.3.13

准备配置环境

1、安装nvm(方便切换node版本)

到 Releases · coreybutler/nvm-windows · GitHub

下载 nvm-setup 并安装 

2、选择node版本(当前作者使用的是18.18.2,虽然当前最新版本已经上20了)

在cmd中安装node版本

> nvm install 18.18.2

3、切换镜像(没有设置镜像前,有时会举步维艰)

> npm config set registry https://registry.npmmirror.com/

4、安装nrm(以前只知道淘宝源,现在发现有nrm可以管理源,在有些源更新不及时,切换一下或许就成功了)

> npm install -g nrm

5、查看选择源

nrm ls

选择 tencent  (因为作者在当时使用taobao云时,有个依赖一直超时,选择tencent后,可以了)

nrm use tencent

6、安装yarn (为什么安装yarn,有些依赖关系你没搞懂前,你用npm试试,绝对会让你怀疑人生)

> npm install -g yarn

7、初始化项目(注意填写 author 和 description ,在后面的打包中是必须项)

> yarn init

8、开始安装electron 23

> yarn add electron@23.3.13

或者你不知道23版本哪个最新

> yarn add electron@23

 

运行时查看

1、安装官方的例子,假设我们的入口文件是  index.html

我们新建一个  main.js  拷贝官方的代码

const { app, BrowserWindow } = require('electron/main')const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600})win.loadFile('index.html')
}app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow()}})
})app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}
})

2、修改 package.json  (加入一个  start  脚本)

{"name": "my-electron-app","version": "1.0.0","author": "hott1985","description": "Hello World!","main": "main.js","scripts": {"start": "electron .","test": "echo \"Error: no test specified\" && exit 1"},"license": "MIT","devDependencies": {"electron": "23.1.3"}
}

3、运行查看

> yarn run start

打包exe 

因为我们的环境是window10所以打包出来可能是exe的

1、安装打包依赖    (官方方法是  yarn add --dev @electron-forge/cli   上面有  --dev  但是因为我们用的不是最新的,所以不要加  --dev  由 yarn 自动去分析依赖关系)

> yarn add @electron-forge/cli

 

2、 使用现成的转化脚本将项目导入至 Electron Forge

> npx electron-forge import

3、这个时候的package.json大概是长这样的

{"name": "my-electron-app","version": "1.0.0","main": "main.js","author": "hott1985","description": "Hello World!","scripts": {"start": "electron-forge start","test": "echo \"Error: no test specified\" && exit 1","package": "electron-forge package","make": "electron-forge make"},"license": "MIT","dependencies": {"@electron-forge/cli": "^7.3.0","@electron-forge/plugin-fuses": "^7.3.0","@electron/fuses": "^1.7.0","electron-squirrel-startup": "^1.0.0"},"devDependencies": {"@electron-forge/maker-deb": "^7.3.0","@electron-forge/maker-rpm": "^7.3.0","@electron-forge/maker-squirrel": "^7.3.0","@electron-forge/maker-zip": "^7.3.0","@electron-forge/plugin-auto-unpack-natives": "^7.3.0","electron": "23.3.13"}
}

4、补全2个官方没提到的依赖 (官方文档中,可以直接打包了,实际还爆2个依赖没装上)

> yarn add @electron-forge/plugin-fuses 

 

继续试试

 

> yarn add @electron/fuses 

 可以进入运行时了

5、打包make

 如果你前面没有在package.json中加入作者author和描述description 就会有错误

加上去重新执行就能在打包成了

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

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

相关文章

lora网关智慧工厂三色灯安灯状态采集钡铼技术S281

LoRa网关结合钡铼技术S281模块在智慧工厂三色灯安灯状态采集方面具有广泛的应用前景。智慧工厂的安全生产管理对于企业生产经营至关重要,而三色灯安灯是工厂安全生产管理的重要指示灯,通过LoRa无线通信技术和钡铼技术S281模块,可以实现对三色…

android 使用X264编码视频

android 使用X264编码视频 源码刚上传可能审核 源码下载地址 X264对应部分API介绍 初始化x264_param_t _x264_param new x264_param_t;/*** preset是编码速度* 可选项"ultrafast", "superfast", "veryfast", "faster", "fa…

使用 package.json 配置代理解决 React 项目中的跨域请求问题

使用 package.json 配置代理解决 React 项目中的跨域请求问题 当我们在开发前端应用时,经常会遇到跨域请求的问题。为了解决这个问题,我们可以通过配置代理来实现在开发环境中向后端服务器发送请求。 在 React 项目中,我们可以使用 package…

MES系统中的手动排产和自动排产-助力生产效率

企业在排产管理中面临的问题: 大多数的企业在调度排产过程中,都会遇到以下问题。首先是插单非常的多,计划调整困难,会经常性的发生原材料、零部件的备货不足。计划按MRP或库存展示计算出需求后将产生大量工单,这些工单…

《剑指Offer》笔记题解思路技巧优化_Part_6

《剑指Offer》笔记&题解&思路&技巧&优化_Part_6 😍😍😍 相知🙌🙌🙌 相识😢😢😢 开始刷题🟡1.LCR 168. 丑数—— 丑数🟢2. LCR 16…

Kubernetes服务网络Ingress网络模型分析、安装和高级用法

文章目录 1、Ingres简介2、Ingres网络模型分析3、安装Ingress4、使用4.1、搭建测试环境4.2、域名访问4.3、路径重写(高级用法)4.4、流量限制(高级用法) 5、总结 1、Ingres简介 Ingress翻译过来是“入口”的意思,也就是…

切换分支时候IDEA提示:workspace associated with branch feature has been restored

切换分支时候IDEA提示:workspace associated with branch feature has been restored 这个消息是指与"feature"分支关联的工作区已经恢复。在Git中,工作区是指你当前正在进行修改和编辑的文件和目录。当你切换分支时,Git会自动将工…

配置docker 支持GPU方法(Nvidia GPU)

参考官方文档: https://docs.nvidia.com/datacenter/cloud-native/container-toolkit/latest/install-guide.html 系统版本:ubuntu 23.04 执行脚本如下: 1.Configure the production repository: curl -fsSL https://nvidia.github.io/lib…

怎么把试卷图片转换成word?这4种方法一看就会

怎么把试卷图片转换成word?在数字化日益盛行的今天,我们常常会面临将纸质试卷或图片中的试卷内容转化为Word文档的需求。无论是为了对试卷内容进行编辑、修改,还是为了在线共享、远程教学,将图片转换为Word文档都成为了至关重要的…

集成TinyMCE富文本编辑器

若依的基础上集成TinyMCE富文本编辑器 前端bootstrap TinyMCE官网链接 TinyMCE所需静态资源下载链接 开源项目-若依链接 将TinyMCE静态资源包放入项目中&#xff1b; 代码引入css&#xff1a; <!-- 引入TinyMCE CSS --><link th:href"{/ajax/libs/tinymce/j…

金田金業: 美联储泡沫正在破裂! 崩溃对黄金非常有利

The Great Recession Blog作者大卫哈吉斯表示&#xff0c;美联储一直以来都将继续收紧货币政策&#xff0c;直到出现问题&#xff0c;但市场现在已经陷入泡沫。 他指出&#xff0c;泡沫正在破裂&#xff0c;崩溃最终将对黄金非常有利。 正当投资者聚焦美联储何时会降息&#xf…

Springboot 使用升级小记-循环依赖

springboot 使用已经非常广泛了&#xff0c;它的版本迭代速度也比较快&#xff0c;过一段时间版本差异就会比较大。 由于低版本依赖的 spring 版本有漏洞问题&#xff0c;这次我们是从 2.2.6 版本直接升级到 2.7.16&#xff0c;升级 3.0 的话担心差异更大。 这时直接修改依赖…

Jmeter 学习目录(0)

Jmeter 所有内容均以学习为主输出内容&#xff0c;按照最小单位和基础进行输出。 如果有看不懂&#xff0c;或者有不明确的内容&#xff0c;欢迎大家留言说明。 Mac Jmeter下载安装启动(1) Jmeter 目录介绍(2) Jmeter基础发起一次请求(3)

代码随想录三刷day07

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、力扣206. 反转链表二、力扣24. 两两交换链表中的节点 前言 递归写法和双指针法实质上都是从前往后翻转指针指向&#xff0c;其实还有另外一种与双指针法不同…

SD-WAN:快速改造升级企业原有网络架构

随着企业信息化的推进&#xff0c;传统网络架构已难以满足企业日益复杂和多样化的组网互联需求。企业在不断提高对网络的要求&#xff0c;包括各办公点的互联数据传输、资源共享、视频会议、ERP、OA、邮箱系统、云服务等应用需求&#xff0c;以及对网络运维工作的简化和降低难度…

Spring Event 快速入门

请直接看原文 : Spring Event&#xff0c;贼好用的业务解耦神器&#xff01; (qq.com) -------------------------------------------------------------------------------------------------------------------------------- 前言 Spring Event 同步使用 Spring Event 异…

架构篇35:微服务架构最佳实践 - 方法篇

文章目录 服务粒度拆分方法基础设施小结上一篇我们谈了实施微服务需要避免踩的陷阱,简单提炼为: 微服务拆分过细,过分强调“small”。微服务基础设施不健全,忽略了“automated”。微服务并不轻量级,规模大了后,“lightweight”不再适应。针对这些问题,我们看看微服务最佳…

ADAS智能驾驶测试知多少?

当涉及ADAS&#xff08;Advanced Driver Assistance Systems&#xff09;智能驾驶的测试时&#xff0c;有一个完整的测试体系可以用来评估系统的性能和功能。 1. 传感器测试 1.1 传感器校准测试 描述&#xff1a;确保传感器&#xff08;如雷达、摄像头、激光雷达等&#xff09;…

【stm32】hal库学习笔记-UART/USART串口通信(超详细!)

【stm32】hal库学习笔记-UART/USART串口通信 hal库驱动函数 CubeMX图形化配置 导入LCD.ioc RTC设置 时钟树配置 设置LSE为RTC时钟源 USART设置 中断设置 程序编写 编写主函数 /* USER CODE BEGIN 2 */lcd_init();lcd_show_str(10, 10, 16, "Demo12_1:USART1-CH340&q…

【PythonGIS】Python线矢量等距离取点/线等分取点点创建矢量面

不多说&#xff0c;这是之前项目需求的代码&#xff0c;已经是去年的了一直没来的及发&#xff0c;今天抽出来一丢丢的空挡发一下。主要就是利用线矢量等距离生成点矢量&#xff0c;或者直接将线矢量等分生成点矢量&#xff0c;这个需求其实极限一下就是线转点了&#xff08;将…