如何在Electron Framework中包含和使用jQuery

本文概述

• 用NPM修复
• 修复jQuery库文件

信不信由你, 如果你仅将jQuery脚本文件包含到文档中(至少在使用jQuery 3.0的日期之前), 你将第一次无法使用jQuery。如果这样做, 你将在控制台中找到的第一条消息是：

Uncaught ReferenceError : $ is not defined
# or
Uncaught ReferenceError : jQuery is not defined

尝试自己解决问题可能会感到沮丧, 因为你可能需要阅读jQuery的源代码以了解失败的原因。

由于定义了”模块”, 因此未定义jQuery(在全局窗口中), 因此你无法访问jQuery变量, 因为它实际上并不存在, 此问题是由库中的以下if语句引起的：

if ( typeof module === "object" && typeof module.exports === "object" ) {
  // set jQuery in `module`
} else {
  // set jQuery in `window`
}

请记住, Electron使用node来工作, 因此jQuery由于模块而在声明中存在冲突, 不建议使用的解决方案是在BrowserWindow()中将node-integration属性设置为false, 但是这将删除你的node中的使用应用程序, 没有人想要…我想。

但是不用担心, 真正的解决方案比你想象的要简单得多, 你将能够在几秒钟内正常使用jQuery。

用NPM修复

在node命令提示符下使用以下命令将jQuery安装到项目中：

npm install jquery --save

现在, 在脚本标记(或js文件)中添加以下代码：

<script>window.$ = window.jQuery = require('jquery');</script>

你只需使用为require方法返回的值(库本身)声明jQuery和$ global变量。

修复jQuery库文件

如果你不使用NPM直接安装jQuery库, 则意味着你在项目中的某个位置仅具有jQuery文件。要在窗口中添加jQuery变量, 请使用require和jQuery库的路径作为第一个参数：

<!-- If the require doesn't work, include first the jQuery file
<script src="jquery-3.0.0.min.js"></script>-->
<script>window.$ = window.jQuery = require('./jquery-3.0.0.min.js');</script>

你只需使用为require方法返回的值(库本身)声明jQuery和$全局变量。

玩得开心 ！