मुझे ES6 आयात के लिए घुंघराले ब्रेसिज़ का उपयोग कब करना चाहिए?

763

यह स्पष्ट प्रतीत होता है, लेकिन मैंने अपने आप को थोड़ा उलझन में पाया कि ईएस 6 में एक एकल मॉड्यूल आयात करने के लिए घुंघराले ब्रेसिज़ का उपयोग कब करना है। उदाहरण के लिए, मैं जिस रिएक्ट-नेटिव प्रोजेक्ट में काम कर रहा हूं, उसमें मेरे पास निम्नलिखित फाइल और उसकी सामग्री है:

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;

TodoReducer.js में, मुझे इसे कर्ली ब्रेसिज़ के बिना आयात करना होगा:

import initialState from './todoInitialState';

यदि मैं initialStateघुंघराले ब्रेसिज़ में संलग्न करता हूं, तो मुझे कोड की निम्न पंक्ति के लिए निम्न त्रुटि मिलती है:

अपरिभाषित की संपत्ति को पढ़ नहीं सकते

TodoReducer.js:

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

इसी तरह की त्रुटियां मेरे घटकों के साथ घुंघराले ब्रेसिज़ के साथ भी होती हैं। मैं सोच रहा था कि मुझे एक आयात के लिए घुंघराले ब्रेसिज़ का उपयोग कैसे करना चाहिए, क्योंकि जाहिर है, जब कई घटक / मॉड्यूल आयात करते हैं, तो आपको उन्हें घुंघराले ब्रेसिज़ में संलग्न करना होगा, जो मुझे पता है।

संपादित करें:

पर इतना पोस्ट यहाँ मेरे सवाल का जवाब नहीं है, बजाय मैं पूछ रहा हूँ जब मैं या आयात करने के लिए घुंघराले ब्रेसिज़ उपयोग नहीं करना चाहिए करना चाहिए एकल मॉड्यूल, या मैं ES6 में एक भी मॉड्यूल आयात करने के लिए घुंघराले ब्रेसिज़ का उपयोग कभी नहीं करना चाहिए (इस जाहिरा तौर पर है नहीं मामला, जैसा कि मैंने घुंघराले ब्रेस के साथ एकल आयात देखा है)

javascript import ecmascript-6

— TonyGW
स्रोत

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

— nils 14

1

नहीं, यह अलग है। धन्यवाद

— टोनीगॉव

ईएस 6 मॉड्यूल निर्यात विकल्पों या जावास्क्रिप्ट (ईएस 6), एक्सपोर्ट कास्ट बनाम एक्सपोर्ट डिफॉल्ट का

— बर्गी

2261

यह एक डिफ़ॉल्ट आयात है :

// 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

एक मॉड्यूल में केवल एक डिफ़ॉल्ट निर्यात हो सकता है , लेकिन जितने नाम वाले निर्यात आप चाहें (शून्य, एक, दो, या कई)। आप उन सभी को एक साथ आयात कर सकते हैं:

// 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 मॉड्यूल के लिए एक महान मार्गदर्शिका है, जो डिफ़ॉल्ट और नामित निर्यात के बीच का अंतर समझाती है।

— दान अब्रामोव
स्रोत

4

क्या किसी मॉड्यूल के व्यक्तिगत निर्यात के export const myA = 43; export const Something = 44;साथ-साथ होने में कोई कमी है export default { myA, Something }? इसलिए जब आप आयात करते हैं import A from './A';, import { Something } from './A';तो आप मॉड्यूल में सब कुछ के लिए या तो आप केवल कुछ मॉड्यूल प्राप्त कर सकते हैं

— माइकल

12

यह ठीक है, लेकिन सभी नामित निर्यातों को एक ही वस्तु में हथियाने के लिए पहले से ही एक वाक्यविन्यास है import * as AllTheThings:।

— दान अब्रामोव

82

स्पष्ट रूप से समझाया गया! काश, मैं इस जवाब को दोहरा सकता।

— Willa

7

इस बारे में क्या- import 'firebase/storage';या import 'rxjs/add/operator/map';। वह वास्तव में क्या कर रहा है?

— kyw

9

@kyw: यह मॉड्यूल को निष्पादित करता है लेकिन निर्यात किए गए मूल्य को अनदेखा करता है। साइड इफेक्ट के लिए उपयोगी।

— दान अब्रामोव

123

TL; DR : घुंघराले ब्रेसिज़ का उपयोग किया जाता है यदि आप एक गैर-डिफ़ॉल्ट निर्यात आयात करना चाहते हैं।

अधिक जानकारी के लिए ऊपर दान Abramovs उत्तर देखें।

— डैनियल श्मिट
स्रोत

7

यह उत्तर किसी अन्य उत्तर का उल्लेख करने के अलावा क्या योगदान देता है?

— फ्रैंक

6

मैं इसे पहले भेजता हूं और बाद में इसे संपादित करता हूं, असुविधा के लिए खेद है

— डैनियल श्मिट

मैं एक झटका बनने की कोशिश नहीं कर रहा था, मैंने इसे सबसे विनम्र तरीके से वाक्यांश करने की कोशिश की। मैं भटक गया कि यह उत्तर यहां क्यों था।

— 18

2

मुझे लगता है कि यह राय का विषय है, लेकिन मुझे यह बहुत मददगार लगा। मैंने उपरोक्त उत्तर को स्किम कर दिया, और इसने पुष्टि की कि मुझे क्या लगा कि यह संवाद करने की कोशिश कर रहा है।

— मोर्चार्ड

84

मैं कहूंगा कि importES6 कीवर्ड का उल्लेख करने के लिए तारांकित अंकन भी है ।

यदि आप मिक्स लॉग को कंसोल करने का प्रयास करते हैं:

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

तुम्हे मिल जाएगा:

मुझे ES6 आयात के लिए घुंघराले ब्रेसिज़ का उपयोग कब करना चाहिए?

ब्रैकेट सुनहरे होते हैं, जब आपको मॉड्यूल से केवल विशिष्ट घटकों की आवश्यकता होती है, जो वेबपैक जैसे बंडलर्स के लिए छोटे पैरों के निशान बनाता है।

— prosti
स्रोत

4

आपकी छवि इस विशेष उत्तर के लिए एकदम सही चीट शीट है।

— रोड्राइकक्र

1

कर रहे हैं import * as Mix from "./A";और import A as Mix from "./A";एक ही?

— शफीजादेह

40

ऊपर दिए गए डैन अब्रामोव जवाब डिफ़ॉल्ट निर्यात और नामित निर्यात के बारे में बताते हैं ।

कौन सा उपयोग करें?

डेविड हरमन को उद्धृत करते हुए : ECMAScript 6 एकल / डिफ़ॉल्ट निर्यात शैली का पक्षधर है, और डिफ़ॉल्ट आयात करने के लिए सबसे प्यारी वाक्यविन्यास देता है। नामांकित निर्यात आयात करना और यहां तक कि थोड़ा कम संक्षिप्त होना चाहिए।

हालाँकि, टाइपस्क्रिप्ट में एक्सपोर्ट नाम का निर्यात रिफैक्टिंग के कारण होता है। उदाहरण के लिए, यदि आप डिफ़ॉल्ट रूप से एक क्लास निर्यात करते हैं और उसका नाम बदल देते हैं, तो क्लास का नाम केवल उस फ़ाइल में बदल जाएगा और अन्य संदर्भों में नहीं, नामित निर्यात के साथ सभी संदर्भों में नाम बदला जाएगा। उपयोगिताओं के लिए नामांकित निर्यात भी पसंद किया जाता है।

कुल मिलाकर आप जो चाहें पसंद करें।

अतिरिक्त

डिफ़ॉल्ट निर्यात वास्तव में नाम डिफ़ॉल्ट के साथ एक नामित निर्यात है, इसलिए डिफ़ॉल्ट निर्यात निम्न रूप से आयात किया जा सकता है:

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

— दीपक शर्मा
स्रोत

2

Additionalलाइन में अच्छी जानकारी है। import A from './A'अगर आप किसी नाम को परिभाषित किए बिना निर्यात कर रहे हैं तो इसका कोई मतलब नहीं है export default 42।

— PGT

8

कृपया डेविड हर्मन के उद्धरण का गलत अर्थ न निकालें। इसका मतलब यह नहीं है कि " यह हमेशा ईएस 6 में एकल / डिफ़ॉल्ट निर्यात का उपयोग करने का पक्षधर है ", बल्कि इसलिए कि " एकल निर्यात बहुत आम है, ईएस 6 डिफॉल्ट का सबसे अच्छा समर्थन करता है और हमने उन्हें सबसे प्यारी वाक्यविन्यास दिया "।

— बर्गी

15

यदि आप 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';

— ब्रैंडन
स्रोत

9

importबयानों में घुंघराले ब्रेसिज़ के उपयोग को समझने के लिए , पहले, आपको ES6 में शुरू की गई विनाशकारी अवधारणा को समझना होगा

वस्तु नष्ट होना

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

विध्वंस कर रहे हैं

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');

— theTypan
स्रोत

जब से आप विनाश करने के लिए तुलना दिखा रहे हैं, मैं आपकी पिछली टिप्पणी की तुलना में बराबर विनाशकारी जोड़ 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');

— दूंगा

शरीर सौष्ठव प्रशंसक?

— तुषार पांडे

@ तुषारपांडे मैं एक बॉडी बिल्डर हूँ

— द टेटन

1

मुझे लगता है कि आयात के किसी भी स्पष्टीकरण में और कब कर्ल का उपयोग करना है बनाम उनका उपयोग नहीं करना है, यदि आप ऑब्जेक्ट को नष्ट करने का उल्लेख नहीं कर रहे हैं, तो आप वास्तव में सबसे अच्छा स्पष्टीकरण नहीं दे रहे हैं। एक बार जब मैंने विनाश के बारे में जान लिया, तो मैंने कभी नहीं सोचा कि घुंघराले क्यों अब मैं इसे आसानी से समझ में आता है।

— एरिक बिशर्ड

6

सारांश `ES6`मॉड्यूल:

निर्यात:

आपके पास 2 प्रकार के निर्यात हैं:

नामांकित निर्यात
डिफ़ॉल्ट निर्यात, प्रति मॉड्यूल अधिकतम 1

वाक्य - विन्यास:

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

आयात:

निर्यात का प्रकार (जिसका नाम या डिफ़ॉल्ट निर्यात) कुछ आयात करने के तरीके को प्रभावित करता है:

एक नामित निर्यात के लिए हमें घुंघराले ब्रेसिज़ और सटीक नाम को घोषणा (यानी चर, फ़ंक्शन, या वर्ग) के रूप में उपयोग करना होगा जो निर्यात किया गया था।
डिफ़ॉल्ट निर्यात के लिए हम नाम चुन सकते हैं।

वाक्य - विन्यास:

// 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';

रुचि की बातें:

नाम निर्यात के लिए निर्यात के मिलान नाम के साथ घुंघराले ब्रेसिज़ के भीतर अल्पविराम से अलग सूची का उपयोग करें ।
डिफ़ॉल्ट निर्यात के लिए घुंघराले ब्रेसिज़ के बिना अपने चयन के नाम का उपयोग करें।

उपनाम:

जब भी आप नामांकित आयात का नाम बदलना चाहते हैं, तो यह उपनाम के माध्यम से संभव है । इसके लिए वाक्य रचना निम्नलिखित है:

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

अब हमने आयात importantData_1 कर लिया है लेकिन पहचानकर्ता myDataइसके बजाय है importantData_1।

— विलेम वैन डेर वेन
स्रोत

5

आमतौर पर जब आप एक फ़ंक्शन का निर्यात करते हैं, तो आपको {} का उपयोग करने की आवश्यकता होती है

if you have export const x

तुम इस्तेमाल import {x} from ''

if you use export default const x

आपको import X from '' यहां उपयोग करने की आवश्यकता है आप जो भी चर चाहते हैं उसे एक्स बदल सकते हैं

— jadlmir
स्रोत

4

घुंघराले ब्रेसिज़ ({}) का उपयोग बाइंडिंग नाम के आयात के लिए किया जाता है और इसके पीछे की अवधारणा विनाशकारी असाइनमेंट है

एक उदाहरण के साथ आयात विवरण कैसे काम करता है का एक सरल प्रदर्शन मेरे अपने जवाब में इसी तरह के प्रश्न पर पाया जा सकता है कि हम जावास्क्रिप्ट आयातों में '{}' का उपयोग कब करते हैं?

— samuelj90
स्रोत

1

आपको निश्चित रूप से सर्वश्रेष्ठ लघु उत्तर के लिए मेरा वोट मिलेगा!

— एरिक बिशर्ड

0

घुंघराले ब्रेसिज़ का उपयोग केवल आयात के लिए किया जाता है जब निर्यात का नाम दिया जाता है। यदि निर्यात डिफ़ॉल्ट है तो आयात के लिए घुंघराले ब्रेसिज़ का उपयोग नहीं किया जाता है।

— अभिषेक कुमार
स्रोत

0

डिफ़ॉल्ट निर्यात के लिए हम आयात करते समय {} का उपयोग नहीं करते हैं।

जैसे

player.js

export default vx;

index.js

import vx from './player';

index.js

player.js

यदि हम वह सब कुछ आयात करना चाहते हैं जो हम निर्यात करते हैं तो हम उपयोग करते हैं *

— user260778
स्रोत

मुझे ES6 आयात के लिए घुंघराले ब्रेसिज़ का उपयोग कब करना चाहिए?

सारांश ES6मॉड्यूल:

उपनाम:

सारांश `ES6`मॉड्यूल: