Electron中Jquery的引入方式

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的引入方式的更多相关文章

Vue项目中jQuery的引入
1.安装jQuery依赖 npm install jquery --save-dev 2.在webpack.base.conf.js头部加入如下代码 var webpack = require(&qu ...
MVC中JQuery文件引入的路径问题，@Url.Content函数
今天写了个MVC的Demo,文件夹结构很简单,如下: 利用EF生成Model框架并手工加表字段注解,但在页面上JS验证始终没显示.实在无语. 无意中在浏览器里按F12,看见提示: Failed t ...
认识CSS中css引入方式、选择器、文本样式设置以及显示模式
前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...
Spring中两种引入配置文件方式
用过Spring的人都知道,我们一般把数据库的配置.日志的配置或者其他的通用配置放在单独的配置文件中,在和Spring整合时,一般通过以下两种方法引入: <context:property-pl ...
项目中同一个页面引入不同的jQuery版本的不冲突问题
在写项目的过程中,如果需要使用jQuery时,时长会遇到需要引入不同版本的jQuery,可能上一个负责该项目的人用到的是老版本的jQuery,而你去添加功能时用的是新版本的,这个问题很难避免掉,如果去 ...
Electron对JQuery的支持问题
最近在了解Electron框架写应用,偶然发现在html中使用<script src="./jquery.js"></script>这种方式引入JQuery ...
css js 的引入方式和书写位置
css 的引入方式 1.行内样式 <div id="div1" style="width:100px; height:100px; background:red&q ...
21-[jQuery]-介绍，引入方式，与js的区别
1.jQuery介绍 jQury官网:https://jquery.com/ 2.jQuery文件的引入 <!DOCTYPE html> <html lang="en&qu ...
[Django基础] django解决静态文件依赖问题以及前端引入方式
一.静态文件依赖学习django的时候发现静态文件(css,js等)不能只在html中引入,还要在项目的settings中设置,否则会报以下错误 [11/Sep/2018 03:18:15] &qu ...

随机推荐

C#异步编程(一)
异步编程简介前言本人学习.Net两年有余,是第一次写博客,虽然写的很认真,当毕竟是第一次,肯定会有很多不足之处, 希望大家照顾照顾新人,有错误之处可以指出来,我会虚心接受的. 何谓异步与同步相对 ...
ASP.NET Core 折腾笔记一
前言: 在ASP.NET Core 1.0时,曾折腾过一次,后因发现不了System.Data而停止. 更因VS2015提示过期Delete掉VS了,其实主要还是笔记本的硬盘空间吃紧. 快双十一了,本 ...
angular实现统一的消息服务
后台API返回的消息怎么显示更优雅,怎么处理才更简洁?看看这个效果怎么样? 自定义指令和服务实现自定义指令和服务实现消息自动显示在页面的顶部,3秒之后消失 1. 显示消息这种显示消息的方式是不是有 ...
Linux 添加新磁盘，在线扩充空间
CentOS 7开发环境中的home 目录空间满了,需要增加空间到虚拟机上执行"ls /sys/class/scsi_host",然后重新扫描SCSI总线来添加设备.如右图.然后 ...
C# 实时折线图，波形图
此Demo是采用VS自带的Chart图表控件,制作实时动态显示的折线图,和波形图. 涉及到知识如下: Chart 控件,功能强大,可以绘制柱状图,折线图,波形图,饼状图,大大简化了对图的开发与定制. ...
angluarjs2项目生成内容合并到asp.net mvc4项目中一起发布
应用场景 angular2(下文中标注位NG2)项目和.net mvc项目分别开发,前期采用跨域访问进行并行开发,后期只需要将NG2项目的生产版本合并到.net项目. NG2项目概述 ng2项目采用的 ...
UVA-146 ID Codes
It is 2084 and the year of Big Brother has finally arrived, albeit a century late. In order to exerc ...
【夯实Mysql基础】MySQL性能优化的21个最佳实践和 mysql使用索引
本文地址分享提纲: 1.为查询缓存优化你的查询 2. EXPLAIN 你的 SELECT 查询 3. 当只要一行数据时使用 LIMIT 1 4. 为搜索字段建索引 5. 在Join表的时候使用相当类 ...
品牌营销：不要Beat，要逼格！
品牌营销:不要Beat,要逼格! 奥美的创始人大卫·奥格威说,广告营销应当是"具有风度的推销产品".而当下的营销手段,"风度"早已被抛之脑后, ...
Linux命令
系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...