আমি কখন ES6 আমদানির জন্য কোঁকড়া ধনুর্বন্ধনী ব্যবহার করা উচিত?

Question

এটি সুস্পষ্ট বলে মনে হচ্ছে তবে আমি ES6- এ কোনও একক মডিউল আমদানির জন্য কোঁকড়া ধনুর্বন্ধনী কখন ব্যবহার করব সে সম্পর্কে নিজেকে কিছুটা বিভ্রান্ত মনে হয়েছিল। উদাহরণস্বরূপ, প্রতিক্রিয়া-নেটিভ প্রকল্পে আমি কাজ করছি, আমার কাছে নিম্নলিখিত ফাইল এবং এর সামগ্রী রয়েছে:

initialState.js

var initialState = {
    todo: {
        todos: [
            {id: 1, task: 'Finish Coding', completed: false},
            {id: 2, task: 'Do Laundry', completed: false},
            {id: 2, task: 'Shopping Groceries', completed: false},
        ]
    }
};

export default initialState;

টোডোরডিউস.আরজে, আমাকে কোঁকড়া ধনুর্বন্ধনী ছাড়াই এটি আমদানি করতে হবে:

import initialState from './todoInitialState';

যদি আমি initialStateকোঁকড়ানো ধনুর্বন্ধনী বন্ধন করা হয়, আমি নিম্নলিখিত কোড লাইন জন্য নিম্নলিখিত ত্রুটি পেতে:

সংজ্ঞায়িত সম্পত্তি টুডো পড়তে পারে না

TodoReducer.js:

export default function todos(state = initialState.todo, action) {
// ...
}

কোঁকড়া ধনুর্বন্ধনী সঙ্গে আমার উপাদানগুলিতেও অনুরূপ ত্রুটি ঘটে। আমি ভাবছিলাম কখন আমার একক আমদানির জন্য কোঁকড়া ধনুর্বন্ধনী ব্যবহার করা উচিত, কারণ স্পষ্টতই, একাধিক উপাদান / মডিউল আমদানি করার সময়, আপনাকে সেগুলি কোঁকড়া ধনুর্বন্ধনীতে আবদ্ধ করতে হবে, যা আমি জানি।

সম্পাদনা:

এত পোস্ট এখানে আমার প্রশ্নের উত্তর না, পরিবর্তে আমি জিজ্ঞাসা করছি যখন আমি বা আমদানি করার জন্য কোঁকড়া ধনুর্বন্ধনী ব্যবহার করা উচিত নয় উচিত একক মডিউল, অথবা আমি ES6 একটি একক মডিউল আমদানি করার জন্য কোঁকড়া ধনুর্বন্ধনী ব্যবহার না করা উচিত (এই দৃশ্যত নয় কেস, আমি যেমন কোঁকড়া ধনুর্বন্ধনী সঙ্গে একক আমদানি দেখেছি)

Comments

সম্ভাব্য সদৃশ জাভাস্ক্রিপ্ট আমদানি সিনট্যাক্স সঙ্গে বন্ধনী ব্যবহার করে

— Nils

না, এটা আলাদা। ধন্যবাদ

— টনিজিডব্লিউ

ES6 মডিউল রফতানি বিকল্প বা জাভাস্ক্রিপ্টের

— বার্গি

Answer 1

এটি একটি ডিফল্ট আমদানি :

// B.js
import A from './A'

এটা শুধুমাত্র কাজ করে Aগেছে ডিফল্ট রপ্তানি :

// A.js
export default 42

এই ক্ষেত্রে আমদানি করার সময় আপনি কোন নামটি অর্পণ করেছেন তা বিবেচ্য নয়:

// B.js
import A from './A'
import MyA from './A'
import Something from './A'

কারণ এটা সবসময় সমাধান হবে যাই হোক না কেন হয় ডিফল্ট রপ্তানি এর A।

---

এটি নামযুক্ত আমদানি বলা হয়A :

import { A } from './A'

এটি কেবল তখনই কাজ করে যদি নামে পরিচিতA একটি রফতানি থাকেA :

export const A = 42

এই ক্ষেত্রে নামটি গুরুত্বপূর্ণ কারণ আপনি এটির রফতানীর নামে একটি নির্দিষ্ট জিনিস আমদানি করছেন :

// B.js
import { A } from './A'
import { myA } from './A' // Doesn't work!
import { Something } from './A' // Doesn't work!

এই কাজটি করতে, আপনি এতে সম্পর্কিত নামযুক্ত রফতানি যুক্ত করতে হবে A:

// A.js
export const A = 42
export const myA = 43
export const Something = 44

---

একটি মডিউলে কেবল একটি ডিফল্ট রফতানি থাকতে পারে তবে যত নামী রফতানি আপনি চান (শূন্য, এক, দুই বা অনেক) many আপনি এগুলি একসাথে আমদানি করতে পারেন:

// B.js
import A, { myA, Something } from './A'

এখানে, আমরা ডিফল্ট রপ্তানি আমদানি Aও নামে রপ্তানির নামক myAএবং Somethingযথাক্রমে।

// A.js
export default 42
export const myA = 43
export const Something = 44

আমদানি করার সময় আমরা তাদের সমস্ত আলাদা আলাদা নামও নির্ধারণ করতে পারি:

// B.js
import X, { myA as myX, Something as XSomething } from './A'

---

আপনি সাধারণত মডিউল থেকে যা প্রত্যাশা করেন তার জন্য ডিফল্ট রফতানিগুলি ব্যবহৃত হয়। নামকৃত রফতানিগুলি এমন উপযোগের জন্য ব্যবহার করা হয় যা সহজে কাজে লাগে তবে সর্বদা প্রয়োজনীয় হয় না। তবে কীভাবে জিনিস রফতানি করবেন তা চয়ন করা আপনার উপর নির্ভর করে: উদাহরণস্বরূপ, মডিউলটির কোনও ডিফল্ট রফতানি নাও থাকতে পারে।

এটি ES মডিউলগুলির একটি দুর্দান্ত গাইড, ডিফল্ট এবং নামযুক্ত রফতানির মধ্যে পার্থক্য ব্যাখ্যা করে।

Comments

একটি মডিউল পৃথক রফতানি export const myA = 43; export const Something = 44;পাশাপাশি আছে কোন পতন আছে export default { myA, Something }? সুতরাং আপনি যখন আমদানি করেন আপনি import A from './A';মডিউলটির প্রতিটি কিছুর জন্যই পারেন , বা import { Something } from './A';কেবলমাত্র মডিউলটির কিছু পাবেন

— মাইকেল

এটা তোলে জরিমানা, কিন্তু তার আগেই একটা একক বস্তুর সব নামে রপ্তানির দখল জন্য একটি বাক্য গঠন হল: import * as AllTheThings।

— ড্যান আব্রামভ

পরিষ্কারভাবে ব্যাখ্যা করা হয়েছে! আমি আশা করি আমি এই উত্তরটি দ্বিগুণ করতে পারব।

— উইল্লা

এই সম্পর্কে কি - import 'firebase/storage';বা import 'rxjs/add/operator/map';। আসলে কি করছে?

— KYW

@ কেইউ: এটি মডিউলটি কার্যকর করে তবে রফতানি করা মানটিকে উপেক্ষা করে। পার্শ্ব প্রতিক্রিয়া জন্য দরকারী।

— ড্যান আব্রামভ

Answer 2

টিএল; ডিআর : আপনি যদি কোনও ডিফল্ট এক্সপোর্ট আমদানি করতে চান তবে কোঁকড়া ধনুর্বন্ধনী ব্যবহার করা হয়।

আরও বিশদের জন্য উপরের ড্যান আব্রামভসের উত্তর দেখুন।

Comments

এই উত্তরটি অন্য উত্তর উল্লেখ করার পাশাপাশি অবদান রাখে?

— ফ্রাঙ্কস্যান্ডস

আমি আগে এটি পাঠিয়েছি এবং পরে এটি সম্পাদনা করেছি, অসুবিধার জন্য দুঃখিত

— ড্যানিয়েল শ্মিট

আমি বোকা হওয়ার চেষ্টা করছিলাম না, আমি সবচেয়ে নম্রভাবে এটিকে বাক্যাংশ দেওয়ার চেষ্টা করেছি। আমি কেবল ঘোরাফেরা করেছি কেন এই উত্তর এখানে ছিল।

— ফ্রাঙ্কস্যান্ডস

আমি মনে করি এটি মতামতের বিষয়, তবে আমি এটি খুব সহায়ক বলে মনে করেছি। আমি উপরের উত্তরটি ঝাঁকিয়েছি এবং এটি আমার যোগাযোগের চেষ্টা করছে বলে মনে করেছিল তা নিশ্চিত করেছে।

— মর্চার্ড

Answer 3

আমি বলব importES6 কীওয়ার্ডের উল্লেখ করার মতো একটি তারকাচিহ্নিত স্বরলিপিও রয়েছে ।

যদি আপনি লগ মিক্স কনসোল করার চেষ্টা করেন:

import * as Mix from "./A";
console.log(Mix);

তুমি পাবে:

আমি কখন ES6 আমদানির জন্য কোঁকড়া ধনুর্বন্ধনী ব্যবহার করা উচিত?

যখন মডিউলটি থেকে কেবলমাত্র নির্দিষ্ট উপাদানগুলির দরকার হয় তখন বন্ধনীগুলি সোনার হয়, যা ওয়েবপ্যাকের মতো বান্ডিলারের জন্য ছোট পদচিহ্নগুলি তৈরি করে।

Comments

আপনার চিত্রটি এই নির্দিষ্ট উত্তরের জন্য উপযুক্ত চিট শীট।

— রোদ্রিরোকর

হয় import * as Mix from "./A";এবং import A as Mix from "./A";একই?

— শফিজাদেহ

Answer 4

উপরের ড্যান আব্রামভ উত্তর ডিফল্ট রফতানি এবং নামযুক্ত রফতানি সম্পর্কে ব্যাখ্যা করে ।

কোনটি ব্যবহার করবেন?

ডেভিড হারম্যানের উদ্ধৃতি দিয়ে : ইসিএমএসক্রিপ্ট 6 একক / ডিফল্ট রফতানির শৈলীর পক্ষে এবং ডিফল্ট আমদানিতে সবচেয়ে মধুর সিনট্যাক্স দেয়। নামযুক্ত রফতানি আমদানি করা এমনকি সামান্য কম সংক্ষিপ্ত হওয়া উচিত।

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

আপনি যা পছন্দ করেন সামগ্রিকভাবে ব্যবহার করুন।

অতিরিক্ত

ডিফল্ট রফতানি আসলে নামযুক্ত ডিফল্ট সহ একটি রফতানি রফতানি, তাই ডিফল্ট রফতানি হিসাবে আমদানি করা যায়:

import {default as Sample} from '../Sample.js';

Comments

Additionalলাইন ভাল তথ্য। import A from './A'আপনি যেমন নাম সংজ্ঞায়িত না করে রফতানি করছেন তা বিবেচ্য নয় export default 42।

— পিজিটি

দয়া করে ডেভিড হারম্যানের উক্তিটির ভুল ব্যাখ্যা না করে তা নিশ্চিত করুন। এর অর্থ এই নয় যে " এটি সর্বদা ইএস 6 এ একক / ডিফল্ট রফতানি ব্যবহারের পক্ষে হয় ", বরং " একক রফতানি এত সাধারণ যেহেতু , ইএস 6 ডিফল্টকে সেরা সমর্থন করে এবং আমরা তাদেরকে মধুরতম সিনট্যাক্স দিয়েছি "।

— বার্গি

Answer 5

আপনি যদি importনোড মডিউল, অবজেক্টস এবং ডেস্ট্রাকচারিংয়ের জন্য কেবল সিনট্যাক্স চিনির মতো মনে করেন তবে আমি এটি বেশ স্বজ্ঞাত মনে করি।

// bar.js
module = {};

module.exports = { 
  functionA: () => {},
  functionB: ()=> {}
};

 // really all that is is this:
 var module = { 
   exports: {
      functionA, functionB
   }
  };

// then, over in foo.js

// the whole exported object: 
var fump = require('./bar.js'); //= { functionA, functionB }
// or
import fump from './bar' // same thing, object functionA and functionB props


// just one prop of the object
var fump = require('./bar.js').functionA;

// same as this, right?
var fump = { functionA, functionB }.functionA;

// and if we use es6 destructuring: 
var { functionA } =  { functionA, functionB };
// we get same result

// so, in import syntax:
import { functionA } from './bar';

Answer 6

importবিবৃতিতে কোঁকড়া ধনুর্বন্ধনী ব্যবহার বুঝতে , প্রথমে, আপনাকে ES6-এ প্রবর্তিত ধ্বংসাত্মক ধারণাটি বুঝতে হবে

1. অবজেক্ট ডেস্ট্রাকচারিং

   var bodyBuilder = {
     firstname: 'Kai',
     lastname: 'Greene',
     nickname: 'The Predator'
   };
   
   var {firstname, lastname} = bodyBuilder;
   console.log(firstname, lastname); //Kai Greene
   
   firstname = 'Morgan';
   lastname = 'Aste';
   
   console.log(firstname, lastname); // Morgan Aste

2. অ্যারে ধ্বংস

   var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA'];
   
   console.log(firstGame); // Gran Turismo

   তালিকার মিলটি ব্যবহার করে

     var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA'];
     console.log(secondGame); // Burnout

   স্প্রেড অপারেটর ব্যবহার করে

   var [firstGame, ...rest] = ['Gran Turismo', 'Burnout', 'GTA'];
   console.log(firstGame);// Gran Turismo
   console.log(rest);// ['Burnout', 'GTA'];

এখন যে আমরা আমাদের পথ ছাড়লাম , ES6 এ আপনি একাধিক মডিউল রফতানি করতে পারেন। তারপরে আপনি নীচের মতো অবজেক্ট ডেস্ট্রাকচারিং ব্যবহার করতে পারেন

ধরে নেওয়া যাক আপনার কাছে একটি মডিউল আছে module.js

    export const printFirstname(firstname) => console.log(firstname);
    export const printLastname(lastname) => console.log(lastname);

আপনি রফতানি ফাংশনগুলিতে আমদানি করতে চান index.js;

    import {printFirstname, printLastname} from './module.js'

    printFirstname('Taylor');
    printLastname('Swift');

আপনি এর মতো বিভিন্ন ভেরিয়েবলের নামও ব্যবহার করতে পারেন

    import {printFirstname as pFname, printLastname as pLname} from './module.js'

    pFname('Taylor');
    pLanme('Swift');

Comments

আপনি যেহেতু ডেস্ট্রাকচারিংয়ের সাথে তুলনা import {printFirstname as pFname, printLastname as pLname} from './module.js'var foo = {printFirstname: 'p_f_n', printLastname: 'p_l_n'}; var { printFirstname:pFname, printLastname: pLname } = foo; pFname('Taylor'); pLname('Swift');

— দেখিয়ে চলেছেন

শরীরচর্চা ফ্যান?

— তুষার পান্ডে

@ তুষারপাণ্ডে আমি একজন দেহ নির্মাতা

— টাইপান

আমি আমদানির কোনও ব্যাখ্যায় এবং কোঁকড়া বনাম ব্যবহার না করে কখন ব্যবহার করব তা মনে করি আপনি যদি অবজেক্ট ডেস্ট্রাক্টিংয়ের কথা উল্লেখ না করেন তবে আপনি সত্যিই সবচেয়ে ভাল ব্যাখ্যা দিচ্ছেন না। একবার আমি ধ্বংসাত্মক সম্পর্কে জানতে পেরে আমি কখনই কোঁকড়াটি ব্যবহার করব না সে সম্পর্কে কখনই ভাবিনি, এটি কেবল স্বজ্ঞাগতভাবে অর্থে তৈরি হয়েছিল।

— এরিক বিশার্ড

Answer 7

সংক্ষিপ্তসার ES6মডিউল:

রপ্তানি পণ্য:

আপনার কাছে 2 ধরণের রফতানি রয়েছে:

1. নামকরণ রফতানি
2. ডিফল্ট রফতানি, মডিউল প্রতি সর্বাধিক 1

বাক্য গঠন:

// Module A
export const importantData_1 = 1;
export const importantData_2 = 2;
export default function foo () {}

---

আমদানি:

রপ্তানি ধরণ (অর্থাত নামকরণ বা ডিফল্ট রপ্তানি) কিভাবে আমদানি কিছু প্রভাবিত:

1. নামযুক্ত রফতানির জন্য আমাদের কোঁকড়া ধনুর্বন্ধনী এবং সঠিক নামটি ঘোষণাপত্র হিসাবে (যেমন ভেরিয়েবল, ফাংশন বা শ্রেণি) রফতানি করা হয়েছিল তা ব্যবহার করতে হবে।
2. একটি ডিফল্ট রফতানির জন্য আমরা নামটি চয়ন করতে পারি।

বাক্য গঠন:

// Module B, imports from module A which is located in the same directory

import { importantData_1 , importantData_2  } from './A';  // for our named imports

// syntax single named import: 
// import { importantData_1 } 

// for our default export (foo), the name choice is arbitrary
import ourFunction from './A';   

আগ্রহের বিষয়:

1. নামযুক্ত রফতানির জন্য রফতানির মিলের নামের সাথে কোঁকড়ানো ধনুর্বন্ধনীগুলির মধ্যে কমা দ্বারা পৃথক তালিকা ব্যবহার করুন ।
2. ডিফল্ট রফতানির জন্য কোঁকড়ানো ধনুর্বন্ধনী ছাড়া আপনার পছন্দের একটি নাম ব্যবহার করুন।

ওরফে:

আপনি যখনই কোনও নামকরণকৃত আমদানির নাম পরিবর্তন করতে চান এটি এলিয়াসের মাধ্যমে সম্ভব । এর জন্য বাক্য গঠনটি নিম্নলিখিত:

import { importantData_1 as myData } from './A';

এখন আমরা আমদানি করেছি importantData_1 তবে সনাক্তকারীটি এর myDataপরিবর্তে importantData_1।

Answer 8

সাধারণত যখন আপনি কোনও ফাংশন রফতানি করেন তখন আপনাকে {use ব্যবহার করতে হবে

if you have export const x 

তুমি ব্যাবহার কর import {x} from ''

if you use export default const x 

আপনি import X from '' এখানে ব্যবহার করতে হবে আপনি এক্স পরিবর্তন করতে পারেন যাই হোক না কেন পরিবর্তনশীল চান পরিবর্তন করতে পারেন

Answer 9

কোঁকড়া ধনুর্বন্ধনী ({}) নামকরণ বাইন্ডিং আমদানি করতে ব্যবহৃত হয় এবং এর পিছনে ধারণাটি হ'ল ডিস্ট্রাকচারিং অ্যাসাইনমেন্ট

আমদানির বিবৃতিটি উদাহরণের সাথে কীভাবে কাজ করে তার একটি সহজ বীক্ষণ আমার নিজের উত্তরটিতে জাভাস্ক্রিপ্ট আমদানিতে আমরা কখন '{?' ব্যবহার করব?

Comments

আপনি অবশ্যই সেরা সংক্ষিপ্ত উত্তরের জন্য আমার ভোট পান!

— এরিক বিশার্ড

Answer 10

কোঁকড়া ধনুর্বন্ধনী শুধুমাত্র রফতানির নামকরণ করা হলে আমদানির জন্য ব্যবহৃত হয়। যদি রফতানিটি ডিফল্ট হয় তবে কোঁকড়ানো ধনুর্বন্ধনীগুলি আমদানির জন্য ব্যবহার করা হবে না।

Answer 11

একটি ডিফল্ট রফতানির জন্য আমরা যখন আমদানি করি তখন {use ব্যবহার করি না।

যেমন

player.js

export default vx;

index.js

import vx from './player';

index.js

player.js

আমরা যদি রফতানি করি তা যদি আমদানি করতে চান তবে আমরা * ব্যবহার করি