Electron项目中将CommonJS改成使用ES 模块(ESM)语法preload.js加载报错
问题
将Electron项目原CommonJS语法改成使用ES 模块(ESM)语法,preload.js一直加载不到,报错如下:
VM111 renderer_init:2 Unable to load preload script: D:\Vue\wnpm\electron\preload.js VM111 renderer_init:2 Error: require() of ES Module D:\Vue\wnpm\electron\preload.js not supported. Instead change the require of preload.js in null to a dynamic import() which is available in all CommonJS modules. at Module._extensions..js (VM53 loader:1424:19) at Module.load (VM53 loader:1214:32) at Module._load (VM53 loader:1030:12) at c._load (VM68 node_init:2:13672) at s._load (VM111 renderer_init:2:31018) at VM111 renderer_init:2:33087 at VM111 renderer_init:2:33539 at ___electron_webpack_init__ (VM111 renderer_init:2:33543) at VM111 renderer_init:2:33666 at BuiltinModule.compileForInternalLoader (VM7 realm:401:7)
解决办法
官方文档找到解决方法
https://www.electronjs.org/zh/docs/latest/tutorial/esm#esm-preload-scripts-must-have-the-mjs-extension
将preload.js文件名改成preload.mjs,并且将preload: path.join(__dirname, 'preload.mjs')引用的后缀也要修改,下面是我的代码
// 创建浏览器窗口 mainWindow = new BrowserWindow({ width: 1920, height: 1080, minWidth: 1024, minHeight: 768, titleBarStyle: 'customButtonsOnHover', icon: path.join(__dirname, 'assets', 'logo.ico'), // 设置窗口图标 frame: false,//设置为 false 时可以创建一个无边框窗口 默认值为 true。 center: true,//窗口是否在屏幕居中. 默认值为 false show: true, //窗口是否在创建时显示。 默认值为 true。 webPreferences: { nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API enableRemoteModule: true, // 可以使用remote方法 contextIsolation: true, // 可以使用require方法 preload: path.join(__dirname, 'preload.mjs') } });
引用其它链接
- 升级至electron@^28.0.0
- 简单地在package.json中添加"type": "module",
- 把所有.js 文件中的require, module.exports 改成 import from , export 语法。(除了preload.js)
- 注意,esm的import语法中,文件后缀名.js不再能省略,必须显式提供。
- 注意,esm中普通成员要用export { myFunc } 的方式提供。
如果你也要转ESM可以参数链接
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。