本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规。大家都是程序员,不要闹得不开心。

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

苏南大叔:electron和jquery,不同electron版本下的冲突引发因素对比 - electon-jquery-2
electron和jquery,不同electron版本下的冲突引发因素对比(图9-1)

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

概述

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

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

苏南大叔:electron和jquery,不同electron版本下的冲突引发因素对比 - electon-jquery-error
electron和jquery,不同electron版本下的冲突引发因素对比(图9-2)

网站代码情况

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

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

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

苏南大叔:electron和jquery,不同electron版本下的冲突引发因素对比 - web-ok
electron和jquery,不同electron版本下的冲突引发因素对比(图9-3)

发生错误情况下,显示:

Uncaught ReferenceError: $ is not defined

electron@3electron@4

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

苏南大叔:electron和jquery,不同electron版本下的冲突引发因素对比 - electon-jquery-error-01
electron和jquery,不同electron版本下的冲突引发因素对比(图9-4)

关闭nodeIntegration之后,没有问题。

electron@5electron@11

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

苏南大叔:electron和jquery,不同electron版本下的冲突引发因素对比 - electon-jquery-error-02
electron和jquery,不同electron版本下的冲突引发因素对比(图9-5)

开启nodeIntegration之后,问题重现。

苏南大叔:electron和jquery,不同electron版本下的冲突引发因素对比 - electron-v11-jquery-error
electron和jquery,不同electron版本下的冲突引发因素对比(图9-6)

electron@12electron@13

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

苏南大叔:electron和jquery,不同electron版本下的冲突引发因素对比 - electon-jquery-error-03
electron和jquery,不同electron版本下的冲突引发因素对比(图9-7)

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

苏南大叔:electron和jquery,不同electron版本下的冲突引发因素对比 - electon-jquery-error-04
electron和jquery,不同electron版本下的冲突引发因素对比(图9-8)

解决方案

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

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

苏南大叔:electron和jquery,不同electron版本下的冲突引发因素对比 - electon-jquery-solution
electron和jquery,不同electron版本下的冲突引发因素对比(图9-9)

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

相关链接

总结

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

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

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