2016-07-12 55 views
42

Sto cercando di creare un modulo che esporta più classi ES6. Diciamo che ho la seguente struttura di directory:Esportare più classi in ES6 moduli

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

Foo.js e Bar.js ogni esportare una classe ES6 di default:

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

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

Al momento ho il mio index.js impostato in questo modo:

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

export default { 
    Foo, 
    Bar, 
} 

Tuttavia, non riesco a importare. Voglio essere in grado di fare questo, ma le classi non si trovano:

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

Qual è il modo corretto per esportare più classi in un modulo ES6?

+1

basta usare 'export' senza il default – webdeb

+0

Si può avere un solo' esportazione default'. Immagina se qualcuno provasse a fare 'import SomeClass da 'my/module''. Questo importerà automaticamente il modulo 'default' da quel percorso. Se avessi più esportazioni predefinite, come saprebbe quale importare? – saadq

risposta

81

Prova questo nel codice:

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

export { // without default 
    Foo, 
    Bar, 
} 

Btw, inoltre è possibile fare in questo modo:

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

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

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

La differenza di export default

è che è possibile esportare qualcosa, e applicare il nome in cui si importa che

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

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

Ricevo un errore 'Token inaspettato' quando si costruisce' export Foo da './Foo'; export Bar da './Bar'' – inostia

+0

@inostia note, questa è la sintassi ES6, probabilmente hai bisogno di "babele" per supportarlo – webdeb

+0

Sto usando babele. Ho avuto questo errore durante la compilazione con il webpack. Penso di aver bisogno di fare qualcosa come 'export {default as Foo} da './Foo';'. L'ho visto altrove – inostia

6

Spero che questo aiuti:

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

@ risposta di webdeb non ha funzionato per me, mi ha colpito un errore unexpected token durante la compilazione di ES6 con Babel, eseguendo le esportazioni predefinite denominate.

questo ha funzionato per me, però:

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