electron12起，如何解决require is not defined的问题？

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

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

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

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

报错截图

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

• https://newsn.net/say/electron-f12.html

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

Uncaught ReferenceError: require is not defined

截图如下：

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

• https://newsn.net/say/commonjs.html

解决方案，electron@11及以下

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

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

具体可以参考：

• https://newsn.net/say/electron-require-not-defined.html

解决方案，electron@12+（推荐）

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

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

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

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

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

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

相关链接

• https://newsn.net/say/electron-f12.html
• https://newsn.net/say/electron-require-not-defined.html
• https://newsn.net/say/electron-require-not-defined-2.html

总结

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

• https://newsn.net/tag/electron/

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