Electron: jQuery ist nicht definiert

315

Problem: Wenn Sie während der Entwicklung mit Electron versuchen, ein JS-Plugin zu verwenden, für das jQuery erforderlich ist, findet das Plugin jQuery nicht, selbst wenn Sie mithilfe von Skript-Tags den richtigen Pfad laden.

Zum Beispiel,

<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>

Das Ausführen dieses Codes oben würde nicht funktionieren. Öffnen Sie DevTools, wechseln Sie zur Konsolenansicht und klicken Sie auf das <p>Element. Sie sollten das function $ is not definedoder etwas in diesem Sinne sehen.

jquery electron

— Bruno Vaz
quelle

Warum nicht einfach die Elektronenfunktion nutzen require?

760

Eine bessere und allgemeinere Lösung 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>

Leistungen

Funktioniert sowohl für Browser als auch für Elektronen mit demselben Code
Behebt Probleme für ALLE Bibliotheken von Drittanbietern (nicht nur für jQuery), ohne dass jede angegeben werden muss
Script Build / Pack Friendly (dh Grunzen / Gulp alle Skripte in vendor.js)
Muss NICHT node-integrationfalsch sein

Quelle hier

— Dale Harders
quelle

1

@fareednamrouti Ja, aber der Sinn dieser Lösung war, dass Sie die Bibliotheken von Drittanbietern nicht auflisten müssen (es funktioniert einfach!). Praktisch, wenn Sie viele Bibliotheken (oder selbst gebündelte Skripte) importieren

— Dale Harders

2

Vielen Dank! In meinem Fall funktioniert diese Lösung auch für ältere Versionen von d3 wie d3 v3 oder niedriger

— Gegenwind

2

@DaleHarders Es stellt sich heraus , dass der Code window.modulemit dem gleichen Wert wie beginnt module, sodass Ihr Code nicht ganz wie erwartet funktioniert. Der richtige Weg, dies zu tun, besteht darin, modulestattdessen in einer anderen (nicht verwendeten) Fenstereigenschaft zu speichern , wie z window.tempModule. Um zu bestätigen, was ich sage, versuchen Sie console.log(module)nach Ihrer letzten Aussage, dies jetzt zu überprüfen module === undefined.

— Lucio Paiva

1

@ Lucio Nein. Wir müssen in window.module speichern, da dies von den Bibliotheken von Drittanbietern erwartet wird (Browser-Umgebung). Ich denke, Sie verwirren Node.js und Browser-Umgebungen. Dieser Trick soll die Entwicklung unterstützen, damit Ihr Code ohne zusätzliche Konfiguration im Browser UND im Knoten / Elektron ausgeführt werden kann. Es gibt viele andere Möglichkeiten, dies zu tun, aber dies ist meiner Meinung nach am einfachsten.

— Dale Harders

1

Dies ist problematisch mit CSP - keine Inline-Skripte

— Trevor

121

Wie unter https://github.com/atom/electron/issues/254 zu sehen ist, wird das Problem durch diesen Code verursacht:

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

Der jQuery-Code "sieht", dass er in einer CommonJS-Umgebung ausgeführt wird, und ignoriert ihn window.

Die Lösung ist wirklich einfach . Anstatt jQuery zu <script src="...">laden, sollten Sie wie folgt laden:

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

Hinweis: Der Punkt vor dem Pfad ist erforderlich , da er angibt, dass es sich um das aktuelle Verzeichnis handelt. Denken Sie auch daran, jQuery zu laden, bevor Sie ein anderes Plugin laden, das davon abhängt .

— Bruno Vaz
quelle

1

Danke, aber ich habe ein von yeoman erstelltes System mit eckigen. Grunt nimmt alle meine Bower-Abhängigkeiten und baut sie in eine vendor.js-Datei ein. Wie kann ich jquery laden, mit Ihrer Zeile reparieren und mit den anderen Bower-Abhängigkeiten fortfahren, die jquery benötigen?

— bluesky777

Ich verstehe nicht, die vendor.js haben jquery drin? In diesem Fall können Sie die Datei vendor.js mit diesem Fenster laden. $ Method, afaik.

— Bruno Vaz

Einige Kommentare später in der verlinkten Ausgabe gibt es eine noch bessere Lösung: 'node-integration': falseals Option für BrowserWindow.

— Boldewyn

6

Beeinflusst dies nicht andere Dinge?

— Bruno Vaz

53

Eine andere Art zu schreiben <script>window.$ = window.jQuery = require('./path/to/jquery');</script>ist:

<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>

— Aaleks
quelle

Ich fand das die beste Antwort, weil ich immer noch CDN damit verwenden kann! Und keine Notwendigkeit, etwas zu überschreiben.

— Patotom

53

Antwort auf die FAQ zu Elektronen:

http://electron.atom.io/docs/faq/

Ich kann jQuery / RequireJS / Meteor / AngularJS in Electron nicht verwenden.

Aufgrund der Node.js-Integration von Electron sind einige zusätzliche Symbole in das DOM eingefügt, z. B. Modul, Export, erforderlich. Dies führt bei einigen Bibliotheken zu Problemen, da sie gleichnamige Symbole einfügen möchten.

Um dies zu lösen, können Sie die Knotenintegration in Electron deaktivieren:

// Im Hauptprozess.

let win = new BrowserWindow({  
 webPreferences: {
 nodeIntegration: false   } });

Wenn Sie jedoch die Möglichkeiten zur Verwendung von Node.js- und Electron-APIs beibehalten möchten, müssen Sie die Symbole auf der Seite umbenennen, bevor Sie andere Bibliotheken einschließen:

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

— Fran6
quelle

@ Fran6 Was kann ich tun, wenn ich eine externe Seite lade? :(

— Georgiosd

Dies funktionierte, aber danach wurde meine Electron-App nicht geschlossen - das heißt, ich konnte die Webseite nicht verlassen.

— Tale852150

34

Bin gerade auf das gleiche Problem gestoßen

npm install jquery --save

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

arbeitete für mich

— Dhaval Chauhan
quelle

Genau das sagt meine ursprüngliche Antwort.

— Bruno Vaz

Hallo, wie man das gleiche mit materialize.min.js macht cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/… . .. so etwas wie dieses <script> -Fenster.Materialize = window.Materialize = require ('Materialise'); </ script> ??? kann jemand helfen

— Makjb lh

@BrunoVaz diese Antwort ist sauberer :)

— moeiscool

20

Du kannst Geben node-integration: false Optionen in BrowserWindow einfügen.

z.B: window = new BrowserWindow({'node-integration': false});

— Murilo Feres
quelle

4

Dies ist eine gute Lösung für Benutzer, die keine Knotenintegration benötigen.

— Adam Szmyd

Das ist großartig, funktioniert perfekt für mich. Danke @Murilo Feres. Welche Möglichkeiten haben die Optionen zur Knotenintegration?

— Ahesanali Suthar

3

funktioniert nicht bei 1.4, bitte benutze: let win = new BrowserWindow ({webPreferences: {nodeIntegration: false}})

— Holly

14

Eine schöne und saubere Lösung

Installieren Sie jQuery mit npm. (npm install jquery --save )
Benutze es: <script> let $ = require("jquery") </script>

— Adgelbfish
quelle

8

Ich stehe vor dem gleichen Problem und das hat bei mir funktioniert!

Installieren Sie jQuery mit npm

$ npm install jquery

Schließen Sie dann jQuery auf eine der folgenden Arten ein.

Skript-Tag verwenden

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

Mit Babel

import $ from 'jquery';

Verwenden von Webpack

const $ = require('jquery');

— Abraham Hernandez
quelle

6

<script>
  delete window.module;
</script>

vor dem jquery importieren und los geht's. Mehr Infos hier .

— Sagiv Ofek
quelle

5

Ich glaube, ich verstehe Ihren Kampf. Ich habe ihn ein wenig anders gelöst. Ich habe den Script Loader für meine JS-Datei verwendet, einschließlich jquery.Script Loader. Er nimmt Ihre JS-Datei und hängt sie an die Datei Ihres Anbieters an. Js-Datei hat die Magie für mich bewirkt.

https://www.npmjs.com/package/script-loader

Fügen Sie dies nach der Installation des Script Loader in Ihre Boot- oder Anwendungsdatei ein.

import 'script! path / your-file.js';

— Mertcan Diken
quelle

4

ok, hier ist eine andere Option, wenn Sie einen Verwandten einschließen möchten ...

<script> window.$ = window.jQuery = require('./assets/scripts/jquery-3.2.1.min.js') </script>

— Aestrro
quelle

3

Wenn Sie Angular2 verwenden, können Sie mit diesem Code eine neue js-Datei erstellen:

// jquery-electron.js

if ((!window.jQuery || !window.$) && (!!module && !!module.exports)) {
      window.jQuery = window.$ = module.exports;
}

und setzen Sie es direkt nach jquery path in .angular-cli.json:

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "assets/js/jquery-electron.js",
    ...
    ...
]

— Max
quelle

3

Ich baue und Angular App mit Elektron, meine Lösung war die folgende:

index.html

<script>
    if ( typeof module === "object" && typeof module.exports === "object" ) {
      window.$ = window.jQuery = require('jquery');
    }
</script>

angle.json

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

Jquery wird also von angular.json geladen, wenn es sich um einen Browser handelt. Wenn es sich um eine elektronengebaute App handelt, ist stattdessen ein Modul erforderlich.

Wenn Sie jquery in index.html importieren möchten, anstatt aus angle.json zu importieren, verwenden Sie die folgende Lösung:

<script src="path/to/jquery"></script>
<script>
    if ( typeof module === "object" && typeof module.exports === "object" ) {
      window.$ = window.jQuery = require('jquery');
    }
</script>

— Kuza Grab
quelle

2

arbeitete für mich mit dem folgenden Code

var $ = require('jquery')

— Adeojo Emmanuel IMM
quelle

2

1.Installieren Sie jQuery mit npm.

npm install jquery --save

2.

<!--firstly try to load jquery as browser-->
<script src="./jquery-3.3.1.min.js"></script>
<!--if first not work. load using require()-->
<script>
  if (typeof jQuery == "undefined"){window.$ = window.jQuery = require('jquery');}
</script>

— Alexey Kolotsey
quelle

2

Das funktioniert bei mir.

<script languange="JavaScript">
     if (typeof module === 'object') {window.module = module; module = undefined;}
</script>

Dinge, die man beachten muss:

1) Setzen Sie dies in Abschnitt direkt vor </head>

2) Fügen Sie Jquery.min.js oder Jquery.js direkt vor dem </body>Tag ein

— Vishal Goyal
quelle

0

Sie können den folgenden Code versuchen:

mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration:false,
        }
});

— shuoGG
quelle

0

Verwenden Sie für dieses Problem JQuery und andere js, die Sie auf der Webseite verwenden. Electron verfügt jedoch über eine Knotenintegration, sodass Ihre js-Objekte nicht gefunden werden. Sie müssen festlegen, module = undefinedbis Ihre js-Objekte ordnungsgemäß geladen sind. Siehe Beispiel unten

<!-- Insert this line above local script tags  -->
<script>if (typeof module === 'object') {window.module = module; module = 
undefined;}</script>

<!-- normal script imports etc  -->
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>    

<!-- Insert this line after script tags -->
<script>if (window.module) module = window.module;</script>

Nach dem Import wie angegeben können Sie die JQueryund andere Dinge in Elektron verwenden.

— Kiran Maniya
quelle

0

Installieren Sie einfach Jquery mit dem folgenden Befehl.

npm install --save jquery

Danach setzen Sie bitte eine neue Zeile in die js-Datei, die Sie mit Jquery verwenden möchten

let $ = require('jquery')

— Milan Hirpara
quelle