问题
将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:33087at VM111 renderer_init:2:33539at ___electron_webpack_init__ (VM111 renderer_init:2:33543)at VM111 renderer_init:2:33666at 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,//窗口是否在屏幕居中. 默认值为 falseshow: 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可以参数链接