电子：jQuery 未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32621988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Electron: jQuery is not defined
提问by Bruno Vaz
Problem: while developing using Electron, when you try to use any JS plugin that requires jQuery, the plugin doesn't find jQuery, even if you load in the correct path using script tags.
问题：在使用 Electron 进行开发时，当您尝试使用任何需要 jQuery 的 JS 插件时，即使您使用脚本标签加载到正确的路径，该插件也找不到 jQuery。
For example,
例如，
<body>
<p id="click-me">Click me!</p>
...
<script src="node_modules/jquery/dist/jquery.min.js"></script> //jQuery should be loaded now
<script>$("#click-me").click(() => {alert("Clicked")});</script>
</body>
Running this code above wouldn't work. In fact, open up DevTools, go to the Console view, and click on the <p>element. You should see that function $ is not definedor something to that effect.
运行上面的这段代码是行不通的。实际上，打开 DevTools，转到 Console 视图，然后单击该<p>元素。你应该看到那个function $ is not defined或类似的东西。
回答by Dale Harders
A better and more generic solution IMO:
一个更好、更通用的解决方案 IMO：
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<!-- normal script imports etc -->
<script src="scripts/jquery.min.js"></script>
<script src="scripts/vendor.js"></script>
<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>
Benefits
好处
- Works for both browser and electron with the same code
- Fixes issues for ALL 3rd-party libraries (not just jQuery) without having to specify each one
- Script Build / Pack Friendly (i.e. Grunt / Gulp all scripts into vendor.js)
- Does NOT require
node-integrationto be false
- 适用于具有相同代码的浏览器和电子
- 修复了所有 3rd-party 库（不仅仅是 jQuery）的问题，而无需指定每个库
- 脚本构建/打包友好（即 Grunt/Gulp 所有脚本到 vendor.js 中）
- 不需要
node-integration是假的
source here
来源在这里
回答by Bruno Vaz
As seen in https://github.com/atom/electron/issues/254the problem is caused because of this code:
正如在https://github.com/atom/electron/issues/254 中看到的，问题是由以下代码引起的：
if ( typeof module === "object" && typeof module.exports === "object" ) {
// set jQuery in `module`
} else {
// set jQuery in `window`
}
The jQuery code "sees" that its running in a CommonJS environment and ignores window.
jQuery 代码“看到”它在 CommonJS 环境中运行并忽略window.
The solution is really easy, instead of loading jQuery through <script src="...">, you should load like this:
解决方案真的很简单，而不是通过加载 jQuery <script src="...">，你应该像这样加载：
<script>window.$ = window.jQuery = require('./path/to/jquery');</script>
Note:the dot before the path is required, since it indicates that it's the current directory. Also, remember to load jQuery before loading any other plugin that depends on it.
注意：路径前的点是必需的，因为它表示它是当前目录。另外，请记住在加载任何其他依赖于它的插件之前加载 jQuery。
回答by Aaleks
Another way of writing <script>window.$ = window.jQuery = require('./path/to/jquery');</script>is :
另一种写法<script>window.$ = window.jQuery = require('./path/to/jquery');</script>是：
<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>
回答by Fran6
electron FAQ answer :
电子常见问题解答：
http://electron.atom.io/docs/faq/
http://electron.atom.io/docs/faq/
I can not use jQuery/RequireJS/Meteor/AngularJS in Electron.
Due to the Node.js integration of Electron, there are some extra symbols inserted into the DOM like module, exports, require. This causes problems for some libraries since they want to insert the symbols with the same names.
To solve this, you can turn off node integration in Electron:
// In the main process.
我不能在 Electron 中使用 jQuery/RequireJS/Meteor/AngularJS。
由于 Electron 的 Node.js 集成，在 DOM 中插入了一些额外的符号，如 module、exports、require。这会导致某些库出现问题，因为它们想要插入具有相同名称的符号。
为了解决这个问题，你可以在 Electron 中关闭节点集成：
// 在主进程中。
let win = new BrowserWindow({
webPreferences: {
nodeIntegration: false } });
But if you want to keep the abilities of using Node.js and Electron APIs, you have to rename the symbols in the page before including other libraries:
但是如果你想保留使用 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>
回答by Dhaval Chauhan
Just came across this same problem
刚遇到同样的问题
npm install jquery --save
npm install jquery --save
<script>window.$ = window.jQuery = require('jquery');</script>
<script>window.$ = window.jQuery = require('jquery');</script>
worked for me
为我工作
回答by Murilo Feres
You can put node-integration: falseinside options on BrowserWindow.
您可以node-integration: false在 BrowserWindow 上放置内部选项。
eg: window = new BrowserWindow({'node-integration': false});
例如： window = new BrowserWindow({'node-integration': false});
回答by adgelbfish
A nice and clean solution
一个漂亮而干净的解决方案
- Install jQuery using npm. (
npm install jquery --save) - Use it:
<script> let $ = require("jquery") </script>
- 使用 npm 安装 jQuery。(
npm install jquery --save) - 用它：
<script> let $ = require("jquery") </script>
回答by Abraham Hernandez
I face the same issue and this worked for me!
我面临同样的问题，这对我有用！
Install jQueryusing npm
使用npm安装jQuery
$ npm install jquery
Then include jQuery in one of the following ways.
然后通过以下方式之一包含 jQuery。
Using script tag
使用脚本标签
<script>window.$ = window.jQuery = require('jquery');</script>
Using Babel
使用 Babel
import $ from 'jquery';
Using Webpack
使用 Webpack
const $ = require('jquery');
回答by Sagiv Ofek
<script>
delete window.module;
</script>
before your jquery import and you're good to go. more info here.
在你的 jquery 导入之前，你很高兴。更多信息在这里。
回答by Mertcan Diken
I think i understand your struggle i solved it little bit differently.I used script loader for my js file which is including jquery.Script loader takes your js file and attaching it to top of your vendor.js file it did the magic for me.
我想我理解你的挣扎，我以不同的方式解决了它。我为我的 js 文件使用了脚本加载器，其中包括 jquery。脚本加载器将你的 js 文件附加到你的 vendor.js 文件的顶部，它对我来说很神奇。
https://www.npmjs.com/package/script-loader
https://www.npmjs.com/package/script-loader
after installing the script loader add this into your boot or application file.
安装脚本加载器后，将其添加到您的引导或应用程序文件中。
import 'script!path/your-file.js';
导入 'script!path/your-file.js';
