ES6 exportando / importando en archivo de índice


202

Actualmente estoy usando ES6 en una aplicación React a través de webpack / babel. Estoy usando archivos de índice para reunir todos los componentes de un módulo y exportarlos. Desafortunadamente, eso se ve así:

import Comp1_ from './Comp1.jsx';
import Comp2_ from './Comp2.jsx';
import Comp3_ from './Comp3.jsx';

export const Comp1 = Comp1_;
export const Comp2 = Comp2_;
export const Comp3 = Comp3_;

Así que puedo importarlo desde otros lugares como este:

import { Comp1, Comp2, Comp3 } from './components';

Obviamente, esa no es una solución muy buena, así que me preguntaba si había alguna otra manera. Parece que no puedo exportar el componente importado directamente.


Posible duplicado de módulos
Inanc Gumus

Respuestas:


369

Puede reexportar fácilmente la importación predeterminada:

export {default as Comp1} from './Comp1.jsx';
export {default as Comp2} from './Comp2.jsx';
export {default as Comp3} from './Comp3.jsx';

También hay una propuesta para ES7 ES8 que te permitirá escribir export Comp1 from '…';.


2
Vea también patrones similares aquí y aquí
Bergi

66
Además de la propuesta de ES8, puede usar la generación de código para mantener los archivos de índice. Eche un vistazo a github.com/gajus/create-index y github.com/ryardley/indexr .
Gajus

@Bergi ¿Entonces estas 3 líneas importan y exportan? ¿O solo se está exportando pero ya no necesita jugar con el nombre Comp1_, etc.?
musicformellons

@musicformellons Exportan directamente desde el módulo referenciado, sí.
Bergi

2
@amann Una referencia circular de sí misma no es mala, pero puede generar problemas dependiendo de lo que haga el módulo. De todos modos, creo que solo debe usar este patrón en el archivo de índice de su biblioteca para exportar todos los componentes, y si tiene dependencias entre módulos, debe importarlos directamente en lugar de importar la parte del grande. Con eso, este patrón no introduce referencias circulares.
Bergi

56

Además, tenga en cuenta que si necesita exportar varias funciones a la vez, como acciones, puede usar

export * from './XThingActions';

14
Si. Desafortunadamente, esto solo toma exportaciones con nombre, es decir, no incluye la exportación predeterminada.
ArneHugo

get's me a (bastante engañoso ... me tomó un momento) SyntaxError: Unexpected reserved word, la respuesta aceptada de @ Bergi funciona.
Frank Nocke

También puede nombrar su exportación predeterminada para solucionar ese problema. Y sus acciones no deberían tener una exportación predeterminada, por lo que esta solución funciona bien.
Barry Michael Doyle

2
La mejor práctica es no utilizar exportaciones predeterminadas en JavaScript, sintaxis adicional innecesaria. @GM tiene la mejor respuesta en este hilo para javascript moderno.
mibbit

39

Demasiado tarde, pero quiero compartir la forma en que lo resuelvo.

Tener un modelarchivo que tiene dos nombres de exportación:

export { Schema, Model };

y tener un controllerarchivo que tiene la exportación predeterminada:

export default Controller;

Expuse en el indexarchivo de esta manera:

import { Schema, Model } from './model';
import Controller from './controller';

export { Schema, Model, Controller };

y suponiendo que quiero importarlos todos:

import { Schema, Model, Controller } from '../../path/';

¿Funciona esto cuando importa una función y luego la exporta? Lo intenté pero no fue así.
Aftab Naveed

Lo siento, en realidad funcionó, me faltaba / en mi camino.
Aftab Naveed

14

Simplemente:

// Default export (recommended)
export {default} from './MyClass' 

// Default export with alias
export {default as d1} from './MyClass' 

// In >ES7, it could be
export * from './MyClass'

// In >ES7, with alias
export * as d1 from './MyClass'

O por nombres de funciones:

// export by function names
export { funcName1, funcName2, …} from './MyClass'

// export by aliases
export { funcName1 as f1, funcName2 as f2, …} from './MyClass'

Más información: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export


1

Instalar a @babel/plugin-proposal-export-default-fromtravés de:

yarn add -D @babel/plugin-proposal-export-default-from

En su .babelrc.jsono cualquiera de los tipos de archivo de configuración

module.exports = {
  //...
  plugins: [
     '@babel/plugin-proposal-export-default-from'
  ]
  //...
}

Ahora puedes exportdirectamente desde file-path:

export Foo from './components/Foo'
export Bar from './components/Bar'

Buena suerte...


¿Cómo hacerlo para Create-React-App sin expulsar?
Negin Basiri
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.