इलेक्ट्रॉन: jQuery परिभाषित नहीं है

315

समस्या: इलेक्ट्रॉन का उपयोग करते समय विकसित करते समय, जब आप किसी भी जेएस प्लगइन का उपयोग करने की कोशिश करते हैं, जिसमें jQuery की आवश्यकता होती है, तो प्लगइन jQuery नहीं खोजता है, भले ही आप स्क्रिप्ट टैग का उपयोग करके सही रास्ते में लोड करें।

उदाहरण के लिए,

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

इस कोड को ऊपर चलाने से काम नहीं चलेगा। वास्तव में, DevTools खोलें, कंसोल दृश्य पर जाएं, और <p>तत्व पर क्लिक करें । आपको function $ is not definedउस प्रभाव को कुछ या कुछ देखना चाहिए ।

jquery  electron 
— ब्रूनो वाज़
स्रोत
केवल इलेक्ट्रॉन requireफ़ंक्शन का उपयोग क्यों नहीं किया जाता है ?

जवाबों:

759

एक बेहतर और अधिक सामान्य समाधान 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>

लाभ

  • एक ही कोड के साथ ब्राउज़र और इलेक्ट्रॉन दोनों के लिए काम करता है
  • सभी 3-पार्टी पुस्तकालयों (न सिर्फ jQuery) के लिए मुद्दों को हल करता है प्रत्येक को निर्दिष्ट किए बिना
  • स्क्रिप्ट बिल्ड / पैक फ्रेंडली (यानी सभी लिपियों को वेंडर में जमा करें / जमा करें)
  • node-integrationझूठे होने की आवश्यकता नहीं है

स्रोत यहाँ

— डेल हार्डर्स
स्रोत
1
@fareednamrouti हां, लेकिन इस समाधान की बात यह थी कि आपको तृतीय पक्ष पुस्तकालयों को सूचीबद्ध करने की आवश्यकता नहीं है (यह सिर्फ काम करता है!)। जब आप कई पुस्तकालयों (या स्वयं बंडल स्क्रिप्ट) का आयात कर रहे हैं, तो
— हार्ड हार्डर्स
2
धन्यवाद! मेरे मामले में, यह समाधान d3 के पुराने संस्करणों जैसे d3 v3 या उससे नीचे के लिए भी काम करता है
— हेडविंड्स
2
@ डेलहार्डर्स यह पता चलता है कि यह window.moduleउसी मूल्य के साथ शुरू होता है module, इसलिए आपका कोड अपेक्षा के अनुरूप काम नहीं करता है। ऐसा करने का उचित तरीका यह है कि moduleइसके बजाय कुछ अन्य (अप्रयुक्त) विंडो प्रॉपर्टी को बचाया जाए window.tempModule। यह पुष्टि करने के लिए कि मैं क्या कहता हूं, console.log(module)अब सत्यापित करने के लिए अपने अंतिम विवरण के बाद प्रयास करें module === undefined।
— लुसियो पाइवा
1
@ लुसियो नोप। हमें window.module को सहेजने की आवश्यकता है क्योंकि यह वह जगह है जहाँ 3 पार्टी पुस्तकालय इसकी (ब्राउज़र वातावरण) अपेक्षा कर रहे हैं। मुझे लगता है कि आप Node.js और ब्राउज़र वातावरण को भ्रमित कर रहे हैं। यह चाल विकास में सहायता करने के लिए है ताकि आपका कोड ब्राउज़र और नोड / इलेक्ट्रॉन में बिना किसी अतिरिक्त कॉन्फ़िगरेशन के चल सके। इसे करने के कई अन्य तरीके हैं लेकिन यह सबसे सरल IMHO है।
— डेल हार्डर्स
1
यह CSP के साथ समस्याग्रस्त है - कोई इनलाइन स्क्रिप्ट नहीं
— ट्रेवर
121

जैसा कि https://github.com/atom/electron/issues/254 में देखा गया है क्योंकि इस कोड के कारण समस्या होती है:

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

JQuery कोड "देखता है" जो कि कॉमनजस वातावरण में चल रहा है और अनदेखा करता है window।

समाधान वास्तव में आसान है , इसके बजाय jQuery लोड करने के बजाय <script src="...">, आपको इस तरह लोड करना चाहिए:

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

नोट: पथ से पहले डॉट आवश्यक है , क्योंकि यह इंगित करता है कि यह वर्तमान निर्देशिका है। इसके अलावा, किसी भी अन्य प्लगइन को लोड करने से पहले jQuery लोड करना याद रखें जो उस पर निर्भर करता है ।

— ब्रूनो वाज़
स्रोत
1
धन्यवाद, लेकिन मेरे पास एक प्रणाली है जो तुर्क द्वारा कोणीय के साथ बनाई गई है। ग्रंट मेरे सभी बोवर निर्भरता लेता है और उन्हें एक वेंडर.जेएस फ़ाइल में बनाता है। मैं jquery को कैसे लोड कर सकता हूं, अपनी लाइन के साथ ठीक कर सकता हूं, और अन्य बोवर निर्भरता के साथ जारी रख सकता हूं जिसे jquery की आवश्यकता है?
— bluesky777
मुझे समझ नहीं आ रहा है, वेंडर के पास अंदर jquery है? यदि हां, तो आप इस विंडो के साथ वेंडर को लोड कर सकते हैं। $ पद्धति, afaik।
— ब्रूनो वाज़
लिंक किए गए मुद्दे में बाद में कुछ टिप्पणियां एक बेहतर समाधान है: 'node-integration': falseविकल्प के रूप में BrowserWindow।
— बोल्ड्यूविन
6
क्या यह अन्य चीजों को प्रभावित नहीं करता है?
— ब्रूनो वाज़
53

लेखन <script>window.$ = window.jQuery = require('./path/to/jquery');</script>का दूसरा तरीका है:

<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>
— Aaleks
स्रोत
मुझे यह सबसे अच्छा उत्तर मिला क्योंकि मैं अभी भी इसके साथ सीडीएन का उपयोग कर सकता हूं! और किसी चीज को ओवरराइट करने की जरूरत नहीं है।
— पेटोटोमा
53

इलेक्ट्रॉन सामान्य प्रश्न उत्तर:

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

मैं इलेक्ट्रॉन में jQuery / NeedJS / Meteor / AngularJS का उपयोग नहीं कर सकता।

इलेक्ट्रॉन के Node.js एकीकरण के कारण, मॉड्यूल में कुछ अतिरिक्त प्रतीकों को डाला जाता है जैसे मॉड्यूल, निर्यात, आवश्यकता। यह कुछ पुस्तकालयों के लिए समस्या पैदा करता है क्योंकि वे समान नामों के साथ प्रतीकों को सम्मिलित करना चाहते हैं।

इसे हल करने के लिए, आप इलेक्ट्रॉन में नोड एकीकरण को बंद कर सकते हैं:

// मुख्य प्रक्रिया में। 

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

लेकिन अगर आप Node.js और इलेक्ट्रॉन एपीआई का उपयोग करने की क्षमता रखना चाहते हैं, तो आपको अन्य पुस्तकालयों को शामिल करने से पहले पेज में प्रतीकों का नाम बदलना होगा:

<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
स्रोत
@ Fran6 अगर मैं बाहरी पृष्ठ लोड कर रहा हूं तो मैं क्या कर सकता हूं? :(
— जार्जियोसड
यह काम किया लेकिन ऐसा करने के बाद मेरा इलेक्ट्रॉन ऐप बंद नहीं होगा - यानी, मैं वेब पेज से बाहर नहीं निकल सका।
— कथा 852150
34

बस इसी समस्या को लेकर आया था

npm install jquery --save

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

मेरे लिए काम किया

— धवल चौहान
स्रोत
यह वही है जो मेरा मूल उत्तर कहता है।
— ब्रूनो वाज़
हाय कैसे materialize.min.js cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/… के साथ भी ऐसा ही करें । .. कुछ इस तरह से <script> window.aterialize = window.Materialize = आवश्यकता ('Materialize'); </ script> ??? किसी की मदद कर सकते हैं
— Makjb lh
@BrunoVaz यह उत्तर क्लीनर है :)
— moeiscool
20

आप node-integration: falseBrowserWindow पर अंदर के विकल्प डाल सकते हैं ।

उदाहरण के लिए: window = new BrowserWindow({'node-integration': false});

— मुरिलो फेर्स
स्रोत
4
यह उन उपयोगकर्ताओं के लिए अच्छा समाधान है जिन्हें नोड एकीकरण की आवश्यकता नहीं है।
— एडम स्ज़्मिड
यह कमाल है, पूरी तरह से मेरे लिए काम करता है। धन्यवाद @ मुरिलो फेर्स। नोड-एकीकरण विकल्प क्या करता है?
— अहसानाली सुथार
3
काम नहीं कर रहा है @ 1.4, कृपया उपयोग करें: जीतने दो = नया BrowserWindow ({webPreferences: {nodeIntegration: false}})
— होली
14

एक अच्छा और साफ समाधान

  1. Npm का उपयोग करके jQuery स्थापित करें। ( npm install jquery --save)
  2. इसका इस्तेमाल करें: <script> let $ = require("jquery") </script>
— adgelbfish
स्रोत
8

मैं एक ही मुद्दे का सामना करता हूं और यह मेरे लिए काम करता है!

Npm का उपयोग करके jQuery स्थापित करें

$ npm install jquery

फिर निम्नलिखित तरीकों में से एक में jQuery शामिल करें।

स्क्रिप्ट टैग का उपयोग करना

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

बैबल का उपयोग करना

import $ from 'jquery';

वेबपैक का उपयोग करना

const $ = require('jquery');
— अब्राहम हर्नांडेज़
स्रोत
5

मुझे लगता है कि मैं आपके संघर्ष को समझता हूं मैंने इसे थोड़ा अलग तरीके से हल किया है। मैंने अपनी js फ़ाइल के लिए स्क्रिप्ट लोडर का उपयोग किया है जो jquery सहित है ।स्क्रिप्ट लोडर आपकी js फ़ाइल को लेता है और इसे आपके विक्रेता के शीर्ष पर संलग्न करता है। js फ़ाइल ने मेरे लिए यह जादू किया।

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

स्क्रिप्ट लोडर स्थापित करने के बाद इसे अपने बूट या एप्लिकेशन फ़ाइल में जोड़ें।

आयात 'स्क्रिप्ट! पथ / आपकी file.js';

— मर्टन डिकेन
स्रोत
4

ठीक है, यहाँ एक और विकल्प है, अगर आप एक रिश्तेदार चाहते हैं ...

<script> window.$ = window.jQuery = require('./assets/scripts/jquery-3.2.1.min.js') </script>
— aestrro
स्रोत
3

यदि आप Angular2 का उपयोग कर रहे हैं, तो आप इस कोड के साथ एक नई js फ़ाइल बना सकते हैं:

// jquery-electron.js

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

और इसे सीधे jquery पथ, inangular-cli.json के बाद डालें:

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "assets/js/jquery-electron.js",
    ...
    ...
]
— मैक्स
स्रोत
3

im निर्माण और इलेक्ट्रॉन के साथ कोणीय ऐप, मेरा समाधान निम्नलिखित था:

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

तो Jquery को angular.json से लोड किया जाता है यदि ब्राउज़र पर, अन्यथा यदि यह एक इलेक्ट्रान निर्मित एप है तो इसके बदले मॉड्यूल की आवश्यकता होगी।

यदि आप angular.json से आयात करने के बजाय index.html में jquery आयात करना चाहते हैं, तो निम्न समाधान का उपयोग करें:

<script src="path/to/jquery"></script>
<script>
    if ( typeof module === "object" && typeof module.exports === "object" ) {
      window.$ = window.jQuery = require('jquery');
    }
</script>
— कुजा ग्रेव
स्रोत
2

1.Install jQuery 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>
— एलेक्सी कोलोत्से
स्रोत
2

यह मेरे लिए काम करता है।

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

विचार करने के लिए बातें:

1) इसे खंड में ठीक पहले रखें </head>

2) </body>टैग से ठीक पहले Jquery.min.js या Jquery.js शामिल करें

— विशाल गोयल
स्रोत
0

आप निम्नलिखित कोड आज़मा सकते हैं:

mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration:false,
        }
});
— shuoGG
स्रोत
0

इस समस्या के लिए, JQuery और अन्य js का उपयोग करें जैसा कि आप वेब पेज में उपयोग कर रहे हैं। हालाँकि, इलेक्ट्रॉन में नोड एकीकरण है, इसलिए यह आपके जेएस ऑब्जेक्ट्स को नहीं ढूंढेगा। आपको module = undefinedतब तक सेट करना होगा जब तक कि आपके js ऑब्जेक्ट ठीक से लोड न हो जाएं। नीचे उदाहरण देखें

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

दिए गए जैसे आयात करने के बाद, आप JQueryइलेक्ट्रॉन में और अन्य चीजों का उपयोग करने में सक्षम होंगे ।

— किरण मनिया
स्रोत
0

बस निम्नलिखित आदेश के साथ Jquery स्थापित करें।

npm install --save jquery

उसके बाद कृपया js फ़ाइल में belew लाइन डालें जिसे आप Jquery का उपयोग करना चाहते हैं

let $ = require('jquery')
— मिलन हिरपारा
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.