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

Question

Tôi đang cố gắng tạo mô-đun xuất nhiều lớp ES6. Hãy nói rằng tôi có cấu trúc thư mục sau:

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

Foo.js và Bar.js từng xuất mặc định lớp ES6:

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

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

Tôi hiện có của tôi index.js thiết lập 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. Tôi muốn có thể thực hiện việc này nhưng không tìm thấy lớp học:

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

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

Answer 1

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

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

export { // without default 
    Foo, 
    Bar, 
} 

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

//bundle.js 
export Foo from './Foo' 
export Bar from './Bar' 

//and import somewhere.. 
import { 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 để export default

.210

là bạn có thể xuất khẩu một cái gì đó, và áp dụng cái tên mà bạn nhập nó

// export default 
const Func =() {} 
export default Func; 

// import it 
import Foo from './func' 

Answer 2

Hope this helps:

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

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

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

Answer 3

@ câu trả lời webdeb đã không làm việc cho tôi, tôi nhấn một lỗi unexpected token khi biên dịch ES6 với Babel, hãy đặt tên mặc định là xuất khẩ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'