【附源码】Electron Windows桌面壁纸开发中的 CommonJS 和 ES Module 引入问题以及 Webpack 如何处理这种兼容

embedded/2024/12/23 10:32:23/

背景

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

  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.ppmy.cn/embedded/148044.html

相关文章

【新教程】非root用户给Ubuntu server设置开机自启服务-root用户给Ubuntu server设置开机自启服务

1 思路 使用systemd用户服务 2 过程 1、创建用户服务文件: mkdir -p ~/.config/systemd/user vim ~/.config/systemd/user/my_app.service用户服务文件模板: [Unit] DescriptionSSH_ct Afterdefault.target[Service] ExecStart/home/wlg/Softwares/wyc/wyc_lin…

Vue3之性能优化

Vue3作为Vue框架的最新版本,在性能上进行了大量的优化,使得其在处理大型应用和复杂界面时表现更加出色。本文将详细介绍Vue3的性能提升、优化策略以及性能提升的实例,并结合具体代码和性能测试数据,展示Vue3在实际应用中的性能优势…

键盘常见键的keyCode和对应的键名

常见键的keyCode和对应的键名 键名keyCode描述Enter13回车键Escape27Esc键Backspace8退格键Tab9Tab键Space32空格键Arrow Up38向上箭头Arrow Down40向下箭头Arrow Left37向左箭头Arrow Right39向右箭头Shift16Shift键Control17Ctrl键Alt18Alt键Caps Lock20大写锁定键F1112F1键F…

【蓝桥杯每日一题】扫描游戏——线段树

扫描游戏 蓝桥杯每日一题 2024-12-13 扫描游戏 线段树 模拟 题目大意 有一根围绕原点 O 顺时针旋转的棒 O A OA OA ,初始时指向正上方 (Y 轴正向)。 在平面中有若干物件, 第 i 个物件的坐标为 ( x i , y i ) (x_i,y_i) (xi​,yi​), 价值为 z i z_i zi​ 。当棒扫到某个 物件…

硬盘接口模式sata与ahci区别, U盘UEFI GPT与Legacy 启动项区别,硬盘格式MBR和gpt的区别

一。SATA和AHCI的主要区别在于它们的功能、接口类型和性能。‌ 功能和性能 SATA‌:Serial ATA(SATA)是一种硬盘接口标准,主要用于连接存储设备(如硬盘)到主机(如主板)。它经历了多个…

单元测试使用记录

什么是单元测试 简单来说就是对一个类中的方法进行测试,对输出的结果检查判断是否符合预期结果 但是在多年的工作中,从来没有哪个项目中真正系统的用到了单元测试,因此对它还是很陌生的,也就造成更加不会在项目中区使用它。 如何…

微服务设计原则——功能设计

文章目录 1.ID生成2.数值精度3.DB操作4.性能测试5.版本兼容5.1 向旧兼容5.2 向新兼容 6.异步时序问题7.并发问题7.1 并发时序7.2 并发数据竞争 参考文献 1.ID生成 在分布式系统中,生成全局唯一ID是非常重要的需求,因为需要确保不同节点、服务或实例在并…

说说你对 css3 display:flex 弹性盒模型 的理解

发现宝藏 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【宝藏入口】。 CSS3 中的 display: flex 是一种强大的布局模式,被称为“弹性盒布局”或“Flexbox”。它允许我们通过一套简洁的规则…