【解决】Electron 引用JQuery 报错 Uncaught ReferenceError: $ is not defined

最新推荐文章于 2023-07-20 13:41:02 发布

原创最新推荐文章于 2023-07-20 13:41:02 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#electron #疑难||解决

electron 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在Electron环境下使用jQuery、RequireJS、AngularJS等库时遇到的问题及解决方案，包括修改引用方式、代码调整及官方推荐的nodeIntegration设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Electron 的官方文档已经告诉我们：

因为 Electron 在运行环境中引入了 Node.js，所以在 DOM 中有一些额外的变量，比如 module、exports和require。这导致了许多库不能正常运行，因为它们也需要将同名的变量加入运行环境中。并给出了一些解决方案。

我在 Electron 中无法使用 jQuery、RequireJS、Meteor、AngularJS.

除了官方给出的解决方案，也收罗了其他的如下方法：

方案一：更改jq的引用写法：<script>window.$ = window.jQuery = require("./js/jquery.min.js")</script>
方案二：去掉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)}

附上官方的解决方案

将nodeIntegration设为false，不过这样的做法页面就不能使用nodejs和Electron APIs

// 在主进程中
const { BrowserWindow } = require('electron')
let win = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false
  }
})
win.show()

假如你依然需要使用 Node.js 和 Electron 提供的 API，你需要在引入那些库之前将这些变量重命名。缺点是每个需要引用的页面都需要这样去改

<head>
	<script>
		window.nodeRequire = require;
		delete window.require;
		delete window.exports;
		delete window.module;
	</script>
	<script type="text/javascript" src="jquery.js"></script>
</head>