Exportar múltiples clases en módulos ES6

150

Estoy tratando de crear un módulo que exporta múltiples clases de ES6. Digamos que tengo la siguiente estructura de directorios:

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

Foo.jsy Bar.jscada uno exporta una clase ES6 predeterminada:

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

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

Actualmente tengo mi index.jsconfiguración así:

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

export default {
  Foo,
  Bar,
}

Sin embargo, no puedo importar. Quiero poder hacer esto, pero no se encuentran las clases:

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

¿Cuál es la forma correcta de exportar varias clases en un módulo ES6?

ambiente
fuente
55
solo use exportsin el predeterminado
webdeb
Solo puede tener una defaultexportación. Imagina si alguien tratara de hacerlo import SomeClass from 'my/module'. Esto importaría automáticamente el defaultmódulo desde esa ruta. Si tuviera varias exportaciones predeterminadas allí, ¿cómo sabría cuál importar?
saadq

Respuestas:

258

Prueba esto en tu código:

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

// without default
export {
  Foo,
  Bar,
}

Por cierto, también puedes hacerlo de esta manera:

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

Utilizando 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 diferencia export defaultes que puede exportar algo y aplicar el nombre donde lo importa:

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

// import it
import User from './user'
webdeb
fuente
Recibo un Unexpected tokenerror al construirexport Foo from './Foo'; export Bar from './Bar'
inostia
@inostia nota, esta es la sintaxis de ES6, probablemente necesites "babel" para soportarla
webdeb
Estoy usando babel Recibí ese error al compilar con webpack. Creo que necesito hacer algo como eso export { default as Foo } from './Foo';. Lo he visto en otros lugares
inostia el
@inostia También estoy experimentando esto, export { default as Foo } from './Foo';fue necesario para exportarlo.
ecolocación
17

Espero que esto ayude:

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

La respuesta de @webdeb no funcionó para mí, encontré un unexpected tokenerror al compilar ES6 con Babel, haciendo exportaciones predeterminadas con nombre.

Esto funcionó para mí, sin embargo:

// 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'
inostia
fuente
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';
PaoPao
fuente
-2

Para exportar las instancias de las clases, puede usar esta sintaxis:

// 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();
Schmidko
fuente
44
esta no es la sintaxis de ES6
GerDner