我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

electron的版本更新的飞快,截至到发稿,目前更新到了12系列。而经典的require is not defined的问题,再次出现。上一次碰到这个问题,还是在electron@5系列。所以,对于require is not defined问题,目前是要分版本进行讨论了。

苏南大叔:electron12起,如何解决require is not defined的问题? - electron-require-is-not-defined
electron12起,如何解决require is not defined的问题?(图6-1)

本文测试环境:electron@11.4.5electron@12.0.7node@14.16.0win10。本文中描述的问题,应该是在渲染进程下发生的。例如:index.html或者renderer.js中。在preload.js里面,一般不会存在这个问题。

electron@5之前,应该是没有这个require is not defined问题的。从electron@5开始,到electron@11,解决方案是方案一。从electron@12版本开始,解决方案是方案二。

报错截图

可以在electron开发者工具里面看到报错信息,如果您还不晓得如何打开开发者工具,下面有篇相关文章:

在开发者工具的console选项卡里面,可以看到报错信息如下:

Uncaught ReferenceError: require is not defined

截图如下:

苏南大叔:electron12起,如何解决require is not defined的问题? - require-not-defined-error
electron12起,如何解决require is not defined的问题?(图6-2)

如果您不知道怎么使用require引入一个模块,那么,您可以参考下面这篇文章:

解决方案,electron@11及以下

看清楚版本范围,再来复制代码:electron@11及以下。
方案是:

const mainWindow = new BrowserWindow({
   //...
   webPreferences: {
     nodeIntegration:true,
     //...
   }
})

具体可以参考:

苏南大叔:electron12起,如何解决require is not defined的问题? - electron11-nodeintegration
electron12起,如何解决require is not defined的问题?(图6-3)

解决方案,electron@12+(推荐)

目前的electron@12开始,又出了一个新的方案。叫做:contextIsolation,要设置为false,才能在渲染进程里面使用require字样。代码如下:

const mainWindow = new BrowserWindow({
   //...
   webPreferences: {
     nodeIntegration:true,
     contextIsolation:false
   }
})

苏南大叔:electron12起,如何解决require is not defined的问题? - electron12-require
electron12起,如何解决require is not defined的问题?(图6-4)

多了一个contextIsolation:false字样,大概意思就是“上下文隔离”吧。对于早期版本来说,这个多余的参数也不会报错,所以,这个是个可能的比较好的方案,写在目前已知的任何electron版本下,都不会报错,推荐!

苏南大叔:electron12起,如何解决require is not defined的问题? - electron12-require-2
electron12起,如何解决require is not defined的问题?(图6-5)

事实真相,并非你想象的那样

其实electron并不推荐在渲染进程里面使用node能力,也就是说并不推荐在渲染进程里面使用require。所以,可能就需求本身来说,你看到require is not defined报错的时候,可能你写的代码就不符合electron的官方规范了,也就是很可能你走入弯路了。否则,官方也不会增加这么多参数来控制在渲染进程里面使用require吧?

苏南大叔:electron12起,如何解决require is not defined的问题? - electron12-require-preload
electron12起,如何解决require is not defined的问题?(图6-6)

另外,对于electron来说,还有很多的其他限制,导致你页面的script不能执行,并不是获得require is not defined的报错信息。这些情况,在后面的文章中,苏南大叔再来讨论。

相关链接

总结

electron的版本升级太快,版本升级过程中,会产生很多新的问题。需要大家仔细阅读文档,解决问题。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   electron