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?


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'

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

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'

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

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

44
esta no es la sintaxis de ES6
GerDner
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.