Elettrone: jQuery non è definito

315

Problema: durante lo sviluppo con Electron, quando si tenta di utilizzare qualsiasi plug-in JS che richiede jQuery, il plug-in non trova jQuery, anche se si carica nel percorso corretto utilizzando i tag di script.

Per esempio,

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

L'esecuzione di questo codice sopra non funzionerebbe. Infatti, apri DevTools, vai alla vista Console e fai clic <p>sull'elemento. Dovresti vedere quello function $ is not definedo qualcosa in tal senso.

jquery  electron 
— Bruno Vaz
fonte
Perché non usare semplicemente la requirefunzione elettronica ?

Risposte:

762

Una soluzione IMO migliore e più generica: 

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

Benefici

  • Funziona con browser ed elettroni con lo stesso codice
  • Risolve i problemi di TUTTE le librerie di terze parti (non solo jQuery) senza dover specificare ognuna
  • Creazione di script / pacchetto (ad esempio Grunt / Gulp tutti gli script in vendor.js)
  • NON richiede node-integrationdi essere falso

fonte qui

— Dale Harders
fonte
1
@fareednamrouti Sì, ma il punto di questa soluzione era che non devi elencare le librerie di terze parti (funziona solo!). Comodo quando si importano molte librerie (o script auto-raggruppati)
— Dale Harders
2
Grazie! nel mio caso, questa soluzione funziona anche con versioni precedenti di d3 come d3 v3 o precedenti
— vento contrario
2
@DaleHarders Si scopre che window.moduleinizia con lo stesso valore di module, quindi il tuo codice non funziona esattamente come previsto. Il modo corretto per farlo è invece quello di salvare modulein qualche altra proprietà della finestra (non utilizzata), come window.tempModule. Per confermare quello che dico, prova console.log(module)dopo la tua ultima affermazione per verificarlo ora module === undefined.
— Lucio Paiva,
1
@Lucio Nope. Dobbiamo salvare in window.module poiché è qui che le librerie di terze parti lo prevedono (ambiente del browser). Penso che tu stia confondendo Node.js e gli ambienti browser. Questo trucco è di aiuto nello sviluppo in modo che il codice possa essere eseguito nel browser E nodo / elettrone senza alcuna configurazione aggiuntiva. Esistono molti altri modi per farlo, ma questo è l'IMHO più semplice.
— Dale Harders,
1
Ciò è problematico con CSP - nessun script in linea
— Trevor
121

Come visto in https://github.com/atom/electron/issues/254 il problema è causato da questo codice:

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

Il codice jQuery "vede" che è in esecuzione in un ambiente CommonJS e ignora window.

La soluzione è davvero semplice , invece di caricare jQuery <script src="...">, dovresti caricare così:

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

Nota: è necessario il punto prima del percorso , poiché indica che è la directory corrente. Inoltre, ricorda di caricare jQuery prima di caricare qualsiasi altro plugin che dipende da esso .

— Bruno Vaz
fonte
1
Grazie, ma ho un sistema creato da Yeoman con angolare. Grunt prende tutte le mie dipendenze dal mio pergolato e le costruisce in un file vendor.js. Come posso caricare jquery, correggere con la linea e continuare con le altre dipendenze di bower che richiedono jquery?
— bluesky777,
Non capisco, i vendor.js hanno jquery dentro? In tal caso, è possibile caricare vendor.js con questa finestra. $ Method, afaik.
— Bruno Vaz,
Alcuni commenti più avanti nel problema collegato c'è una soluzione ancora migliore: 'node-integration': falsecome opzione per BrowserWindow.
— Boldewyn,
6
Questo non influisce su altre cose?
— Bruno Vaz,
53

Un altro modo di scrivere <script>window.$ = window.jQuery = require('./path/to/jquery');</script>è:

<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>
— Aaleks
fonte
Ho trovato questa come la migliore risposta perché posso ancora usare CDN con esso! E non è necessario sovrascrivere nulla.
— patotoma,
53

FAQ FAQ sull'elettrone:

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

Non riesco a usare jQuery / RequireJS / Meteor / AngularJS in Electron.

A causa dell'integrazione Node.js di Electron, ci sono alcuni simboli extra inseriti nel modulo DOM come, esporta, esporta. Ciò causa problemi ad alcune librerie poiché vogliono inserire i simboli con gli stessi nomi.

Per risolvere questo problema, puoi disattivare l'integrazione dei nodi in Electron:

// Nel processo principale. 

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

Ma se vuoi mantenere le capacità di usare le API Node.js e Electron, devi rinominare i simboli nella pagina prima di includere altre librerie:

<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
fonte
@ Fran6 cosa posso fare se sto caricando una pagina esterna? :(
— georgiosd
Funzionava ma dopo aver fatto ciò la mia app Electron non si chiudeva, cioè non potevo uscire dalla pagina web.
— tale852150,
34

Ho appena riscontrato questo stesso problema

npm install jquery --save

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

ha funzionato per me

— Dhaval Chauhan
fonte
Questo è esattamente ciò che dice la mia risposta originale.
— Bruno Vaz,
Ciao come fare lo stesso con materialize.min.js cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/… . .. qualcosa del genere <script> window.Materialize = window.Materialize = require ('Materialize'); </script> ??? qualcuno può aiutare
— Makjb lh
@BrunoVaz questa risposta è più pulita :)
— moeiscool,
20

Puoi mettere le node-integration: falseopzioni interne su BrowserWindow.

per esempio: window = new BrowserWindow({'node-integration': false});

— Murilo Feres
fonte
4
Questa è una buona soluzione per gli utenti che non necessitano di integrazione dei nodi.
— Adam Szmyd,
È fantastico, funziona perfettamente per me. Grazie @Murilo Feres. In che modo le opzioni di integrazione del nodo fanno?
— Ahesanali Suthar,
3
non funziona @ 1.4, utilizzare: let win = new BrowserWindow ({webPreferences: {nodeIntegration: false}})
— holly
14

Una soluzione bella e pulita

  1. Installa jQuery usando npm. ( npm install jquery --save)
  2. Usalo: <script> let $ = require("jquery") </script>
— adgelbfish
fonte
8

Devo affrontare lo stesso problema e questo ha funzionato per me!

Installa jQuery usando npm

$ npm install jquery

Quindi includere jQuery in uno dei seguenti modi.

Usando il tag script

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

Usando Babele

import $ from 'jquery';

Utilizzando Webpack

const $ = require('jquery');
— Abraham Hernandez
fonte
5

Penso di aver capito la tua lotta, l'ho risolto in modo leggermente diverso. Ho usato il caricatore di script per il mio file js che include jquery.Il caricatore di script prende il tuo file js e allegandolo in cima al tuo file vendor.js ha fatto la magia per me.

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

dopo aver installato il caricatore di script aggiungilo nel tuo file di avvio o dell'applicazione.

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

— Mertcan Diken
fonte
4

ok, ecco un'altra opzione, se vuoi un parente includi ...

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

Se stai usando Angular2 puoi creare un nuovo file js con questo codice:

// jquery-electron.js

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

e inseriscilo subito dopo il percorso jquery, in .angular-cli.json:

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "assets/js/jquery-electron.js",
    ...
    ...
]
— Max
fonte
3

im building e App angolare con elettrone, la mia soluzione era la seguente:

index.html

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

angular.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"
            ]

Quindi Jquery viene caricato da angular.json se sul browser, altrimenti se si tratta di un'app costruita con elettroni richiederà invece il modulo.

Se vuoi importare jquery in index.html invece di importare da angular.json usa la seguente soluzione:

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

1.Installare jQuery usando 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
fonte
2

Questo funziona per me.

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

Cose da considerare:

1) Mettilo nella sezione prima </head>

2) Includi Jquery.min.js o Jquery.js subito prima del </body>tag

— Vishal Goyal
fonte
0

puoi provare il seguente codice:

mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration:false,
        }
});
— shuoGG
fonte
0

Per questo problema, utilizzare JQuery e altri js stessi utilizzati nella pagina Web. Tuttavia, Electron ha l'integrazione del nodo, quindi non troverà i tuoi oggetti js. Devi impostare module = undefinedfino a quando i tuoi oggetti js non vengono caricati correttamente. Vedi l'esempio seguente

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

Dopo l'importazione come indicato, sarai in grado di usare le JQuerye altre cose nell'elettrone.

— Kiran Maniya
fonte
0

Basta installare Jquery con il seguente comando.

npm install --save jquery

Dopodiché, inserisci la linea belew nel file js che desideri utilizzare Jquery

let $ = require('jquery')
— Milan Hirpara
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.