Xuất nhiều lớp trong các mô-đun ES6

Tôi đang cố gắng tạo một mô-đun xuất nhiều lớp ES6. Giả sử tôi có cấu trúc thư mục sau:

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

Foo.jsvà Bar.jsmỗi xuất một lớp ES6 mặc định:

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

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

Tôi hiện đang có index.jsthiết lập của mình như thế này:

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

export default {
  Foo,
  Bar,
}

Tuy nhiên, tôi không thể nhập khẩu. Tôi muốn có thể làm điều này, nhưng các lớp không tìm thấy:

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

Cách chính xác để xuất nhiều lớp trong mô-đun ES6 là gì?

Hãy thử điều này trong mã của bạn:

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

// without default
export {
  Foo,
  Bar,
}

Btw, bạn cũng có thể làm theo cách này:

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

Sử dụng 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';

Sự khác biệt với export defaultlà bạn có thể xuất một cái gì đó và áp dụng tên mà bạn nhập nó:

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

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

Hi vọng điêu nay co ich:

// 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();

Câu trả lời của @ webdeb không hiệu quả với tôi, tôi đã unexpected tokengặp lỗi khi biên dịch ES6 với Babel, thực hiện xuất khẩu mặc định có tên.

Điều này làm việc cho tôi, tuy nhiên:

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

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

Để xuất các thể hiện của các lớp, bạn có thể sử dụng cú pháp này:

// 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();