在ES6模块中导出多个类

我试图创build一个导出多个ES6类的模块。 假设我有以下目录结构:

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

Foo.jsBar.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, } 

但是,我无法导入。 我希望能够做到这一点,但没有find类:

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

在ES6模块中导出多个类的正确方法是什么?

在你的代码中试试这个:

 import Foo from './Foo'; import Bar from './Bar'; export { // without default Foo, Bar, } 

顺便说一句,你也可以这样做:

 //bundle.js export Foo from './Foo' export Bar from './Bar' //and import somewhere.. import { 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 const Func = () {} export default Func; // import it import Foo from './func' 

希望这可以帮助:

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