जावास्क्रिप्ट आयात वाक्य रचना के साथ कोष्ठक का उपयोग करना

Question

मैं एक पुस्तकालय पुस्तकालय में आया था जो पुस्तकालयों को आयात करने के लिए निम्नलिखित सिंटैक्स का उपयोग करता है:

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

उपरोक्त विधि और निम्नलिखित में क्या अंतर है?

import React, Component, PropTypes from 'react';

Comments

इसका उत्तर दस्तावेज़ीकरण में है

— adeneo

मॉड्यूल से आयात करने वाले सदस्य घुंघराले बालों में संलग्न हैं

— एडेनो

यह भी देखना जावास्क्रिप्ट (ES6), निर्यात स्थिरांक बनाम निर्यात डिफ़ॉल्ट

— Bergi

हा। यदि हम सभी बार समाप्त कर देते हैं तो "आरटीएफएम" के साथ एक एसओ प्रश्न का उत्तर दे सकते हैं, यहां तक ​​कि जॉन स्कीट के पास छह से कम आंकड़े हो सकते हैं। ; ^)

— रफिन

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और इस मामले में आयात मूल्य मॉड्यूल से डिफ़ॉल्ट निर्यात है ।

यह समझाने का एक और तरीका यह है कि उपरोक्त आयात ठीक उसी के समान है

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

और ओपी का उदाहरण इसके समान है

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

MDN प्रलेखन उदाहरण दिखाने के लिए चला गया

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

और दावा किया कि इसका मतलब है

संपूर्ण मॉड्यूल की सामग्री आयात करें, कुछ के साथ स्पष्ट रूप से नाम दिया गया है। यह सम्मिलित करता है myModule(सिक) foo, और barवर्तमान दायरे में। ध्यान दें कि fooऔर myModule.fooएक ही हैं, के रूप में कर रहे हैं barऔरmyModule.bar

एमडीएन ने यहां क्या कहा, और गलत एमडीएन प्रलेखन के आधार पर अन्य उत्तर क्या दावा करते हैं, बिल्कुल गलत है, और यह कल्पना के पुराने संस्करण पर आधारित हो सकता है। यह वास्तव में क्या करता है

डिफ़ॉल्ट मॉड्यूल निर्यात और कुछ नामांकित निर्यात आयात करें। यह सम्मिलित करता है MyModule, fooऔर barवर्तमान दायरे में। निर्यात के नाम fooऔर के माध्यम से सुलभ नहींbar हैंMyModule , जो डिफ़ॉल्ट निर्यात है, न कि सभी निर्यातों को कवर करने वाला कुछ छाता।

(डिफ़ॉल्ट मॉड्यूल निर्यात export defaultसिंटैक्स के साथ निर्यात किया जाने वाला मूल्य है , जो हो भी सकता है export {foo as default}।)

MDN दस्तावेज़ीकरण लेखकों को निम्नलिखित फ़ॉर्म से उलझन हो सकती है:

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

— 21

इस तरह के एक विस्तृत विवरण के साथ आपको यह भी जोड़ना चाहिए कि उन्हें इस तरह से आयात करने के लिए कैसे निर्यात किया जाता है।

— Caio Iglesias

Answer 2

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

यह निर्यात किए गए { Component, PropTypes }सदस्यों को 'react'मॉड्यूल से हड़प लेगा और उन्हें क्रमशः Componentऔर PropTypes, को सौंप देगा । Reactमॉड्यूल के defaultनिर्यात के बराबर होगा ।

जैसा कि नीचे torazaburo द्वारा उल्लेख किया गया है , यह उसी के समान है

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 | 

---

संदर्भ के लिए, आप importMDN के नए दस्तावेज़ पर पढ़ सकते हैं । हालांकि, तकनीकी समीक्षा की जरूरत है। डॉ। एक्सल रौशमायर का ब्लॉग पोस्ट अब के लिए एक बेहतर संदर्भ है।

Comments

यह 'प्रतिक्रिया' मॉड्यूल में निर्यात से {Component, PropTypes} गुणों को हड़प लेगा और उन्हें React को सौंप देगा। यह गलत है। यह डिफ़ॉल्ट निर्यात को React, और नामित निर्यात Componentऔर PropTypesसमान नाम के चर को असाइन करता है । दुर्भाग्य से, एमडीएन डॉक्स गलत हैं, जैसा कि आपको पता चलेगा कि आपने यह कोशिश की थी। 2ality.com/2014/09/es6-modules-final.html देखें । इसके अलावा, आयात सिंटैक्स का विनाशकारी असाइनमेंट से कोई लेना-देना नहीं है।

"नए importप्रलेखन 'के बारे में आपकी टिप्पणी के संबंध में , उस एमडीएन लेख के संशोधन इतिहास की समीक्षा करते हुए, आपके द्वारा उद्धृत किए जा रहे भागों को संशोधित नहीं किया गया है क्योंकि पृष्ठ को पहली बार एक वर्ष से अधिक समय पहले लिखा गया था, इस अवधि के दौरान मॉड्यूल सिंटैक्स था तेजी से बदल रहा है।

@torazaburo मैंने अधिक सटीक होने के लिए अपने उत्तर को फिर से लिखा।

— 21

@royhowie इस उदाहरण के लिए बहुत बहुत धन्यवाद !! शाब्दिक रूप से आसपास ब्राउज़ करने के बारे में एक और घंटे की बचत हुई ... मुझे सिर्फ एक सवाल है। में example3.jsक्यों इसे प्रिंट था undefinedके लिए console.log(d)? चूंकि आपने ऐसा किया था export default { a, b, d }इसलिए आपने इसे निर्यात किया myModule.js।

— CapturedTree

@ 1290 में myModule.js, ध्यान दें कि a, b, और cव्यक्तिगत रूप से निर्यात किया गया था। इसका मतलब यह है कि एक और फ़ाइल उन्हें सीधे आयात कर सकती है import { a } from 'myModule'। दूसरी ओर, dकेवल डिफ़ॉल्ट निर्यात के माध्यम से उपलब्ध है, इसलिए एक अन्य मॉड्यूल इसे दो तरीकों से एक्सेस कर सकता है: import thisObjectContainsDefault from 'myModule'और इसे thisObjectContainsDefault.dOR import { default as wrapperObject }और के माध्यम से एक्सेस कर सकता है wrapperObject.d। दूसरे दृष्टिकोण का लाभ यह है कि आप उन वस्तुओं को भी हड़प सकते हैं जिन्हें व्यक्तिगत रूप से निर्यात किया गया था, जैसा कि इसमें देखा जा सकता है example3.js।

— रोहिणी