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.