【附源码】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

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 怎样才能正常使用?

  1. webpack 打包后的代码一般我们从来都不会遇到这种 ES Module 的问题,原因是 webpack 打包会把所有的代码都进行预编译整合,也即将代码从 node_module 拷贝出来,然后再经过 babel 等的转化,塞入打包后的代码里,最后统一用 require 的方式进行引入

  2. 而基于 electron 的开发,所有的 js 都可以取自本地,因为基于 commonJS 协议的方式更符合开发本地开发方式,因此 Webpack 可以把一些代码不打包进去,直接保留 require("vue") 引入方式,这样不但降低了最终打包文件的体积大小,还能动态的引入所需的代码,整体性能就很高

  3. 所以白名单这里就是不让 webpack 打包,默认整个生产依赖都要打包进去

  4. 但是 wallpaper 默认是 ES Module 就必须转化成 CommonJS 形式,于是就把代码进行预编译,然后塞到 main.js 中去,这样 wallpaper 整个源码就被构建进去了,也就不存在原来 type:"module"引入的概念

总结

  1. webpack打包 electron 都是基于 CommonJS 方式,使用的是 require 来引入

  2. 如果遇到 ES Module 模块,则将其加入到 whiteListModules 列表中,直接打包到 webpack 里面即可

  3. 其他没有什么好办法,能让 electron 既支持 CommonJS 又支持 ES Module,两者天然冲突

  4. 也没有必要去理解这方面的问题,因为大部分情况,都被 webpack 搞定了

  5. 除非你自己想从零构建一个纯粹的 ES Module 项目,但是只要你给别人用,或者引用别人的代码,那么要改后缀名为.cjs,目前我觉得你是得头大的

  6. 无论是源码用了多少 import from 的写法,webpack 最终都是给你整合成 require,fetch 的方式来搞事情

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

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

相关文章

【计算机网络篇】计算机网络期末复习题库详解

🧸安清h:个人主页 🎥个人专栏:【计算机网络】【Mybatis篇】 🚦作者简介:一个有趣爱睡觉的intp,期待和更多人分享自己所学知识的真诚大学生。 目录 🎯单选 🎯填空 &am…

JS使用random随机数实现简单的四则算数验证

1.效果图 2.代码实现 index.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</ti…

GIN中间件

感觉中间件是gin中挺重要的内容&#xff0c;就拿出来单独讲讲吧&#xff01; 什么是中间件&#xff1f; Gin框架允许开发者在处理请求的过程中&#xff0c;加入用户自己的 HandlerFunc 函数。 它适合处理一些公共的业务逻辑&#xff0c;比如登录认证、权限校验、数据分页、记…

SLM510A系列——24V,15到150mA单通道可调电流线性恒流LED驱动芯片

SLM510A 系列产品是单通道、高精度、可调电流线性恒流源的 LED 驱动芯片&#xff0c;在各种 LED 照明产品中非常简单易用。其在宽电压输入范围内&#xff0c;能保证极高的输出电流精度&#xff0c;从而在大面积的光源照明中&#xff0c;都能让 LED 照明亮度保持均匀一致。 由于…

回归预测 | MATLAB实现SVM-Adaboost集成学习结合支持向量机多输入单输出回归预测

回归预测 | MATLAB实现SVM-Adaboost集成学习结合支持向量机多输入单输出回归预测 目录 回归预测 | MATLAB实现SVM-Adaboost集成学习结合支持向量机多输入单输出回归预测基本介绍程序设计基本介绍 SVM-Adaboost集成学习是一种将支持向量机(SVM)与AdaBoost算法相结合的集成学习…

【潜意识Java】深度解读JavaWeb开发在Java学习中的重要性

目录 为什么Java Web开发如此重要&#xff1f; 1. 现代开发的核心技能 2. 增强系统设计与架构思维 3. 实战经验积累 Java Web开发的关键技术栈 案例&#xff1a;构建一个简单的Java Web应用 1. 创建数据库 2. 创建Java类 3. 创建数据库连接工具类 4. 创建DAO类 5. 创…

如何在 .NET Core 中轻松实现异步编程并提升性能

目录 初识异步编程 与多线程关系 异步编程操作 初识异步编程 异步编程&#xff1a;是指在执行某些任务时程序可以在等待某个操作完成的过程中继续执行其他任务&#xff0c;而不是阻塞当前线程&#xff0c;这在处理I/O密集型操作(如文件读取、数据库查询、网络请求等)时尤为重…

麒麟操作系统服务架构保姆级教程(二)ssh远程连接

如果你想拥有你从未拥有过的东西&#xff0c;那么你必须去做你从未做过的事情 作为一名成熟运维架构师&#xff0c;我们需要管理的服务器会达到几十台&#xff0c;上百台&#xff0c;上千台&#xff0c;甚至是上万台服务器&#xff0c;而且咱们的服务器还不一定都在一个机房&am…

159.等差数列的划分

class Solution {public int numberOfArithmeticSlices(int[] nums) {int lenums.length;if(le<3){return 0;}int arith0,res0,count0;//arith是差的大小,res是结果,count计算等差数量for(int i1;i<le;i){if(nums[i]-nums[i-1]arith){count;if(count>2){rescount-1;}}…

RabbitMQ消息队列的笔记

Rabbit与Java相结合 引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId> </dependency> 在配置文件中编写关于rabbitmq的配置 rabbitmq:host: 192.168.190.132 /…

请求三方http工具

请求三方接口工具封装 实现逻辑&#xff1a; 发起请求&#xff0c;输入基本请求信息&#xff1a;请求地址&#xff0c;请求类型&#xff0c;请求参数&#xff0c;是否需要认证工具自动为需要添加认证的请求添加认证&#xff0c;如果发现token快要过期或返回的错误编码为定义的…

HP服务器开启性能模式

ENERGY PERF BIAS CFG 模式指的是通过特定配置(通常是 BIOS 或操作系统中的设置)来控制处理器的能源性能偏置(Energy Performance Bias, EPB)。EPB 是一种机制,允许用户或系统管理员在性能和功耗之间进行权衡。不同的设置可以影响系统的响应速度、能效等。 ENERGY PERF B…

调用钉钉接口发送消息

调用钉钉接口发送消息 通过创建钉钉开放平台创建H5小程序&#xff0c;通过该小程序可以实现向企业内的钉钉用户发送消息&#xff08;消息是以工作通知的形式发送&#xff09; 1、目前仅支持发送文本消息&#xff0c;相同内容的文本只能成功发送一次&#xff0c;但是接口返回发…

纯css 实现呼吸灯效果

开始效果 呼吸效果 实现代码 <div class"container"><div class"breathing-light"></div> </div><style>html,body {height: 100%;background-color: white;}.container {padding: 100px;}.container .breathing-light {wi…

进程通信方式---共享映射区(无血缘关系用的)

5.共享映射区&#xff08;无血缘关系用的&#xff09; 文章目录 5.共享映射区&#xff08;无血缘关系用的&#xff09;1.概述2.mmap&&munmap函数3.mmap注意事项4.mmap实现进程通信父子进程练习 无血缘关系 5.mmap匿名映射区 1.概述 原理&#xff1a;共享映射区是将文件…

《云原生安全攻防》-- K8s安全框架:认证、鉴权与准入控制

从本节课程开始&#xff0c;我们将来介绍K8s安全框架&#xff0c;这是保障K8s集群安全比较关键的安全机制。接下来&#xff0c;让我们一起来探索K8s安全框架的运行机制。 在这个课程中&#xff0c;我们将学习以下内容&#xff1a; K8s安全框架&#xff1a;由认证、鉴权和准入控…

day08-别名-重定向-去重排序等

1.重复用touch命令创建同一份文件&#xff0c;会修改文件的时间戳。 alias命令&#xff1a; 别名 查看已有别名&#xff1a;alias [rootoldboy ~]# alias alias cpcp -i alias egrepegrep --colorauto alias fgrepfgrep --colorauto alias grepgrep --colorauto alias l.ls…

Qt WORD/PDF(四)使用 QAxObject 对 Word 替换(QWidget)

关于QT Widget 其它文章请点击这里: QT Widget 国际站点 GitHub: https://github.com/chenchuhan 国内站点 Gitee : https://gitee.com/chuck_chee 姊妹篇: Qt WORD/PDF&#xff08;一&#xff09;使用 QtPdfium库实现 PDF 操作 Qt WORD/PDF&#xff08;二…

设计一个基础JWT的多开发语言分布式电商系统

在设计一个分布式电商系统时&#xff0c;保证系统的可扩展性、性能以及跨语言的兼容性是至关重要的。随着微服务架构的流行&#xff0c;越来越多的电商系统需要在多个服务间共享信息&#xff0c;并且保证服务的安全性。在这样的场景下&#xff0c;JSON Web Token&#xff08;JW…

实践分享 | 公共数据金融应用的理论探索与实践研究—以人民币银行结算账户数据应用为例

摘要:公共数据具有高权威性、高准确性、高价值性以及高应用性的特点,实现公共数据的金融应用对更好服务实体经济、防控金融风险和提升金融服务水平具有重要现实意义。本文从理论探索与实践研究两个层面分析了公共数据金融应用的具体问题,一方面探索性的给出了公共数据金融应…