electron和jquery，不同electron版本下的冲突引发因素对比

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

苏南大叔以前写过一篇文章，说在渲染进程中加载jquery的话，会和electron自带的node能力冲突。产生jquery is not defined的问题。链接如下：

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

那么，在目前的最新的electron@12及electron@13版本中，这个问题还是否存在呢？本文测试环境：win10，jquery@3.6.0，chrome@90.0.4430.212。使用了electron fiddle@0.2.31来切换electron版本号进行测试。

概述

本实验中，会出现$ is not defined的错误提示。这个错误提示和electron开始nodeIntegration有关。

• 对于electron@5（不包括）之前，nodeIntegration是默认开启的，默认有冲突。
• 而从electron@5到electron@11，nodeIntegration是默认关闭的，默认没冲突。
• 而从electron@12开始，nodeIntegration分化成两个概念，nodeIntegration（默认关闭）和contextIsolation（默认开启），默认没冲突。

网站代码情况

本地先起了一个网站www容器，加载的网站页面里面，加载了个jquery@3.6.0最新版，同时简单做了个jq调用。代码如下：

<script src="static/jquery-3.6.0.min.js"></script>
<h1></h1>
<script>
    $("h1").text("test")
</script>

页面在最新版的chrome@里面是正常执行的。正常情况下显示如下：

发生错误情况下，显示：

Uncaught ReferenceError: $ is not defined

electron@3到electron@4

默认情况下，开启了nodeIntegration，问题重现。

关闭nodeIntegration之后，没有问题。

electron@5到electron@11

默认情况下，关闭了nodeIntegration，没有问题。

开启nodeIntegration之后，问题重现。

electron@12及electron@13

默认情况下，关闭了nodeIntegration，开启了contextIsolation，没有问题。
单独开启nodeIntegration（此时contextIsolation默认开启）或者关闭nodeIntegration, 都没有问题。

开启nodeIntegration，同时关闭了contextIsolation，问题重现。

解决方案

除了去调整nodeIntegration和contextIsolation两个概念外，和可以去修改渲染进程的代码。

if (typeof module === "object") {
    window.jQuery = window.$ = module.exports;
}

当然，还有其他的渲染进程方案，可以参考下面的文字：

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

相关链接

• https://newsn.net/say/electron-jquery.html
• https://newsn.net/say/electron-fiddle.html
• https://newsn.net/say/electron-require-is-not-defined.html
• https://newsn.net/say/electron-require-is-not-defined-2.html

总结

在传统网页里面，是离不开jquery的。那么，electron和jquery的重逢，也是命中注定的。但是，可喜的是：默认情况下，electron是越来越兼容jquery了。即使在特殊的不兼容情况下，也可以通过修改渲染进程中，jquery前后左右的代码，来使得渲染进程中可以使用jquery来。

更多electron的相关文章，请点击苏南大叔的系列文章：

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

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