নোডে ক্লায়েন্ট: আনকড রেফারেন্স এরিয়ার: প্রয়োজনীয় সংজ্ঞা দেওয়া হয়নি

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" নামে একটি ফাইল রয়েছে। সেই ফাইলটিতে আমার বিবৃতিও প্রয়োজন এবং সার্ভারের পাশে এটি ঠিক হওয়া উচিত কারণ আমি নোড চালাচ্ছি। তবে ক্লায়েন্টের পক্ষে এটি একটি সমস্যা হবে। আপনি কি মনে করেন?

— মাইটিমাউস

আমার মতো নবাবিদের জন্য (যারা এক সপ্তাহ আগে "এনএমপি" বানানও করতে পারেনি! :-), এটি বুঝতে সহায়ক হতে পারে যে ব্রাউসরিফাইয়ের --requireবিকল্পটি require()ক্লায়েন্টের পক্ষ থেকে সংজ্ঞায়িত হয়েছে। দেখুন: লিংকনলুপ.com

— browserifying-

@ স্টার্লিং আর্চার ... যদি এই জাতীয় 100 টি ফাইল থাকে ... আমরা এইচটিএমএল ডানদিকে লোড করা চালিয়ে রাখতে পারি না .........

— বড়দ্বাজ আর্যসোমায়াজুল

Answer 1

এটি require()ব্রাউজারে / ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্টে নেই বলে কারণ ।

এখন আপনাকে নিজের ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট স্ক্রিপ্ট পরিচালনা সম্পর্কে কিছু পছন্দ করতে হবে।

আপনার কাছে তিনটি বিকল্প রয়েছে:

1. <script>ট্যাগ ব্যবহার করুন ।
2. একটি কমনজেএস বাস্তবায়ন ব্যবহার করুন । নোড.জেএস এর মতো সিঙ্ক্রোনাস নির্ভরতা
3. একটি এএমডি বাস্তবায়ন ব্যবহার করুন ।

কমনজেএস ক্লায়েন্টের পাশ-বাস্তবায়নের মধ্যে রয়েছে:

(আপনার মোতায়েনের আগে তাদের বেশিরভাগের একটি বিল্ড স্টেপ প্রয়োজন)

1. ব্রাউজারফি - ব্রাউজারে আপনি বেশিরভাগ নোড.জেএস মডিউল ব্যবহার করতে পারেন। এটা আমার ব্যক্তিগত প্রিয়।
2. ওয়েবপ্যাক - সবকিছু করে (জেএস, সিএসএস ইত্যাদি বান্ডিল করে)। React.js এর তাত্পর্য দ্বারা জনপ্রিয় হয়েছে। এটির অসুবিধা শেখার বক্ররেখার জন্য কুখ্যাত।
3. রোলআপ - নতুন প্রতিযোগী। ES6 মডিউলগুলি পান। গাছ কাঁপানো ক্ষমতা (অব্যবহৃত কোড অপসারণ) অন্তর্ভুক্ত।

আপনি আমার ব্রাউজারিফাই বনাম (হ্রাস করা) অংশের তুলনা সম্পর্কে আরও পড়তে পারেন ।

এএমডি বাস্তবায়নের মধ্যে রয়েছে:

1. আবশ্যকজেএস - ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট বিকাশকারীদের মধ্যে খুব জনপ্রিয়। আমার স্বাদ এটির অ্যাসিনক্রোনাস প্রকৃতির কারণে নয়।

দ্রষ্টব্য, কোনটি দিয়ে যেতে হবে তা বেছে নেওয়ার জন্য আপনার অনুসন্ধানে আপনি বোভার সম্পর্কে পড়বেন । বোর শুধুমাত্র প্যাকেজ নির্ভরতার জন্য এবং সাধারণ জেএস এবং এএমডি এর মতো মডিউল সংজ্ঞাগুলিতে বিনা বিভাগে থাকে।

আশা করি এটি কিছুটা সাহায্য করবে।

Comments

আপনাকে অনেক ধন্যবাদ. আমি আলাদাভাবে একটি মিনি পরীক্ষা করেছি, এজন্য আমাকে প্রতিক্রিয়া জানাতে কিছুটা সময় নিয়েছিল। এই ম্যাজিকটি কীভাবে কাজ করেছে তা আমি নিশ্চিত হয়েছি তা নিশ্চিত করার জন্য আমি কয়েক মিনিটের মধ্যে কিছু প্রশ্ন নিয়ে ফিরে আসতে পারি। আমি শুধু সবকিছু একসাথে রাখতে চাই। আবার ধন্যবাদ. ব্রাউজরিফিকে রক বলে মনে হচ্ছে! :)

— মাইটিমাউস

আমি মনে করি তালিকায় জেএসপিএম যুক্ত করা উচিত।

— মার্টিজন

<script>কোনও নোডজেস প্যাকেজ ম্যানেজার ব্যবহার না করেই আমি ট্যাগটি ব্যবহার করে একটি প্রতিক্রিয়া শ্রেণি আমদানি করার একটি উদাহরণ পেতে পারি ?

— লুই বার্টনসিন

সিস্টেমজেএস এবং জেএসপিএম খুব উল্লেখযোগ্য বাদ পড়ে।

— আলুয়ান হাদাদ

হ্যাঁ। কম্পোনেন্টটি এখন github.com

— i_emmanuel

Answer 2

আমি একটি বৈদ্যুতিন পরিবেশ থেকে আসছি, যেখানে আমার একটি রেন্ডারার প্রক্রিয়া এবং প্রধান প্রক্রিয়ার মধ্যে আইপিসি যোগাযোগের প্রয়োজন। রেন্ডারার প্রক্রিয়া স্ক্রিপ্ট ট্যাগগুলির মধ্যে একটি HTML ফাইলে বসে এবং একই ত্রুটি উত্পন্ন করে। লাইন

const {ipcRenderer} = require('electron')

আনকড রেফারেন্স এরির নিক্ষেপ করে : প্রয়োজনীয় সংজ্ঞা দেওয়া হয় না

মূল প্রক্রিয়াটিতে ব্রাউজার উইন্ডোটি (যেখানে এই এইচটিএমএল ফাইলটি এম্বেড করা আছে) মূলত তৈরি হয়েছিল তখন নোড সংহতিকে সত্য হিসাবে নির্দিষ্ট করে আমি তার আশেপাশে কাজ করতে সক্ষম হয়েছি।

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

আপনাকে অনেক ধন্যবাদ. আমার ধারণা আমি ইউটিউব থেকে একই শপিং লিস্ট অ্যাপ্লিকেশন থেকে

— এসেছি হা হা হা

উজ্জ্বল - আপনার জন্য জাদুগতভাবে এগুলি একসাথে রাখার জন্য প্রারম্ভিকদের উপর নির্ভর করার পরিবর্তে এর মতো উত্তরগুলি খুঁজে পাওয়া ভাল।

— ঘোস্টবাইটস

ইলেক্ট্রন ব্যবহারকারীদের জন্য দুর্দান্ত উত্তর!

— thoni56

আশ্চর্যজনক। আমার জন্য বেশ সূক্ষ্ম কাজ করে। এছাড়াও, আমি শপিং লিস্ট অ্যাপ্লিকেশন ভিডিও থেকে খুব o /

— adahox_

Answer 3

ES6: এইচটিএমএলে প্রধান জেএস ফাইলটি অ্যাট্রিবিউট type="module"( ব্রাউজার সমর্থন ) ব্যবহার করে অন্তর্ভুক্ত করুন :

<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 লেখা আছে "মডিউল এড়ানোর নাম দুর্ঘটনায় করার জন্য একটি সুযোগ সৃষ্টি করে।" valআপনি উইন্ডো অবজেক্টে "ম্যানুয়ালি" রাখতে পারেন window.val = val। এখানে Plunker: Plunker: plnkr.co/edit/aDyjyMxO1PdNaFh7ctBT?p= পূর্বরূপ - এই সমাধানটি কাজ করে

— কামিল কিয়েসজেউস্কি

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>
   নোটের মতো লোড করুন!
   ব্যবহার করুন: -> "আপনার স্ক্রিপ্ট.জেএস" - এ (['মউডল-নাম']) প্রয়োজন
   প্রয়োজন নেই ('মুডল-নাম')
   কনস্ট {ipcRenderer require = প্রয়োজন (['বৈদ্যুতিন'])
   নয়: কনস্ট {ipcRenderer require = প্রয়োজনীয় ('বৈদ্যুতিন')

Comments

কখনও, কখনও "এখানে ক্লিক করুন" সুপারিশ করবেন না। সর্বোত্তম কেস, এটি একটি রিকরোল, তবে আমাদের এই লিঙ্কের শেষে কী অপেক্ষা করছে তা আমাদের কোনও ধারণা নেই।

— জিজিডিএক্স