【附源码】Electron Windows桌面壁纸开发中的 CommonJS 和 ES Module 引入问题以及 Webpack 如何处理这种兼容
背景
在尝试让 ChatGPT 自动开发一个桌面壁纸更改的功能时,发现引入了一个 wallpaper 库,这个库的入口文件是 index.js,但是 package.json 文件下的 type:"module",这样造成了无论你使用 import from 还是 require,都会报 ES Module 引入错误,针对于这个问题,让 GPT 给了很多方案,但是都没有解决实质问题,最终,经过多次测试,发现必须借助打包工具 webpack 才能搞定这个事情。
案例代码
node version:16
这个是用的wallpaper库,这个库有bug,双屏幕失效
simple-electron-demo: 从一个简单的electron初始库开始从零解说electron的运行过程 - Gitee.com
另外在B站上看到一个视频也是搞壁纸的,对方的代码无法运行 node:18 作者也没修复,里面看用的koffi 调用一个dll,这个dll估计是作者自己打的动态连接库,但是这个没有地方可以控制伸缩,代码也放在这里
simple-electron-demo: 从一个简单的electron初始库开始从零解说electron的运行过程 - Gitee.com
B站视频连接(作者堆了一堆buffer,然后把代码搞到build报错,实际上一个前端开发真没必要用typescript和vue3这些东西,尤其是vite,给开发带不来任何效率提升,却外加了很多不必要学习的知识,就是前端内卷的一种方式吧)
Vue3+electron实现桌面壁纸更换2.0版本(已完成macOS静态壁纸更换,后续功能开发中)_哔哩哔哩_bilibili
注意:如你遇到vue-tsc.js 68行错误的报错,按照作者的提示,直接注释这行,然后就可以build:win

webstorm的使用用户会遇到没有提示的问题,建议将tsconfig.web.json中的别名,拷贝到tsconfig.json 中,webstorm识别不强,这样@renderer路径就能被识别了,另外关掉eslint提示,这个会造成一堆报错,还没啥意义


Electron 官网对 ES Module 的建议
Electron中的 ES 模块 (ESM) | Electron
没有看太懂,大概就是必须开启 type:"module",然后引入的 js 必须是.mjs后缀,否则就会报错,另外大家就是讲了在哪些情况,你开了 module 就会导致渲染进程无法访问 node_modules 中的文件,也无法访问 node api 接口
一个 ES Module 库:wallpaper
它的入口文件是 index.js 而 package.json 中 type 设为 module,这就使得引入这个库的 wallpaper 也得支持 type:"module",否则无法使用这个库,一般像 vue,都会给两个字段,一个是 main,一个是 module,以任意一种项目选择性引入


那么 ES Module 怎样才能正常使用?
-
webpack 打包后的代码一般我们从来都不会遇到这种 ES Module 的问题,原因是 webpack 打包会把所有的代码都进行预编译整合,也即将代码从 node_module 拷贝出来,然后再经过 babel 等的转化,塞入打包后的代码里,最后统一用 require 的方式进行引入
-
而基于 electron 的开发,所有的 js 都可以取自本地,因为基于 commonJS 协议的方式更符合开发本地开发方式,因此 Webpack 可以把一些代码不打包进去,直接保留 require("vue") 引入方式,这样不但降低了最终打包文件的体积大小,还能动态的引入所需的代码,整体性能就很高
-
所以白名单这里就是不让 webpack 打包,默认整个生产依赖都要打包进去
-
但是 wallpaper 默认是 ES Module 就必须转化成 CommonJS 形式,于是就把代码进行预编译,然后塞到 main.js 中去,这样 wallpaper 整个源码就被构建进去了,也就不存在原来 type:"module"引入的概念


总结
-
webpack打包 electron 都是基于 CommonJS 方式,使用的是 require 来引入
-
如果遇到 ES Module 模块,则将其加入到 whiteListModules 列表中,直接打包到 webpack 里面即可
-
其他没有什么好办法,能让 electron 既支持 CommonJS 又支持 ES Module,两者天然冲突
-
也没有必要去理解这方面的问题,因为大部分情况,都被 webpack 搞定了
-
除非你自己想从零构建一个纯粹的 ES Module 项目,但是只要你给别人用,或者引用别人的代码,那么要改后缀名为.cjs,目前我觉得你是得头大的
-
无论是源码用了多少 import from 的写法,webpack 最终都是给你整合成 require,fetch 的方式来搞事情
相关文章:
【附源码】Electron Windows桌面壁纸开发中的 CommonJS 和 ES Module 引入问题以及 Webpack 如何处理这种兼容
背景 在尝试让 ChatGPT 自动开发一个桌面壁纸更改的功能时,发现引入了一个 wallpaper 库,这个库的入口文件是 index.js,但是 package.json 文件下的 type:"module",这样造成了无论你使用 import from 还是 require&…...
Elasticsearch介绍及安装部署
Elasticsearch介绍 Elasticsearch 是一个分布式搜索引擎,底层基于 Lucene 实现。Elasticsearch 屏蔽了 Lucene 的底层细节,提供了分布式特性,同时对外提供了 Restful API。Elasticsearch 以其易用性迅速赢得了许多用户,被用在网站…...
物理层知识要点
文章目录 物理层接口的四大特性通信基础编码和调制(1)数字数据编码为数字信号(2)模拟数据编码为数字信号(3)常见调制方式(3)信道的极限容量 多路复用技术数据传输方式物理层下的传输…...
SpringBoot 自动装配原理及源码解析
目录 一、引言 二、什么是 Spring Boot 的自动装配 三、自动装配的核心注解解析 3.1 SpringBootApplication 注解 (1)SpringBootConfiguration: (2)EnableAutoConfiguration: (3…...
Craft CMS 模板注入导致 Rce漏洞复现(CVE-2024-56145)(附脚本)
0x01 产品描述: Craft CMS 是一个灵活且强大的内容管理系统(CMS),专为创意团队和开发人员设计,提供高度可定制、直观且性能优越的网站和内容管理解决方案。它以用户友好的界面、强大的插件生态系统以及支持现代web开发最佳实践的特性而闻名0x02 漏洞描述: 由于模板…...
Next.js 新手容易犯的错误 _ 加载与缓存管理的关键(5)
1 错误地处理搜索参数(Search Params) 问题是什么? 在 Next.js 中,搜索参数指的是 URL 中用 ?keyvalue 表示的部分,比如 https://example.com/products?colorred 中的 colorred。这通常用于过滤、排序或选择某些选…...
/etc/fstab 文件学习systemd与该文件关系
文章目录 一、文件字段1.1、设备标识1.2、挂载点1.3、文件系统类型1.4、挂载选项1.5、dump1.5、fsck顺序 二、/etc/fstab 与systemd 的关系2.1、/etc/fstab 与systemd 的关系2.2、systemd 之前/etc/fstab生效过程2.3、systemd 时代/etc/fstab生效过程 三、相关知识3.1、如何更具…...
从源码分析swift GCD_DispatchGroup
前言: 最近在写需求的时候用到了DispatchGroup,一直没有深入去学习,既然遇到了那么就总结下吧。。。。 基本介绍: 任务组(DispatchGroup) DispatchGroup 可以将多个任务组合在一起并且监听它们的完成状态。…...
25计软新增考研院校!或可捡漏上岸!
C哥专业提供——计软考研院校选择分析专业课备考指南规划 新增的计算机与软件工程考研院校为考研同学带来了多方面的机遇,这些机遇不仅体现在过国家线后可能面临的更低竞争压力,还包括更多元化的教育选择和更广阔的就业前景: 一、降低竞争压…...
C# 线程安全集合
文章目录 引言一、ConcurrentBag<T>二、ConcurrentQueue<T>三、ConcurrentStack<T>四、ConcurrentDictionary<TKey, TValue>五、总结引言 在多线程编程环境中,多个线程可能同时访问和操作集合数据。如果使用普通集合,很容易引发数据不一致、错误结果…...
箱包发霉怎么处理 箱包发霉处理修复方法
箱包发霉怎么处理?箱包不仅是我们出行的必需品,更是承载着个人风格与品味的时尚配饰。然而箱包工厂生产的箱包,在潮湿多变的环境中,箱包很容易成为霉菌滋生的温床,尤其是那些长时间储存的箱包,更是霉菌的“…...
【每日学点鸿蒙知识】Charles抓包、lock文件处理、WebView组件、NFC相关、CallMethod失败等
1、HarmonyOS系统中如何使用Charles抓包? 在HarmonyOS操作系统中,使用Charles进行抓包的步骤如下: 在Charles中设置代理。 首先,在Charles的菜单栏上选择“Proxy”→“Proxy Settings”,然后填入代理端口࿰…...
【异常】GL-SFT1200路由器中继模式,TL-CPE1300D无法搜寻5G网问题分析
【异常】GL-SFT1200路由器中继模式,TL-CPE1300D无法搜寻5G网问题 情况实验结论情况 在用GL-SFT1200路由器切换中继模式时,由于web密码忘却,需要重置,但根据官网使用手册,或者对应的中文版手册,重置失败。通过跟商家联系,进行uboot刷机,提供了指导文档,尝试后刷机成功…...
LINUX--shell
函数 格式: func() { command } function 关键字可写,也可不写。 示例 1: #!/bin/bash func() { #定义函数 echo "Hello $1" } func world #执行主文件 # bash test.sh Hello world 数组 数组是相…...
TCP常见问题
文章目录 一、两种状态图二、常见问题1、MSL是什么 3、为何等待2MSL3、为何三次握手,不握手、握手一次、两次行吗4、为何四次挥手,三次行吗,两次行吗 一、两种状态图 四次挥手 二、常见问题 1、MSL是什么 MSL是Maximum Segment Lifetime的英…...
OpenCV学习——图像融合
import cv2 as cv import cv2 as cvbg cv.imread("test_images/background.jpg", cv.IMREAD_COLOR) fg cv.imread("test_images/forground.png", cv.IMREAD_COLOR)# 打印图片尺寸 print(bg.shape) print(fg.shape)resize_size (1200, 800)bg cv.resize…...
网速、续航双在线!2024随身WiFi品牌精选推荐!格行按键切三网值得买吗?
随身wifi这个东西大家用的还是蛮多的,特别是一些户外工作的人员,往往都需要配备一个随身wifi,这样户外工作的时候才有网络,工作才会比较方便一些。今天就来盘点2024年热门随身wifi哪个牌子的好用? 1.华为:通…...
ubuntu18.04连接不上网络问题
现象:右上角的网络图标消失,仅剩输入法、音量和开关图标,ifconfig只显示本地回环 原因:网络适配器未开启 解决: 1. 查看网络状态:cat /var/lib/NetworkManager/NetworkManager.state 这里显示是false&a…...
访谈积鼎科技总经理:国产CFD软件发展与未来趋势展望
傅彦国,上海积鼎信息科技有限公司创始人 记者:请傅总介绍下我国流体仿真行业的发展现状是怎样的? 傅彦国:自2018年政府加大了对核心技术自主研发的支持力度,国产CFD软件逐渐步入发展正轨。 首先,从市场规…...
【Linux知识】exec命令行详解
文章目录 概述主要用途和 bash 有什么区别? 概述 在 Linux 系统中,exec 命令用于执行一个可执行文件,替换当前进程的映像。也就是说,当你在终端中使用 exec 命令后,当前的 shell 会被替换为 exec 指定的程序ÿ…...
C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
HTML 列表、表格、表单
1 列表标签 作用:布局内容排列整齐的区域 列表分类:无序列表、有序列表、定义列表。 例如: 1.1 无序列表 标签:ul 嵌套 li,ul是无序列表,li是列表条目。 注意事项: ul 标签里面只能包裹 li…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展,光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域,IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选,但在长期运行中,例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
Python Ovito统计金刚石结构数量
大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...
4. TypeScript 类型推断与类型组合
一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式,自动确定它们的类型。 这一特性减少了显式类型注解的需要,在保持类型安全的同时简化了代码。通过分析上下文和初始值,TypeSc…...
群晖NAS如何在虚拟机创建飞牛NAS
套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...
