ES6 इंडेक्स फ़ाइल में निर्यात / आयात कर रहा है

Question

मैं वर्तमान में वेब पैक / बैबल के माध्यम से एक रिएक्ट ऐप में ईएस 6 का उपयोग कर रहा हूं। मैं एक मॉड्यूल के सभी घटकों को इकट्ठा करने और उन्हें निर्यात करने के लिए इंडेक्स फाइलों का उपयोग कर रहा हूं। दुर्भाग्य से, यह इस तरह दिखता है:

import Comp1_ from './Comp1.jsx';
import Comp2_ from './Comp2.jsx';
import Comp3_ from './Comp3.jsx';

export const Comp1 = Comp1_;
export const Comp2 = Comp2_;
export const Comp3 = Comp3_;

तो मैं अच्छी तरह से इसे इस तरह से अन्य स्थानों से आयात कर सकता हूं:

import { Comp1, Comp2, Comp3 } from './components';

जाहिर है कि यह एक बहुत अच्छा समाधान नहीं है, इसलिए मैं सोच रहा था, अगर कोई और तरीका था। मैं सीधे आयातित घटक को निर्यात करने में सक्षम नहीं लगता।

Comments

निर्देशिका में फ़ाइलों से आयात मॉड्यूल

— इनका गम

Answer 1

आप डिफ़ॉल्ट आयात को आसानी से पुनः निर्यात कर सकते हैं:

export {default as Comp1} from './Comp1.jsx';
export {default as Comp2} from './Comp2.jsx';
export {default as Comp3} from './Comp3.jsx';

ES7 ES8 के लिए एक प्रस्ताव भी है जो आपको लिखने देगा export Comp1 from '…';।

Comments

इसी तरह के पैटर्न यहां और यहां

— Bergi

ES8 प्रस्ताव के अलावा, आप अनुक्रमणिका फ़ाइलों को बनाए रखने के लिए कोड पीढ़ी का उपयोग कर सकते हैं। Github.com/gajus/create-index और github.com/ryardley/indexr पर एक नज़र डालें ।

— गजस १४'१६ को २२:

@Bergi तो ये 3 लाइनें आयात और निर्यात दोनों करती हैं? या यह सिर्फ निर्यात कर रहा है, लेकिन अब आपको Comp1_ नाम आदि के साथ फील करने की आवश्यकता नहीं है?

— म्यूजिकफॉर्मेलन

@musicformellons वे सीधे संदर्भित मॉड्यूल से निर्यात करते हैं, हां।

— बरगी

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

— बर्गी

Answer 2

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

export * from './XThingActions';

Comments

हाँ। दुर्भाग्य से यह केवल निर्यात नाम लेता है, अर्थात इसमें डिफ़ॉल्ट निर्यात शामिल नहीं है।

— अरनेहुगो

मिल मुझे एक (बहुत भ्रामक है ... मुझे एक पल लगा) SyntaxError: Unexpected reserved word, @ बर्गी का स्वीकृत जवाब काम करता है।

— फ्रैंक नॉक

आप उस मुद्दे के आसपास पाने के लिए अपने डिफ़ॉल्ट निर्यात को भी नाम दे सकते हैं। और आपके कार्यों में वास्तव में डिफ़ॉल्ट निर्यात नहीं होना चाहिए ताकि यह समाधान अच्छी तरह से काम करे।

— बैरी माइकल डॉयल

सबसे अच्छा अभ्यास जावास्क्रिप्ट, अनावश्यक अतिरिक्त सिंटैक्स में डिफ़ॉल्ट निर्यात का उपयोग नहीं करना है। आधुनिक जावास्क्रिप्ट के लिए इस धागे पर @GM का सबसे अच्छा जवाब है।

— mibbit

Answer 3

बहुत देर हो चुकी है लेकिन मैं इसका समाधान करना चाहता हूं।

बीत रहा है modelफ़ाइल जो दो निर्यात नामित किया है:

export { Schema, Model };

और controllerफ़ाइल जिसमें डिफ़ॉल्ट निर्यात है:

export default Controller;

मैं indexइस तरह से फाइल में उजागर :

import { Schema, Model } from './model';
import Controller from './controller';

export { Schema, Model, Controller };

और यह मानते हुए कि मैं उन सभी को आयात करना चाहता हूं:

import { Schema, Model, Controller } from '../../path/';

Comments

क्या यह तब काम करता है जब आप एक फ़ंक्शन आयात करते हैं और फिर इसे वापस निर्यात करते हैं? मैंने कोशिश की लेकिन ऐसा नहीं हुआ।

— आफताब नवीद

क्षमा करें यह वास्तव में काम करता था, मैं अपने पथ में / लापता था।

— आफताब नवीद

Answer 4

सीधे शब्दों में:

// Default export (recommended)
export {default} from './MyClass' 

// Default export with alias
export {default as d1} from './MyClass' 

// In >ES7, it could be
export * from './MyClass'

// In >ES7, with alias
export * as d1 from './MyClass'

या फ़ंक्शंस नामों से:

// export by function names
export { funcName1, funcName2, …} from './MyClass'

// export by aliases
export { funcName1 as f1, funcName2 as f2, …} from './MyClass'

अधिक जानकारी: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

Answer 5

इसके @babel/plugin-proposal-export-default-fromमाध्यम से स्थापित करें :

yarn add -D @babel/plugin-proposal-export-default-from

आपके .babelrc.jsonया किसी भी कॉन्फ़िगरेशन फ़ाइल प्रकार में

module.exports = {
  //...
  plugins: [
     '@babel/plugin-proposal-export-default-from'
  ]
  //...
}

अब आप exportसीधे एक से कर सकते हैं file-path:

export Foo from './components/Foo'
export Bar from './components/Bar'

शुभ लाभ...

Comments

बिना इजेक्ट किए क्रिएट-रिएक्ट-एप के लिए कैसे करें?

— नेगिन बसिरी