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

electron基于node是个不争的事实,而jquery在市面上的普及度,也是有目共睹的。虽然近些年来,被reactvue们抢了不少市场。但是,姜还是老的辣,jquery的普及度还是不可小觑的。

苏南大叔:electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题 - electron-jquery
electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题(图11-1)

在本文的经验分享中,苏南大叔将要描述的是:electronjquery的冲突何在,如何让两者和平共处。

update210529:随着electron的版本更新,本文有后续新文章。见下面的网址:

症状描述

本文还是以改造版的quick-start项目为例,加载的网站还是 https://electron.org.cn

  • electron使用BrowserWindow加载url,nodeIntegration参数不设置(默认为true)。
  • 网站代码内使用了jquery这个库。

下面的对比图中,左侧是chrome正常加载,右侧是通过electron加载。

苏南大叔:electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题 - 030
electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题(图11-2)

那么我们可以明显看到,electron加载的网页,提示jquery is not definednodeIntegration 默认值是true,意思就是为页面中注入node相关能力。但是node相关代码的加载方式和jquery冲突。

方案一:还原网页的本来面目,去除node功能加持

如果你不能修改被加载网页的代码的话,那么本条目是你的解决方案。见下图。

苏南大叔:electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题 - 031
electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题(图11-3)

方案代码就是:

webPreferences:{
  nodeIntegration:false
}

我们可以手动关闭nodeIntegration

方案二,和平共处,jquery做妥协

这个和平共处方案比较不错,需要修改页面代码。但是不用修改node的函数名。主进程中的nodeIntegration,还是保持开启。在渲染进程里面,换成下面的方式加载jquery.js,而不是使用传统的加载方式。

window.$ = window.jQuery = require("./jquery.js");

下面的是一个变种代码,大家可以试试:

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

这种方案需要注意的就是:jquery.js需要放置在本地,而不能加载网络地址。然后,路径必须写相对路径。路径中的./是不能省略的。否则,就会提示找不到模块。

苏南大叔:electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题 - 005
electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题(图11-4)

方案三,和平共处,node做妥协

本解决方案适用于,你能修改项目源码的情况。main.js中开启nodeIntegration(或者使用默认值),而渲染页面中,对node相关模块进行处理。

main.js:

webPreferences:{
  nodeIntegration:true
}

渲染页面:

newsn.net:这里是【评论】可见内容

方案三,效果展示截图

为了更好的演示本方案,这个修改版的quick-start暂时还原其本来面目。下面的对比图将演示:开启nodeIntegration,如何影响页面中使用node相关功能函数。

苏南大叔:electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题 - 032
electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题(图11-5)

苏南大叔:electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题 - 033
electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题(图11-6)

相关的调用代码是这样的。

苏南大叔:electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题 - 034
electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题(图11-7)

为了演示和jquery的冲突关系,苏南大叔增加了jquery相关的代码。如下图:

苏南大叔:electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题 - 035
electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题(图11-8)

不开启nodeIntegration的话,则显示为node相关函数错误。

苏南大叔:electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题 - 036
electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题(图11-9)

开启nodeIntegration之后,不对代码进行改造,则显示为jquery相关函数错误。

苏南大叔:electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题 - 037
electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题(图11-10)

开启nodeIntegration之后,再对页面中的代码进行改造,两者和平共处。

苏南大叔:electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题 - 038
electron 与 jquery 不得不说的故事,如何解决 require 函数冲突问题(图11-11)

总结

对于大多数情况来说,方案二或者方案三,应该是你最好的解决方案。当然,本文的两个解决方案,不仅仅适用于jquery,还适用于其他的常见js类库,例如:RequireJS 或者 AngularJS 等等。

想get到苏南大叔带来的更多electron实战技巧吗?请点击这里:

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

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

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

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