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

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

相关文章

RENISHAW雷尼绍双读数头系统应用分享

在精密回转运动控制中,大多数场合都会对系统的回转定位精度有严格的要求,RENISHAW雷尼绍圆光栅系统(RESM增量和RESA绝对值)对于回转角度的反馈测量方案能有效的解决运动控制对回转精度的需求。但是配置单个读数头的圆光栅系统的精…

基于springboot+vue的桂林旅游景点导游平台(前后端分离)

博主主页:猫头鹰源码 博主简介:Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战,欢迎高校老师\讲师\同行交流合作 ​主要内容:毕业设计(Javaweb项目|小程序|Pyt…

【Linux】 logout命令使用

logout命令 Linux logout命令用于前登录的用户退出系统。 它会终止当前用户的会话并返回到登录界面或者重新登录。当使用logout命令时,系统会关闭所有与当前用户相关的进程和程序,并释放占用的资源。 使用logout命令可以方便地切换用户或者注销当前用…

Vue知识学习

Vue 是什么? 概念:Vue 是一个用于构建用户界面的渐进式框架 Vue 的两种使用方式: ① Vue 核心包开发 场景:局部 模块改造 ② Vue 核心包& Vue插件工程化开发 场景:整站开发 创建Vue 实例,初始化渲染的核心步骤: 1.准备容器 2.引包(官…

web基础及http协议 (二)----------Apache相关配置与优化

一、httpd 安装组成 http 服务基于 C/S 结构 1 .常见http 服务器程序 httpd apache,存在C10K(10K connections)问题 nginx 解决C10K问题lighttpd IIS .asp 应用程序服务器 tomcat .jsp 应用程序服务器 jetty 开源的servlet容器&#xf…

2个wordpress优化SEO主题模板

SEO优化wordpress主题 简洁的SEO优化wordpress主题,效果好不好,结果会告诉你,适合SEO公司使用的主题。 https://www.jianzhanpress.com/?p2804 SEO优化海外WordPress主题 简洁的SEO优化海外服务商WordPress主题,为中国制造202…

十八、图像像素类型转换和归一化操作

项目功能实现&#xff1a;对一张图像进行类型转换和归一化操作 按照之前的博文结构来&#xff0c;这里就不在赘述了 一、头文件 norm.h #pragma once#include<opencv2/opencv.hpp>using namespace cv;class NORM { public:void norm(Mat& image); };#pragma once二…

【EI会议征稿通知】2024年软件自动化与程序分析国际学术会议(SAPA 2024)

2024年软件自动化与程序分析国际学术会议&#xff08;SAPA 2024) 2024 International Conference on Software Automation and Program Analysis 在当今科技社会中&#xff0c;软件产业呈快速发展趋势&#xff0c;软件自动化与程序分析技术在提高软件质量、降低开发成本、提升…

如何使用Express框架构建一个简单的Web应用

在这个数字化时代&#xff0c;Web应用的需求越来越多样化和复杂化。在前端开发领域&#xff0c;Express框架作为一个快速、灵活的Node.js Web应用程序框架&#xff0c;拥有强大的功能和丰富的生态系统&#xff0c;深受开发者们的青睐。本篇博客将带您一步步探索如何使用Express…

Spring之AOP源码解析(上)

Aop相关注解 EnableTransactionManagementEnableAspectJAutoProxyEnableAsync... 从注解切入来看看这些注解都干了什么 Import注解作用简述 注入的类一般继承ImportSelector或者ImportBeanDefinitionRegistrar接口 继承ImportSelector接口&#xff1a;selectImports方法返回…

通信入门系列——锁相环、平方环、Costas环

微信公众号上线&#xff0c;搜索公众号小灰灰的FPGA,关注可获取相关源码&#xff0c;定期更新有关FPGA的项目以及开源项目源码&#xff0c;包括但不限于各类检测芯片驱动、低速接口驱动、高速接口驱动、数据信号处理、图像处理以及AXI总线等 本节目录 一、锁相环 1、压控振荡…

设计模式-创建型模式-原型模式

原型模式&#xff08;Prototype Pattern&#xff09;&#xff1a;使用原型实例指定创建对象的种类&#xff0c;并且通过克隆这些原型创建新的对象。原型模式是一种对象创建型模式。原型模式其实就是从一个对象再创建另外一个可定制的对象&#xff0c;而且不需知道任何创建的细节…

初识表及什么是数据表

一、了解表 1.1.概述 表是处理数据和建立关系型数据库及应用程序的基本单元&#xff0c;是构成数据库的基本元素之一&#xff0c;是数据库中数据组织并储存的单元&#xff0c;所有的数据都能以表格的形式组织&#xff0c;目的是可读性强。 1.2.表结构简述 一个表中包括行和列…

C# OpenCvSharp 利用白平衡技术进行图像修复

目录 效果 灰度世界(GrayworldWB)-白平衡算法 完美反射(SimpleWB)-白平衡算法 基于学习的(LearningBasedWB)-白平衡算法 代码 下载 C# OpenCvSharp 利用白平衡技术进行图像修复 OpenCV xphoto模块中提供了三种不同的白平衡算法&#xff0c;分别是&#xff1a;灰度世界(G…

qml 保存当前界面并在其图片中添加文字

使用场景&#xff1a;在保存二维码的时候&#xff0c; 在二维码图片加标题或描述 保存后的图片 demo&#xff1a;https://download.csdn.net/download/uVarAndMethod/88868455

【AIGC】Gemma和ChatGLM3-6B使用体验

近期&#xff0c;谷歌发布了全新的开源模型Gemma&#xff0c;同时智谱AI和清华大学KEG实验室合作推出了ChatGLM3-6B。这两个模型都是先进的对话预训练模型&#xff0c;本文将对它们进行对比&#xff0c;并分享使用体验。 先上效果 ChatGLM3-6B: ChatGLM3 Gemma(20亿参数)&…

安全中国云 | 亚信安全与云宏完成产品互认 共筑云安全未来

近日&#xff0c;亚信安全与云宏信息科技股份有限公司&#xff08;以下简称云宏&#xff09;进一步强化云上合作&#xff0c;完成多款产品兼容性互认。亚信安全云主机安全产品&#xff08;DeepSecurity&#xff09;与云宏CNware WinSphere服务器虚拟化软件、CNware WinStack虚拟…

【嵌入式学习】QT-Day2-Qt基础

1> 思维导图 https://lingjun.life/wiki/EmbeddedNote/20QT 2>登录界面优化 使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff…

解决IDEA git 提交慢的问题

文章目录 前言解决IDEA git 提交慢的问题 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;实在白嫖的话&#xff0c;那欢迎常来啊!!! 解…

LeetCode 热题 100 | 二叉树(终)

目录 1 二叉树小结 1.1 模式一 1.2 模式二 2 236. 二叉树的最近公共祖先 3 124. 二叉树中的最大路径和 菜鸟做题&#xff08;返校版&#xff09;&#xff0c;语言是 C 1 二叉树小结 菜鸟碎碎念 通过对二叉树的练习&#xff0c;我对 “递归” 有了一些肤浅的理解。…