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

Question

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

import React, { Component, PropTypes } from 'react';

উপরোক্ত পদ্ধতি এবং নিম্নলিখিতগুলির মধ্যে পার্থক্য কী?

import React, Component, PropTypes from 'react';

Comments

উত্তরটি ডকুমেন্টেশনে রয়েছে

— অ্যাডেনিও

মডিউলটি থেকে আমদানির সদস্যরা কোঁকড়ানো

— বদ্ধ থাকে

এছাড়াও জাভাস্ক্রিপ্ট (ES6) দেখুন, রফতানি বনাম বনাম রফতানি ডিফল্ট

— বার্গি

হা। যদি আমরা সমস্ত সময় নির্মূল করি তবে কেউ "আরটিএফএম" দিয়ে যুক্তিযুক্ত কোনও উত্তর দিতে পারে, এমনকি জোন স্কিটির ছয়টিরও কম সংখ্যা থাকতে পারে। ; ^)

— রাফিন

Answer 1

import React, { Component, PropTypes } from 'react';

এটি বলে:

নামের অধীনে থেকে ডিফল্ট রফতানি আমদানি করুন'react'React এবং আমদানি নামে রপ্তানির Componentএবং PropTypesএকই নামের অধীনে।

এটি দুটি সাধারণ বাক্য গঠনকে সংযুক্ত করে যা আপনি সম্ভবত দেখেছেন

import React from 'react';
import { Component, PropTypes } from 'react';

প্রথমটি ডিফল্ট রফতানি আমদানি ও নামকরণের জন্য ব্যবহৃত হচ্ছে, দ্বিতীয়টি নির্দিষ্ট নামযুক্ত রফতানি আমদানি করার জন্য।

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

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

import name from "module-name";

এবং বলেছিলেন name"" সেই বস্তুর নাম যা আমদানিকৃত মানগুলি গ্রহণ করবে। " তবে এটি বিভ্রান্তিকর এবং ভুল; প্রথম সব, শুধুমাত্র আছে এক আমদানি মূল্য রয়েছে, যা "গৃহীত" হবে (কেন কেবল "অর্পণ করা", বা "উল্লেখ করার জন্য ব্যবহৃত হবে না") name, এবং এই ক্ষেত্রে আমদানি মানটি মডিউল থেকে ডিফল্ট রফতানি হয় ।

এটি ব্যাখ্যা করার আরেকটি উপায় হ'ল উপরের আমদানিটি হুবহু অভিন্ন note

import { default as name } from "module-name";

এবং ওপির উদাহরণটি হুবহু মিলে যায়

import { default as React, Component, PropTypes } from 'react';

এমডিএন ডকুমেন্টেশন উদাহরণটি প্রদর্শন করতে গিয়েছিল

import MyModule, {foo, bar} from "my-module.js";

এবং দাবি করেছে যে এটির অর্থ

একটি সম্পূর্ণ মডিউল এর বিষয়বস্তু আমদানি করুন, কিছু স্পষ্টভাবে নামকরণ সহ। এটি সেন্সর myModule(sic), fooএবং barবর্তমান সুযোগে into নোট করুন fooএবং myModule.fooহিসাবে একই, একইbar এবংmyModule.bar

এমডিএন এখানে কী বলেছে, এবং অন্য এমডিএন কী ভুল এমডিএন ডকুমেন্টেশনের উপর ভিত্তি করে দাবি করে, তা একেবারেই ভুল, এবং এটি অনুমানের পূর্ববর্তী সংস্করণের উপর ভিত্তি করে হতে পারে। এটি আসলে যা করে তা হ'ল

ডিফল্ট মডিউল রফতানি এবং কিছু স্পষ্টভাবে নামযুক্ত রফতানি আমদানি করুন। এই টিপে MyModule, fooএবং barবর্তমান সুযোগ মধ্যে। রপ্তানি নাম fooএবং barহয় না মাধ্যমে অ্যাক্সেসযোগ্যMyModule , যা ডিফল্ট রফতানি, সমস্ত রফতানিতে কিছু ছাতা নয়।

(ডিফল্ট মডিউল এক্সপোর্টটি export defaultসিনট্যাক্সের সাথে রফতানি করা মান , যা হতে পারে export {foo as default}।)

এমডিএন ডকুমেন্টেশন লেখকরা নিম্নলিখিত ফর্মটি নিয়ে বিভ্রান্ত হয়ে থাকতে পারেন:

import * as MyModule from 'my-module';

এটি সমস্ত রফতানি আমদানি করে my-moduleএবং নাম হিসাবে এগুলি অ্যাক্সেসযোগ্য করে তোলে MyModule.name। ডিফল্ট রফতানি হিসাবে অ্যাক্সেসযোগ্য MyModule.default, যেহেতু ডিফল্ট রফতানি নাম সহ অন্য নামের রফতানি ছাড়া আর কিছুই নয় default। এই সিনট্যাক্সে, নামমাত্র রফতানীর কেবলমাত্র একটি উপসেট আমদানির কোনও উপায় নেই, যদিও নামযুক্ত রফতানিগুলির সাথে এক সাথে যদি একটি থাকে তবে ডিফল্ট রফতানি আমদানি করতে পারে

import myModuleDefault, * as myModule from 'my-module';

Comments

বাবেল গ্রহণ করে from '/path/to/my-module.js', যদিও আমি ব্যক্তিগতভাবে ব্যবহার করি from '/path/to/my-module'।

— রোহউই

এ জাতীয় বিশদ ব্যাখ্যার সাথে আপনার কীভাবে এগুলি আমদানি করার জন্য রফতানি করা হয় তাও যুক্ত করা উচিত।

— কাইও ইগলেসিয়াস

Answer 2

import React, { Component, PropTypes } from 'react'

এটি রফতানি { Component, PropTypes }সদস্যদের 'react'মডিউল থেকে ধরে নিবে Componentএবং PropTypesযথাক্রমে তাদের এবং নিয়োগ করবে । Reactমডিউল defaultরফতানির সমান হবে ।

নীচে টোরাজাবুরো দ্বারা উল্লিখিত হিসাবে , এটি একই রকম

import { default as React, Component, PropTypes } from 'react'

যা সংক্ষিপ্ত

import { default as React, Component as Component, PropTypes as PropTypes} from 'react'

এখানে আরও একটি উদাহরণ রয়েছে ( সংক্ষেপে লিঙ্ক ):

// myModule.js
export let a = true
export let b = 42
export let c = 'hello, world!'
// `d` is not exported alone
let d = 'some property only available from default'

// this uses the new object literal notation in es6
// {myVar} expands to { myVar : myVar }, provided myVar exists
// e.g., let test = 22; let o = {test}; `o` is then equal to { test : 22 }
export default { a, b, d }

// example1.js
import something from 'myModule'
console.log(something)
// this yields (note how `c` is not here):
/*
  {
    a : true,
    b : 42,
    d : 'some property only available from default'
  }
*/

// example2.js
import something, { c } from 'myModule'
console.log(something)  // same as above; the `default` export
console.log(c)          // c === 'hello, world!'

// example3.js
import { a, b, d, default as something } from 'myModule'
console.log(a)            // a === true
console.log(b)            // b === 42
console.log(d)            // d === undefined (we didn't export it individually)
console.log(something.d)  // something.d === 'some property...'

---

আমি বাবেলের সাথে দ্বিতীয় উদাহরণটি পরীক্ষা করেছি:

import test, test3, test2 from './app/lib/queries.js'
console.log(test, test3, test2)

এবং একটি সিনট্যাক্স ত্রুটি পেয়েছে।

~/code/repo/tutoring $ babel-node test.js
/Users/royhowie/.node/lib/node_modules/babel/node_modules/babel-core/lib/babel/transformation/file/index.js:601
      throw err;
            ^
SyntaxError: /Users/royhowie/code/repo/tutoring/test.js: Unexpected token (1:13)
> 1 | import test, test3, test2 from './app/lib/queries.js'
    |              ^
  2 | 
  3 | console.log(test, test3, test2)
  4 | 

---

রেফারেন্সের জন্য, আপনি importএমডিএন থেকে নতুন ডকুমেন্টেশন পড়তে পারেন । তবে এটি স্পষ্টতই প্রযুক্তিগত পর্যালোচনার প্রয়োজন। ডাঃ অ্যাক্সেল রাশমায়ারের ব্লগ পোস্ট আপাতত আরও ভাল রেফারেন্স।

Comments

এটি 'প্রতিক্রিয়া' মডিউলে রফতানি থেকে {উপাদান, প্রোপাইপস} বৈশিষ্ট্যগুলি দখল করবে এবং তাদের প্রতিক্রিয়াটির জন্য নির্ধারিত করবে। এটি ভুল। এটি ডিফল্ট রফতানি React, এবং নামযুক্ত রফতানি Componentএবং PropTypesএকই নামের ভেরিয়েবলগুলিকে নিয়োগ করে। দুর্ভাগ্যক্রমে, MDN ডক্সটি ভুল, কারণ আপনি এটি চেষ্টা করে দেখতে পেয়েছেন। 2ality.com/2014/09/es6-modules-final.html দেখুন । এছাড়াও, আমদানি সিনট্যাক্সের ডেস্ট্রাকচারিং অ্যাসাইনমেন্টের সাথে একেবারেই কোনও সম্পর্ক নেই।

"নতুন importডকুমেন্টেশন " সম্পর্কে আপনার মন্তব্যের বিষয়ে , সেই এমডিএন নিবন্ধের সংশোধন ইতিহাস পর্যালোচনা করে, আপনি যে অংশগুলি উদ্ধৃত করছেন সেগুলি পৃষ্ঠাটি এক বছরেরও বেশি সময় আগে লেখা হয়েছিল, সেই সময়কালে মডিউল সিনট্যাক্সটি ছিল দ্রুত পরিবর্তন হচ্ছে

@ টোরাজাবুরো আমি আমার উত্তরটি আরও নির্ভুল হওয়ার জন্য পুনরায় লিখেছি।

— রোহিউই

@ রইহউই এই উদাহরণের জন্য আপনাকে অনেক ধন্যবাদ !! আক্ষরিক অর্থে আরও প্রায় এক ঘন্টা মূল্যহীনভাবে চারপাশে ব্রাউজ করা সংরক্ষণ করা ... আমার কেবল একটি প্রশ্ন আছে। ইন example3.jsকেন এটা প্রিন্ট হয়নি undefinedজন্য console.log(d)? যেহেতু আপনি এটি করেছেন export default { a, b, d }তাই আপনি এটি রফতানি করেছিলেন myModule.js।

— ক্যাপচারড্রি

@ 1290 সালে myModule.js, নোট যে a, bএবং cস্বতন্ত্রভাবে রপ্তানি হতো। এর অর্থ অন্য ফাইল তাদের সাথে সরাসরি আমদানি করতে পারে import { a } from 'myModule'। অন্যদিকে, dতাহলে অন্য মডিউল দুইভাবে এটি ব্যবহার করতে পারেন, ডিফল্ট রপ্তানি কেবল প্রাপ্তিসাধ্য import thisObjectContainsDefault from 'myModule'এবং মাধ্যমে এটি অ্যাক্সেস thisObjectContainsDefault.dবা import { default as wrapperObject }এবং wrapperObject.d। দ্বিতীয় পদ্ধতির সুবিধা হ'ল আপনি পৃথকভাবে রফতানি করা আইটেমগুলিও দখল করতে পারেন, যেমনটি দেখা যায় example3.js।

— রোহউই