web-dev-qa-db-fra.com

Electron: jQuery n'est pas défini

Problème: lors du développement avec Electron, lorsque vous essayez d'utiliser un plug-in JS nécessitant jQuery, celui-ci ne trouve pas jQuery, même si vous chargez le chemin correct à l'aide de balises de script.

Par exemple,

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

Exécuter ce code ci-dessus ne fonctionnerait pas. En fait, ouvrez DevTools, accédez à la vue Console et cliquez sur l'élément <p>. Vous devriez voir ce function $ is not defined ou quelque chose du genre.

jqueryelectron
257
Bruno Vaz

Une solution meilleure et plus générique 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>

Avantages

  • Fonctionne pour les navigateurs et les électrons avec le même code
  • Résout les problèmes pour TOUTES les bibliothèques tierces (pas seulement jQuery) sans avoir à spécifier chacune
  • Script Build/Pack Friendly (par exemple, Grunt/Gulp, dans vendor.js)
  • N'exige PAS que node-integration soit faux

source ici

651
Dale Harders

Comme on peut le voir dans https://github.com/atom/electron/issues/254 le problème est dû à ce code:

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

Le code jQuery "voit" qu'il s'exécute dans un environnement CommonJS et ignore window.

La solution est vraiment simple, au lieu de charger jQuery via <script src="...">, vous devriez charger comme ceci:

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

Remarque: _ ​​le point précédant le chemin est obligatoire, car il indique qu'il s'agit du répertoire en cours. De plus, n'oubliez pas de charger jQuery avant de charger tout autre plugin qui en dépend}.

111
Bruno Vaz

Une autre façon d'écrire <script>window.$ = window.jQuery = require('./path/to/jquery');</script> est la suivante: 

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

electron FAQ réponse:

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

Je ne peux pas utiliser jQuery/RequireJS/Meteor/AngularJS dans Electron.

En raison de l’intégration d’Electron dans Node.js, il y a quelques extra symboles insérés dans le DOM comme module, exports, require. Ce provoque des problèmes pour certaines bibliothèques car elles veulent insérer le symboles avec les mêmes noms.

Pour résoudre ce problème, vous pouvez désactiver l'intégration de nœud dans Electron:

// Dans le processus principal. 

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

Mais si vous voulez garder les capacités d'utilisation de Node.js et Electron API, vous devez renommer les symboles de la page avant d’inclure autres bibliothèques:

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

Vous pouvez mettre node-integration: false dans les options de BrowserWindow.

par exemple: window = new BrowserWindow({'node-integration': false});

17
Murilo Feres

Une solution agréable et propre

  1. Installez jQuery à l’aide de npm. (npm install jquery --save)
  2. Utilisez-le: <script> let $ = require("jquery") </script>
11
adgelbfish
<script>
  delete window.module;
</script>

avant votre importation jquery et vous êtes prêt à partir. plus d'infos ici .

5
Sagiv Ofek

Je pense que j'ai compris votre lutte et que je l'ai résolu un peu différemment.J'ai utilisé un chargeur de script pour mon fichier js, qui inclut notamment jquery.Script loader prend votre fichier js et le joint au sommet de votre fichier vendor.js.

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

après avoir installé le chargeur de script, ajoutez ceci dans votre fichier de démarrage ou d’application.

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

4
Mertcan Diken

ok, voici une autre option, si vous voulez un parent relatif ...

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

im building et Angular App avec electron, ma solution était la suivante:

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

Donc, Jquery est chargé à partir de angular.json si sur un navigateur, sinon, si c'est une application construite par des électrons, il aura besoin d'un module.

Si vous souhaitez importer jquery dans index.html au lieu d'importer d'angular.json, utilisez la solution suivante:

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

a travaillé pour moi en utilisant le code suivant 

var $ = require('jquery')
2
Adeojo Emmanuel IMM

Si vous utilisez Angular2, vous pouvez créer un nouveau fichier js avec ce code:

// jquery-electron.js

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

et le mettre juste après le chemin jQuery, dans .angular-cli.json:

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

1.Installez jQuery à l’aide de 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>
1
Alexey Kolotsey

Je suis confronté au même problème et cela a fonctionné pour moi!

Installez jQuery en utilisant npm

npm i jquery

Ensuite, incluez jQuery de l’une des manières suivantes.

Utiliser la balise de script

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

Utiliser Babel

import $ from "jquery";

Utiliser Webpack

var $ = require('jquery')
0
Carlos Abraham

vous pouvez essayer le code suivant:

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

Pour ce problème, utilisez JQuery et un autre js identique à celui que vous utilisez dans la page Web. Cependant, Electron a une intégration de nœud, il ne trouvera donc pas vos objets js. Vous devez définir module = undefined jusqu'à ce que vos objets js soient chargés correctement. Voir ci-dessous exemple

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

Après avoir importé comme donné, vous pourrez utiliser le JQuery et d'autres choses en électron.

0
Kiran Maniya

Cela fonctionne pour moi.

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

Choses à considérer:

1) Mettez ceci dans la section juste avant le </head>

2) Incluez Jquery.min.js ou Jquery.js juste avant la balise </body>

0
Vishal Goyal