背景
在尝试让 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 怎样才能正常使用？
- 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 的方式来搞事情
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
