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 ...
随机推荐
- 微信应用号（小程序）开发IDE配置（第一篇）
2016年9月22日凌晨,微信宣布“小程序”问世,当然只是开始内测了,微信公众平台对200个服务号发送了小程序内测邀请.那么什么是“小程序”呢,来看微信之父怎么说 看完之后,相信大家大概都有些明白了吧 ...
- web前端基础知识
#HTML 什么是HTML,和他ML... 网页可以比作一个装修好了的,可以娶媳妇的房子. 房子分为:毛坯房,精装修 毛坯房的修建: 砖,瓦,水泥,石头,石子.... 精 ...
- 冒泡，setinterval，背景图的div绑定事件，匿名函数问题
1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...
- 真假4K电视验证：一张图足矣
国庆期间笔者逛了一下电视卖场,考虑到国内电视台以及宽带的情况,1080P至少还能用十年,所以只想要个2k电视就够了.然而事与愿违,卖场中八成的都是4k电视,清一色的4k电视让人眼花缭乱.难道4k面板技 ...
- 用django创建一个项目
首先你得安装好python和django,然后配置好环境变量,安装python就不说了,从配置环境变量开始 1.配置环境变量 在我的电脑处点击右键,或者打开 控制面板\系统和安全\系统 -> 左 ...
- android绘制圆形图片的两种方式
看下效果先 下面有完整的示例代码 使用BitmapShader(着色器) 我们在绘制view 的时候 就是小学上美术课 用水彩笔在本子上画画 使用着色器绘制圆形图片最简单的理解方式 就是把bitmap ...
- mysql 大表拆分成csv导出
最近公司有一个几千万行的大表需要按照城市的id字段拆分成不同的csv文件. 写了一个自动化的shell脚本 在/home/hdh 下面 linux-xud0:/home/hdh # lltotal 1 ...
- linux yum命令详解
yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指定的服务器自动下载RP ...
- 面向未来的友好设计：Future Friendly
一年前翻译了本文的一部分,最近终于翻译完成.虽然此设计思想的提出已经好几年了,但是还是觉得应该在国内推广一下,让大家知道“内容策略”,“移动优先”,“响应式设计”,“原子设计”等设计思想和技术的根源. ...
- 拥抱.NET Core，如何开发一个跨平台类库 (1)
在此前的文章中详细介绍了使用.NET Core的基本知识,如果还没有看,可以先去了解“拥抱.NET Core,学习.NET Core的基础知识补遗”,以便接下来的阅读. 在本文将介绍如何配置类库项目支 ...