ES6 में `एक्सपोर्ट कास्ट` बनाम` एक्सपोर्ट डिफॉल्ट`

Question

मैं यह निर्धारित करने की कोशिश कर रहा हूं कि क्या इन दोनों के बीच कोई बड़ा अंतर है, export defaultकेवल करने से सक्षम होने के अलावा अन्य :

import myItem from 'myItem';

और export constमैं का उपयोग कर सकते हैं:

import { myItem } from 'myItem';

मैं सोच रहा हूं कि क्या कोई मतभेद और / या इसके अलावा मामलों का उपयोग करें।

Comments

उपयोग constकरने से पहचानकर्ता को केवल पढ़ने योग्य बनाया जाएगा। तो आदिम मूल्यों के मामले में, आप विचार कर सकते हैं कि अपरिवर्तनीय होना चाहिए। ध्यान दें कि मूल्य स्वयं अपरिवर्तनीय नहीं है, इसलिए ऑब्जेक्ट्स, सरणियों आदि को बदला जा सकता है - बस पुन: असाइन नहीं किया गया है।

— spmurrayzzz

@spmurrayzzz: FWIW, इंपोर्ट बाइंडिंग भी अपरिवर्तनीय हैं, ठीक उसी तरह const।

— फेलिक्स क्लिंग

स्पष्टीकरण @FelixKling के लिए धन्यवाद, पता नहीं था कि

— spmurrayzzz

@ फेलिक्सलिंग: बाहर से, कम से कम। वे निरंतर नहीं हो सकते हैं, हालांकि निर्यात को बदला जा सकता है।

— बर्गी

@ बर्गी: सही है, इसीलिए मैंने कहा कि आयात बाइंडिंग ;)

— फेलिक्स क्लिंग

Answer 1

यह एक डिफ़ॉल्ट निर्यात बनाम नामित निर्यात है। export constएक नामित निर्यात है जो एक कास्ट डिक्लेरेशन या घोषणाओं को निर्यात करता है।

बल देने के लिए: यहाँ क्या मायने रखती है exportकीवर्ड के रूप में constएक स्थिरांक घोषणा या घोषणाओं घोषित करने के लिए प्रयोग किया जाता है। exportअन्य घोषणाओं जैसे कि कक्षा या फ़ंक्शन घोषणाओं पर भी लागू किया जा सकता है।

डिफ़ॉल्ट निर्यात ( export default)

आप प्रति फ़ाइल एक डिफ़ॉल्ट निर्यात कर सकते हैं। जब आप आयात करते हैं तो आपको एक नाम निर्दिष्ट करना होगा और आयात करना होगा:

import MyDefaultExport from "./MyFileWithADefaultExport";

आप इसे अपनी पसंद का कोई भी नाम दे सकते हैं।

नामांकित निर्यात ( export)

नामित निर्यात के साथ, आपके पास प्रति फ़ाइल कई नामांकित निर्यात हो सकते हैं। फिर उन विशिष्ट निर्यातों को आयात करें जिन्हें आप ब्रेसिज़ में घेरना चाहते हैं:

// ex. importing multiple exports:
import { MyClass, MyOtherClass } from "./MyClass";
// ex. giving a named import a different name by using "as":
import { MyClass2 as MyClass2Alias } from "./MyClass2";

// use MyClass, MyOtherClass, and MyClass2Alias here

या एक ही बयान में नामित आयात के साथ एक डिफ़ॉल्ट का उपयोग करना संभव है:

import MyDefaultExport, { MyClass, MyOtherClass} from "./MyClass";

नाम स्थान का आयात

किसी ऑब्जेक्ट पर फ़ाइल से सब कुछ आयात करना भी संभव है:

import * as MyClasses from "./MyClass";
// use MyClasses.MyClass, MyClasses.MyOtherClass and MyClasses.default here

टिप्पणियाँ

• वाक्यविन्यास डिफ़ॉल्ट निर्यात को थोड़ा अधिक संक्षिप्त करने का पक्षधर है क्योंकि उनका उपयोग मामला अधिक सामान्य है ( यहां चर्चा देखें )।

• डिफ़ॉल्ट निर्यात वास्तव में नाम के साथ एक निर्यात किया गया नाम है defaultइसलिए आप इसे एक आयात नाम से आयात करने में सक्षम हैं:

  import { default as MyDefaultExport } from "./MyFileWithADefaultExport";

Answer 2

export defaultनिर्यात की गई "चीज़" को आयात करते समय सिंटैक्स को प्रभावित करता है, जब आयात करने की अनुमति देता है, तो जो कुछ भी निर्यात किया गया है, वह importस्वयं में नाम का चयन करके , कोई फर्क नहीं पड़ता कि यह निर्यात होने पर क्या नाम था, सिर्फ इसलिए कि इसे "डिफ़ॉल्ट" के रूप में चिह्नित किया गया है।

एक उपयोगी उपयोग मामला, जिसे मैं पसंद करता हूं (और उपयोग करता हूं), इसे नाम दिए बिना स्पष्ट रूप से एक अनाम फ़ंक्शन को निर्यात करने की अनुमति देता है , और केवल जब वह फ़ंक्शन आयात किया जाता है, तो उसे एक नाम दिया जाना चाहिए:

---

उदाहरण:

निर्यात 2 कार्य, एक है default:

export function divide( x ){
    return x / 2;
}

// only one 'default' function may be exported and the rest (above) must be named
export default function( x ){  // <---- declared as a default function
    return x * x;
}

उपरोक्त कार्यों को आयात करें। एक के लिए एक नाम बनाना default:

// The default function should be the first to import (and named whatever)
import square, {divide} from './module_1.js'; // I named the default "square" 

console.log( square(2), divide(2) ); // 4, 1

---

जब {}यह जो कुछ भी आयात किया जाता है था इसका मतलब है कि वाक्य रचना एक समारोह (या चर) आयात करने के लिए प्रयोग किया जाता है पहले से ही जब निर्यात नाम है, तो भी इसे से आयात करना चाहिए सटीक एक ही नाम किसी और आयात नहीं होगा काम, या।

---

त्रुटिपूर्ण उदाहरण:

1. डिफ़ॉल्ट फ़ंक्शन को पहले आयात करना चाहिए

   import {divide}, square from './module_1.js

2. divide_1में निर्यात नहीं किया गया था module_1.js, इस प्रकार कुछ भी आयात नहीं किया जाएगा

   import {divide_1} from './module_1.js

3. squareमें निर्यात नहीं किया गया था module_1.js, क्योंकि {}इंजन को केवल नामित निर्यात के लिए स्पष्ट रूप से खोज करने के लिए कहता है ।

   import {square} from './module_1.js

Comments

इसका मतलब यह नहीं है कि यह किसी एक चीज का निर्यात करता है। आपके पास एक ही मॉड्यूल में कई नाम और एक डिफ़ॉल्ट हो सकता है। डिफॉल्ट का सीधा सा मतलब है कि - यदि आप आयात करते समय नाम निर्दिष्ट नहीं करते हैं, तो import something fromइसके बजाय यह डिफ़ॉल्ट निर्यात है import { somethingNamed } from।

— एंड्रीस

मैंने यहां नया अंग्रेजी शब्द भी सीखा: "इरोनस" +1 इसके लिए

— युवल लेवी

Answer 3

माइनर नोट: कृपया विचार करें कि जब आप डिफ़ॉल्ट निर्यात से आयात करते हैं, तो नामकरण पूरी तरह से स्वतंत्र है। यह वास्तव में रिफ्लेक्टरिंग पर प्रभाव डालता है।

मान लीजिए कि आपके पास Fooइसी वर्ग के साथ एक समान आयात है:

export default class Foo { }

//the name 'Foo' could be anything, since it's just an
//identifier for the default export
import Foo from './Foo'

अब यदि आप अपनी Fooकक्षा को रिफलेक्टर करते हैं Barऔर फ़ाइल का नाम भी बदल देते हैं, तो अधिकांश IDE आपके आयात को नहीं छूएंगे। तो आप इसे समाप्त करेंगे:

export default class Bar { }

//the name 'Foo' could be anything, since it's just an
//identifier for the default export.
import Foo from './Bar'

विशेष रूप से टाइपस्क्रिप्ट में, मैं वास्तव में नामित निर्यात और अधिक विश्वसनीय रिफैक्टिंग की सराहना करता हूं। अंतर केवल defaultकीवर्ड और घुंघराले ब्रेसिज़ की कमी है । यह btw आपको अपने आयात में एक टाइपो बनाने से भी रोकता है क्योंकि आपके पास अब जाँच है।

export class Foo { }

//'Foo' needs to be the class name. The import will be refactored
//in case of a rename!
import { Foo } from './Foo'

Comments

" " फू 'को कक्षा का नाम होना चाहिए। "- नहीं! आप केवल उतना ही आसानी से import { Foo as Anything } from …कर सकते हैं जितना आप import Anything from …डिफ़ॉल्ट निर्यात के साथ कर सकते हैं ।

— बरगी

कि आप इसे उस नाम के साथ बदल सकते हैं जो asवास्तव में उस स्रोत टिप्पणी का बिंदु नहीं है। डाउनवोट के लिए धन्यवाद; पी

— फिलिप सुमी 19

मैं नीचे नहीं गया, हालांकि मुझे यकीन नहीं है कि क्या तर्क आश्वस्त है। मुझे नहीं पता कि क्या मैं चाहता हूं कि किसी एकल मॉड्यूल को रिफ्लेक्ट करते समय मैं अपनी आईडीई को सभी आयातों का नाम बदल दूं, यही वास्तव में मॉड्यूलरीकरण के बारे में है :-) और यह आईडीई "समस्या" से अधिक प्रतीत होता है निर्यात शैली चुनने का कोई कारण नहीं है …

— बरगी

मैं सहमत हूं कि मैं यहां डेवलपर UX के लिए नामित निर्यात का उपयोग करता हूं - लेकिन फिर, आप यह तर्क दे सकते हैं कि प्रति टाइप टाइपस्क्रिप्ट सब कुछ है। मैं बार-बार रिफ्लेक्टर करता हूं, और यह देखते हुए कि मेरे पास आमतौर पर प्रति फ़ाइल एक वर्ग (मेरे मामले में: रिएक्ट कंपोनेंट) है, मैं चाहूंगा कि डिस्कनेक्ट को बनाने के लिए आयात एक पुनर्नामित घटक का पालन न करे। बेशक, यह अलग-अलग डेवलपर पर निर्भर करता है या नहीं हो सकता है।

— फिलिप सुमी

मुझे एक लेख मिला , जो यही बात कहता है। शायद एक उचित स्थिति हो सकती है: हमें export defaultएक परियोजना के मुख्य उद्देश्य के निर्यात के लिए उपयोग करना चाहिए , विशेष रूप से एक npm संकुल से (यह एक जगह लेता है module.exports =)। लेकिन, आंतरिक रूप से एक परियोजना में, केवल नामित निर्यात का उपयोग करना बेहतर होता है।

— पालेओ

Answer 4

से प्रलेखन :

नामांकित निर्यात कई मूल्यों को निर्यात करने के लिए उपयोगी होते हैं। आयात के दौरान, एक ही नाम का उपयोग करने के लिए संबंधित मूल्य का उल्लेख करने में सक्षम हो जाएगा।

डिफ़ॉल्ट निर्यात के बारे में, प्रति मॉड्यूल केवल एक डिफ़ॉल्ट निर्यात होता है। एक डिफ़ॉल्ट निर्यात एक फ़ंक्शन, एक वर्ग, एक वस्तु या कुछ और हो सकता है। इस मूल्य को "मुख्य" निर्यात मूल्य माना जाता है क्योंकि यह आयात करने के लिए सबसे सरल होगा।

Answer 5

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

Answer 6

मुझे समस्या थी कि ब्राउज़र es6 का उपयोग नहीं करता है।

मैंने इसे ठीक कर दिया है:

 <script type="module" src="index.js"></script>

टाइप मॉड्यूल ब्राउज़र को ES6 का उपयोग करने के लिए कहता है।

export const bla = [1,2,3];

import {bla} from './example.js';

तो फिर यह काम करना चाहिए।