Electron默认启用了Node.js的require模块，而jQuery等新版本框架为了支持commondJS标准，当Window中存在require时，会启用模块引入的方式，导致报错 Uncaught ReferenceError: $ is not defined，本文研究了高低版本jQuery引入的正确方式。

1. 报错原因

Electron默认启用了Node.js的require模块，而jQuery等新版本框架为了支持commondJS标准，当Window中存在require时，会启用模块引入的方式.

2. 几种引入方式

方式1，html页面直接引入：

		<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>

经测试jquery-1.9.1可以,jquery-1.11.1按这种方式报错

方式2，html页面引入时：

	<script>window.$ = window.jQuery = require('./js/jquery-1.11.0.min.js');</script>

经测试jquery-1.11.0可以,jquery-1.9.1按这种方式报错

方式3，html页面引入时重命名并删除对象

		<head>

			<script>

			window.nodeRequire = require;

			delete window.require;

			delete window.exports;

			delete window.module;

			</script>

			<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>

		</head>

经测试jquery-1.9.1可以,jquery-1.11.1按这种方式报错

方式4,去掉框架中的模块引入判断代码，将jQuery中的第一行代码中的

		!function(a,b){"object"==typeof module&&"object"==typeof module.exports? module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}

改为

		!function(a,b){b(a)}

html页面引用时

		<script type="text/javascript" src="./js/jquery-1.11.0.min.js"></script>

jquery-1.11.0成功,而jquery-1.9.1中第一行没有这个代码，故不能采用这种方式

方式5，如果开发了一定的量，而且不想使用Node.js模块，大可以去掉require模块化引入，直接使用以下方法禁用Node.js的require模块化引入，即可正常使用任何框架

			 // In the main process.

			let win = new BrowserWindow({

			  webPreferences: {

			    nodeIntegration: false

			  }

			});

总结

低版本JQuery建议方式1，高版本JQuery建议方式2；不使用Node.js模块的话可以尝试方式5

参考资料

Electron基础 - 解决无法使用jQuery/RequireJS/Meteor/AngularJS 的问题 - GuanYong

electron中怎样导入jquery不报错 - jykl

Electron中Jquery的引入方式的更多相关文章

  1. Vue项目中jQuery的引入

    1.安装jQuery依赖 npm install jquery --save-dev 2.在webpack.base.conf.js头部加入如下代码 var webpack = require(&qu ...

  2. MVC中JQuery文件引入的路径问题，@Url.Content函数

    今天写了个MVC的Demo,文件夹结构很简单,如下: 利用EF生成Model框架并手工加表字段注解,但在页面上JS验证始终没显示.实在无语. 无意中在浏览器里按F12,看见提示:   Failed t ...

  3. 认识CSS中css引入方式、选择器、文本样式设置以及显示模式

    前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...

  4. Spring中两种引入配置文件方式

    用过Spring的人都知道,我们一般把数据库的配置.日志的配置或者其他的通用配置放在单独的配置文件中,在和Spring整合时,一般通过以下两种方法引入: <context:property-pl ...

  5. 项目中同一个页面引入不同的jQuery版本的不冲突问题

    在写项目的过程中,如果需要使用jQuery时,时长会遇到需要引入不同版本的jQuery,可能上一个负责该项目的人用到的是老版本的jQuery,而你去添加功能时用的是新版本的,这个问题很难避免掉,如果去 ...

  6. Electron对JQuery的支持问题

    最近在了解Electron框架写应用,偶然发现在html中使用<script src="./jquery.js"></script>这种方式引入JQuery ...

  7. css js 的引入方式和书写位置

    css 的引入方式 1.行内样式 <div id="div1" style="width:100px; height:100px; background:red&q ...

  8. 21-[jQuery]-介绍，引入方式，与js的区别

    1.jQuery介绍 jQury官网:https://jquery.com/ 2.jQuery文件的引入 <!DOCTYPE html> <html lang="en&qu ...

  9. [Django基础] django解决静态文件依赖问题以及前端引入方式

    一.静态文件依赖 学习django的时候发现静态文件(css,js等)不能只在html中引入,还要在项目的settings中设置,否则会报以下错误 [11/Sep/2018 03:18:15] &qu ...

随机推荐

  1. Atitit 项目语言的选择 java c#.net  php??

    Atitit 项目语言的选择 java c#.net  php?? 1.1. 编程语言与技术,应该使用开放式的目前流行的语言趋势1 1.2. 从个人职业生涯考虑,java优先1 1.3. 从项目实际来 ...

  2. document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)

    document.documentElement.clientHeight 与 document.body.clientHeight用来获取页面可视高度我觉得有点问题.这两个应该不是一个东西. 页面中 ...

  3. IteratorPattern(迭代子模式)

    /** * 迭代子模式 * @author TMAC-J * 聚合:某一类对象的集合 * 迭代:行为方式,用来处理聚合 * 是一种行为模式,用于将聚合本身和操作聚合的行为分离 * Java中的COLL ...

  4. Js 数组返回去重后的数据

    function removeRepeat(data) { var temp = ""; var mainData = []; for (var i = 0; i < dat ...

  5. Stack Overflow 排错翻译 - Closing AlertDialog.Builder in Android -Android环境中关闭AlertDialog.Builder

    Stack Overflow 排错翻译  - Closing AlertDialog.Builder in Android -Android环境中关闭AlertDialog.Builder 转自:ht ...

  6. windows10安装mysql5.7.17是这样安装的吗？

    操作 全允许

  7. 使用win10远程控制ubuntu16.04

    使用win10远程控制ubuntu16.04,网上很多需要安装xfce桌面的.今天介绍一下,不需要安装其他桌面,使用Ubuntu16.04自带桌面,漂亮美观. Ubuntu16.04端: 1.打开终端 ...

  8. 兼容Mono的下一代云环境Web开发框架ASP.NET vNext

    微软在2014年5月12日的TechEd大会上宣布将会发布下一代ASP.NET框架ASP.NET vNext的预览.此次发布的ASP.NET框架与以前相比发生了根本性的变化,凸显了微软“云优先”(cl ...

  9. .NET开源进行时：消除误解、努力前行（本文首发于《程序员》2015第10A期的原始版本）

    2014年11月12日,ASP.NET之父.微软云计算与企业级产品工程部执行副总裁Scott Guthrie,在Connect全球开发者在线会议上宣布,微软将开源全部.NET核心运行时,并将.NET ...

  10. android内部培训视频_第四节(1)_异步网络操作

    第四节(1):异步网络操作  一.结合asyncTask下载网络图片 1.定义下载类,继承自asyncTask,参数分别为:String(url地址),Integer(刻度,本例没有用到),BitMa ...