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 ...
随机推荐
- Tcp/ip 报文解析
在编写网络程序时,常使用TCP协议.那么一个tcp包到底由哪些东西构成的呢?其实一个TCP包,首先需要通过IP协议承载,而IP报文,又需要通过以太网传送.下面我们来看看几种协议头的构成 一 .Ethe ...
- php注册审核
通过注册审核,判断刚创建的账户是否可以使用. 后台管理员审核通过后,账号可以使用. 通过session 设置只能通过登录入口进入网页. 原理:通过数据库设置账号的一个字段状态,例: isok:1, i ...
- BPM应用开发解决方案分享
一.需求分析企业整体管理是一个完整的体系,如果 把这个体系比做一个拼图,企业信息化通过各个业务系统覆盖了一部分业务. 企业通过采购实施通用软件的方式,覆盖了企业的核心业务和专业化业务然而系统只满足了部 ...
- Android之DOM解析XML
一．DOM解析方法介绍 DOM是基于树形结构的节点或信息片段的集合,允许开发人员使用DOM API遍历XML树,检索所需数据.分析该结构通常需要加载整个文档和构造树形结构,然后才可以检索和更新节点信息 ...
- 简历生成平台项目开发-STEP1问卷设计
周五课程结束完后,小组建立QQ群和微信群,着手讨论项目问题.一开始的大概想法:就业信息平台,收集企业招聘信息和就业生资料,提供给学生和企业的校企对接平台.后来发现群里谭卓同学也有个相关的思路,经过商量 ...
- Outfit7 庆祝其开发工作大获丰收
走不寻常路之经验总结 每位合格应用开发人员都拥有相同的目标:灵机一动,构建独创性原型,克服各种困难,最终吸引投资者将其想法推向市场. 名声.财富以及构建更多应用的机会将接踵而至. 焦虑.改善和重复是开 ...
- 解决Chrome 下载带半角分号出现net::ERR_RESPONSE_HEADERS_MULTIPLE_CONTENT_DISPOSITION的问题
方式一:添加双引号Response.AddHeader("content-disposition", "attachment; filename=\"" ...
- Java集合---ConcurrentHashMap原理分析
集合是编程中最常用的数据结构.而谈到并发,几乎总是离不开集合这类高级数据结构的支持.比如两个线程需要同时访问一个中间临界区(Queue),比如常会用缓存作为外部文件的副本(HashMap).这篇文章主 ...
- C#与C++的发展历程第四 - C#6的新时代
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- 2000条你应知的WPF小姿势 基础篇<15-21>
在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师,对C#和WPF有着极深的热情.最为出色的是他维护了两个博客:2,000Things You Should Know ...