Esporta più classi nei moduli ES6


150

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

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

Foo.jse Bar.jsciascuno esporta una classe ES6 predefinita:

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

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

Attualmente ho il mio index.jsset up come questo:

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

export default {
  Foo,
  Bar,
}

Tuttavia, non riesco a importare. Voglio essere in grado di farlo, ma le classi non sono state trovate:

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

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


5
basta usare exportsenza l'impostazione predefinita
webdeb

Puoi avere una sola defaultesportazione. Immagina se qualcuno ci provasse import SomeClass from 'my/module'. Ciò importerebbe automaticamente il defaultmodulo da quel percorso. Se avessi più esportazioni predefinite lì, come saprebbe quale importare?
Saadq,

Risposte:


258

Prova questo nel tuo codice:

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

// without default
export {
  Foo,
  Bar,
}

A proposito, puoi anche farlo in questo modo:

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

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 export defaultè che puoi esportare qualcosa e applicare il nome dove lo importi:

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

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

Ricevo un Unexpected tokenerrore durante la costruzioneexport Foo from './Foo'; export Bar from './Bar'
inostia il

@inostia nota, questa è la sintassi ES6, probabilmente avrai bisogno di "babele" per supportarlo
webdeb,

Sto usando Babele. Ho riscontrato questo errore durante la compilazione con il webpack. Penso di dover fare qualcosa del genere export { default as Foo } from './Foo';. L'ho visto altrove
inostia il

@inostia Anche io sto sperimentando questo, export { default as Foo } from './Foo';era necessario per esportarlo effettivamente.
ecolocalizzazione

17

Spero che questo ti aiuti:

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

La risposta di @ webdeb non ha funzionato per me, ho riscontrato un unexpected tokenerrore durante la compilazione di ES6 con Babel, facendo esportazioni predefinite denominate.

Questo ha funzionato per me, tuttavia:

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

Per esportare le istanze delle classi è possibile utilizzare questa sintassi:

// 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
questa non è la sintassi ES6
GerDner,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.