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. 分布式锁1 Java常用技术方案

    前言:       由于在平时的工作中,线上服务器是分布式多台部署的,经常会面临解决分布式场景下数据一致性的问题,那么就要利用分布式锁来解决这些问题.所以自己结合实际工作中的一些经验和网上看到的一些资 ...

  2. 分治法求解最近对问题（c++）

    #include"stdafx.h" #include<iostream> #include<cmath> #define TRUE 1 #define F ...

  3. Kotlin的Lambda表达式以及它们怎样简化Android开发(KAD 07)

    作者:Antonio Leiva 时间:Jan 5, 2017 原文链接:https://antonioleiva.com/lambdas-kotlin/ 由于Lambda表达式允许更简单的方式建模式 ...

  4. linux基础学习笔记

    我用的是centOS7.0版本的系统.linux的shell终端窗口类似于wind的command窗口 shell命令提示符格式:用户名@主机名:目录名 提示符 @前面的是已登录的用户名,@之后的为计 ...

  5. CodeSimth - .Net Framework Data Provider 可能没有安装。解决方法

    今天想使用CodeSimth生成一个sqlite数据库的模板.当添加添加数据库的时候发现: .Net Framework Data Provider 可能没有安装. 下面找到官方的文档说明: SQLi ...

  6. Java 字符串格式化详解

    Java 字符串格式化详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 文中如有纰漏,欢迎大家留言指出. 在 Java 的 String 类中,可以使用 format() 方法 ...

  7. Angular2开发笔记

    Problem 使用依赖注入应该注意些什么 服务一般用来做什么 指令一般用来做什么 angular2如何提取公共组件 angular2为什么不需要提公共组件 父组件与子组件之间如何通讯 什么时候应该使 ...

  8. 免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）

    前面介绍了六种.NET组件,其中有一种组件是写文件的压缩和解压,现在介绍另一种文件的解压缩组件SharpZipLib.在这个组件介绍系列中,只为简单的介绍组件的背景和简单的应用,读者在阅读时可以结合官 ...

  9. Nginx反向代理，负载均衡，redis session共享，keepalived高可用

    相关知识自行搜索,直接上干货... 使用的资源: nginx主服务器一台,nginx备服务器一台,使用keepalived进行宕机切换. tomcat服务器两台,由nginx进行反向代理和负载均衡,此 ...

  10. 万向节锁(Gimbal Lock)的理解

    [TOC] 结论 我直接抛出结论: Gimbal Lock 产生的原因不是欧拉角也不是旋转顺序,而是我們的思维方式和程序的执行逻辑没有对应,也就是说是我们的观念导致这个情况的发生. 他人解释 首先我们 ...