नोड पर ग्राहक: अनट्रेक्टेड संदर्भ: आवश्यकता को परिभाषित नहीं किया गया है

Question

तो, मैं नोड / एक्सप्रेस + जेड कॉम्बो के साथ एक आवेदन लिख रहा हूं।

मेरे पास है client.js, जो क्लाइंट पर लोड है। उस फ़ाइल में मेरे पास कोड है जो अन्य जावास्क्रिप्ट फ़ाइलों से कार्य करता है। मेरा प्रयास था उपयोग करने का

var m = require('./messages');

messages.js(जैसे मैं सर्वर साइड में करता हूं) की सामग्री को लोड करने के लिए और बाद में उस फ़ाइल से कॉल फ़ंक्शन को लोड करने के लिए । हालाँकि, requireक्लाइंट पक्ष पर परिभाषित नहीं है, और यह प्रपत्र की एक त्रुटि फेंकता है Uncaught ReferenceError: require is not defined।

ये अन्य जेएस फाइलें क्लाइंट पर रनटाइम पर भी लोड होती हैं क्योंकि मैं वेबपेज के हेडर पर लिंक रखता हूं। इसलिए ग्राहक उन सभी कार्यों को जानता है जो इन अन्य फ़ाइलों से निर्यात किए जाते हैं।

मैं इन अन्य जेएस फ़ाइलों (जैसे messages.js) को मुख्य client.jsफ़ाइल में सर्वर से सॉकेट खोलने वाले इन कार्यों को कैसे कॉल करूं ?

Comments

आप बस क्यों नहीं <script src="messages.js"></script>और उसके बाद उन्हें फोन करते हैं?

— स्टर्लिंग आर्चर

शायद यह एक समाधान हो सकता है, लेकिन एक और बात है जो मुझे चिंतित करती है। मेरे पास एक फाइल भी है जिसे "अभ्यावेदन .js" कहा जाता है जो ग्राहक और सर्वर के लिए सामान्य है। उस फ़ाइल में मुझे भी स्टेटमेंट की आवश्यकता होती है और सर्वर साइड पर यह ठीक होना चाहिए क्योंकि मैं नोड चला रहा हूं। हालाँकि, क्लाइंट की तरफ यह एक समस्या होगी। तुम क्या सोचते हो?

— माइटीहाउस 18

मेरे जैसे नए लोगों के लिए (जो एक हफ्ते पहले "npm" भी नहीं लिख सकते थे! :-), यह समझना मददगार हो सकता है कि ब्राउजर का --requireविकल्प require()क्लाइंट की तरफ से परिभाषित किया जाए। देखें: lincolnloop.com/blog/speedy-browserifying-multiple-bundles

— Hephaestus

@Sterling Archer ... अगर ऐसी 100 फाइलें हैं ... हम HTML में लोड नहीं रख सकते, तो .........

— बाराद्वज आर्यसोमयजुला

Answer 1

इसका कारण यह है कि require()ब्राउज़र / क्लाइंट-साइड जावास्क्रिप्ट में मौजूद नहीं है।

अब आपको अपने क्लाइंट-साइड जावास्क्रिप्ट स्क्रिप्ट प्रबंधन के बारे में कुछ विकल्प चुनने होंगे।

आपके पास तीन विकल्प हैं:

1. <script>टैग का उपयोग करें ।
2. एक कॉमन जेएसएस कार्यान्वयन का उपयोग करें । Node.js जैसी तुल्यकालिक निर्भरताएँ
3. एक AMD कार्यान्वयन का उपयोग करें ।

CommonJS क्लाइंट पक्ष-कार्यान्वयन में शामिल हैं:

(उनमें से अधिकांश को आपको तैनात करने से पहले एक निर्माण कदम की आवश्यकता होती है)

1. Browserify - आप ब्राउज़र में अधिकांश Node.js मॉड्यूल का उपयोग कर सकते हैं। यह मेरा निजी पसंदीदा है।
2. वेबपैक - सब कुछ करता है (बंडल जेएस, सीएसएस, आदि)। React.js के उछाल से लोकप्रिय हुआ। अपने कठिन सीखने की अवस्था के लिए कुख्यात।
3. रोलअप - नए दावेदार। ES6 मॉड्यूल का लाभ उठाता है। इसमें पेड़-झटकों की क्षमता (अप्रयुक्त कोड हटाता है) शामिल है।

आप Browserify vs (पदावनत) घटक की मेरी तुलना के बारे में अधिक पढ़ सकते हैं ।

AMD कार्यान्वयन में शामिल हैं:

1. आवश्यकताएँ - क्लाइंट-साइड जावास्क्रिप्ट डेवलपर्स के बीच बहुत लोकप्रिय है। अपने अतुल्यकालिक स्वभाव के कारण मेरा स्वाद नहीं।

ध्यान दें, आपकी खोज में यह चुनने के लिए कि किसके साथ जाना है, आप बोवर के बारे में पढ़ेंगे । बोवर केवल पैकेज निर्भरता के लिए है और कॉमनजस और एएमडी जैसी मॉड्यूल परिभाषाओं पर अनोपिनियेटेड है।

आशा है कि यह कुछ मदद करता है।

Comments

आपका बहुत बहुत धन्यवाद। मैंने अलग से एक मिनी परीक्षण किया, यही कारण है कि मुझे प्रतिक्रिया देने में थोड़ा समय लगा। मैं कुछ ही मिनटों में कुछ सवालों के साथ वापस आ सकता हूं, यह सुनिश्चित करने के लिए कि मैं समझता हूं कि इस जादू ने कैसे काम किया। मैं बस सब कुछ एक साथ रखना चाहता हूं। एक बार फिर धन्यवाद। Browserify लगता है रॉक! :)

— माइटीहाउस

मुझे लगता है कि JSPM को सूची में जोड़ा जाना चाहिए।

— मार्टिअन

क्या मुझे <script>नोडज पैकेज प्रबंधक के उपयोग के बिना एक प्रतिक्रिया वर्ग आयात करने के लिए टैग का उपयोग करने का एक उदाहरण मिल सकता है ?

— लूई बर्टोन्सिन

SystemJS और JSPM बहुत उल्लेखनीय चूक हैं।

— एलुआन हदद

हाँ। घटक अब पदावनत github.com/componentjs/component

— i_emmanuel

Answer 2

मैं एक इलेक्ट्रॉन वातावरण से आ रहा हूं, जहां मुझे एक रेंडर प्रक्रिया और मुख्य प्रक्रिया के बीच आईपीसी संचार की आवश्यकता है। रेंडरर प्रक्रिया स्क्रिप्ट टैग के बीच HTML फ़ाइल में बैठती है और वही त्रुटि उत्पन्न करती है। रेखा

const {ipcRenderer} = require('electron')

बिना संदर्भ दिए गए संदर्भ को फेंकता है : आवश्यकता को परिभाषित नहीं किया गया है

जब ब्राउज़र विंडो (जहां यह HTML फ़ाइल एम्बेडेड है) मूल रूप से मुख्य प्रक्रिया में बनाई गई थी, तब नोड एकीकरण को सही रूप में निर्दिष्ट करके मैं इसके चारों ओर काम करने में सक्षम था।

function createAddItemWindow() {
//Create new window
addItemWindown = new BrowserWindow({
    width: 300,
    height: 200,
    title: 'Add Item',

    //The lines below solved the issue
    webPreferences: {
        nodeIntegration: true
    }
})}

मेरे लिए यह समस्या हल हो गई। समाधान प्रस्तावित किया गया था यहाँ । आशा है कि यह किसी और की मदद करता है। चीयर्स।

Comments

आपका बहुत बहुत धन्यवाद। मुझे लगता है कि मैं उसी शॉपिंग लिस्ट ऐप वीडियो से आता हूं, जो YouTube hahaha से है

— लुब्रीक

शानदार - शुरुआत करने वालों पर भरोसा करने के बजाय इस तरह से जवाब खोजने के लिए अच्छा है कि यह सब आपके लिए एक साथ रखा जाए।

— घोस्टबाइट्स

इलेक्ट्रॉन उपयोगकर्ताओं के लिए उत्कृष्ट उत्तर!

— thoni56

गजब का। मेरे लिए बहुत अच्छा काम करता है। इसके अलावा, मैं खरीदारी सूची ऐप वीडियो भी ओ /

— adahox_

Answer 3

ES6: HTML में विशेषता type="module"( ब्राउज़र समर्थन ) का उपयोग करके मुख्य js फ़ाइल शामिल है :

<script type="module" src="script.js"></script>

और script.jsफ़ाइल में उस तरह की एक और फ़ाइल शामिल है:

import { hello } from './module.js';
...
// alert(hello());

अंदर शामिल फ़ाइल ( module.js) में आपको फ़ंक्शन / वर्ग को निर्यात करना होगा जिसे आप आयात करेंगे

export function hello() {
    return "Hello World";
}

यहाँ काम कर उदाहरण ।

Comments

यहाँ @Curse stackoverflow.com/a/44591205/860099 लिखा है "मॉड्यूल नाम टकराने से बचने की गुंजाइश बनाता है।" sou आप "मैन्युअल रूप से" valविंडो ऑब्जेक्ट में डाल सकते हैं window.val = val। यहाँ प्लंकर है: प्लंकर: plnkr.co/edit/aDyjyMxO1PdNaFh7ctBT?p=preview - यह समाधान काम करता है

— कामिल कीलवेकस्की

Answer 4

मेरे मामले में मैंने एक और समाधान का उपयोग किया।

जैसा कि प्रोजेक्ट को कॉमन जेजे की आवश्यकता नहीं है और इसमें ES3 संगतता (मॉड्यूल समर्थित नहीं है) होना चाहिए, आपको बस अपने कोड से सभी निर्यात और आयात स्टेटमेंट निकालने होंगे , क्योंकि आपके tsconfig में यह शामिल नहीं है

"module": "commonjs"

लेकिन अपनी संदर्भित फ़ाइलों में आयात और निर्यात विवरण का उपयोग करें

import { Utils } from "./utils"
export interface Actions {}

अंतिम जनरेट कोड में हमेशा (कम से कम टाइपस्क्रिप्ट 3.0 के लिए) ऐसी लाइनें होंगी

"use strict";
exports.__esModule = true;
var utils_1 = require("./utils");
....
utils_1.Utils.doSomething();

Answer 5

यहां तक ​​कि इस का उपयोग करने से भी काम नहीं चलेगा, मुझे लगता है कि सबसे अच्छा समाधान ब्राउज़र करना है:

module.exports = {
  func1: function () {
   console.log("I am function 1");
  },
  func2: function () {
    console.log("I am function 2");
  }
};

-getFunc1.js-
var common = require('./common');
common.func1();

Answer 6

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

1. इस फाइल को सेव करें https://requirejs.org/docs/release/2.3.5/minified/require.js
   
2. इस
   <script data-main="your-Scrpt.js" src="require.js"></script>
   नोट की तरह अपने HTML में लोड करें!
   उपयोग: -> "your-script.js" में (['moudle-name') की आवश्यकता होती है
   आवश्यकता नहीं ('नाम-नाम')
   const {ipcRenderer} = आवश्यकता (['इलेक्ट्रॉन'])
   नहीं: const {ipcRenderer} = आवश्यकता ('इलेक्ट्रॉन')

Comments

कभी, कभी "यहाँ क्लिक करें", कभी सलाह। सबसे अच्छा मामला, यह एक रिकॉल है, लेकिन हमारे पास कोई भी विचार नहीं है जो भी उस लिंक के अंत में हमें इंतजार कर रहा है।

— ggdx