ES6 मॉड्यूल में कई वर्गों का निर्यात करें


150

मैं एक मॉड्यूल बनाने की कोशिश कर रहा हूं जो कई ईएस 6 कक्षाओं का निर्यात करता है। मान लीजिए कि मेरे पास निम्नलिखित निर्देशिका संरचना है:

my/
└── module/
    ├── Foo.js
    ├── Bar.js
    └── index.js

Foo.jsऔर Bar.jsप्रत्येक एक डिफ़ॉल्ट ES6 वर्ग का निर्यात करता है:

// Foo.js
export default class Foo {
  // class definition
}

// Bar.js
export default class Bar {
  // class definition
}

वर्तमान में मेरा index.jsसेट इस तरह है:

import Foo from './Foo';
import Bar from './Bar';

export default {
  Foo,
  Bar,
}

हालांकि, मैं आयात करने में असमर्थ हूं। मैं ऐसा करने में सक्षम होना चाहता हूं, लेकिन कक्षाएं नहीं मिली हैं:

import {Foo, Bar} from 'my/module';

ES6 मॉड्यूल में कई वर्गों को निर्यात करने का सही तरीका क्या है?


5
बस का उपयोग exportबिना डिफ़ॉल्ट
— webdeb

आपके पास केवल एक defaultनिर्यात हो सकता है। सोचिए अगर किसी ने करने की कोशिश की import SomeClass from 'my/module'। यह स्वचालित रूप defaultसे उस पथ से मॉड्यूल आयात करेगा । यदि आपके पास कई डिफ़ॉल्ट निर्यात थे, तो यह कैसे पता चलेगा कि कौन सा आयात करना है?
— सादिक

जवाबों:


258

इसे अपने कोड में आज़माएं:

import Foo from './Foo';
import Bar from './Bar';

// without default
export {
  Foo,
  Bar,
}

Btw, आप इसे इस तरह भी कर सकते हैं:

// bundle.js
export { default as Foo } from './Foo'
export { default as Bar } from './Bar'
export { default } from './Baz'

// and import somewhere..
import Baz, { Foo, Bar } from './bundle'

का उपयोग करते हुए export

export const MyFunction = () => {}
export const MyFunction2 = () => {}

const Var = 1;
const Var2 = 2;

export {
   Var,
   Var2,
}


// Then import it this way
import {
  MyFunction,
  MyFunction2,
  Var,
  Var2,
} from './foo-bar-baz';

इसके साथ अंतर export defaultयह है कि आप कुछ निर्यात कर सकते हैं, और उस नाम को लागू कर सकते हैं जहां आप इसे आयात करते हैं:

// export default
export default class UserClass {
  constructor() {}
};

// import it
import User from './user'

Unexpected tokenजब मैं निर्माण कर रहा हूँ तो मुझे एक त्रुटि मिल रही हैexport Foo from './Foo'; export Bar from './Bar'
— १०:४२ में

@inostia नोट, यह ES6 सिंटैक्स है, आपको संभवतः इसका समर्थन करने के लिए "कोलाहल" की आवश्यकता है
— webdeb

मैं बेबल का उपयोग कर रहा हूं। वेबपैक के साथ संकलन करते समय मुझे वह त्रुटि मिली। मुझे लगता है कि मुझे ऐसा कुछ करने की जरूरत है export { default as Foo } from './Foo';। मैंने देखा है कि कहीं और
— inostia

@inostia मैं भी यह अनुभव कर रहा हूं, export { default as Foo } from './Foo';वास्तव में इसे निर्यात करने के लिए आवश्यक था।
— इकोलोकेशन

17

उम्मीद है की यह मदद करेगा:

// Export (file name: my-functions.js)
export const MyFunction1 = () => {}
export const MyFunction2 = () => {}
export const MyFunction3 = () => {}

// if using `eslint` (airbnb) then you will see warning, so do this:
const MyFunction1 = () => {}
const MyFunction2 = () => {}
const MyFunction3 = () => {}

export {MyFunction1, MyFunction2, MyFunction3};

// Import
import * as myFns from "./my-functions";

myFns.MyFunction1();
myFns.MyFunction2();
myFns.MyFunction3();


// OR Import it as Destructured
import { MyFunction1, MyFunction2, MyFunction3 } from "./my-functions";

// AND you can use it like below with brackets (Parentheses) if it's a function 
// AND without brackets if it's not function (eg. variables, Objects or Arrays)  
MyFunction1();
MyFunction2();

7

@ वेबडेब का जवाब मेरे काम नहीं आया, मैंने एक unexpected tokenत्रुटि तब की जब ईएस 6 को बाबेल के साथ संकलित किया गया, जिसका नाम डिफ़ॉल्ट निर्यात था।

हालांकि, मेरे लिए यह काम किया:

// Foo.js
export default Foo
...

// bundle.js
export { default as Foo } from './Foo'
export { default as Bar } from './Bar'
...

// and import somewhere..
import { Foo, Bar } from './bundle'

3
// export in index.js
export { default as Foo } from './Foo';
export { default as Bar } from './Bar';

// then import both
import { Foo, Bar } from 'my/module';

-2

वर्गों के उदाहरणों के निर्यात के लिए आप इस वाक्यविन्यास का उपयोग कर सकते हैं:

// export index.js
const Foo = require('./my/module/foo');
const Bar = require('./my/module/bar');

module.exports = {
    Foo : new Foo(),
    Bar : new Bar()
};

// import and run method
const {Foo,Bar} = require('module_name');
Foo.test();

4
यह
— ईएस
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.