¿Cómo exportar objeto importado en ES6?

244

El caso de uso es simple: solo quiero exportar un objeto con el nombre tal como se importó.

por ejemplo:

import React from 'react';
export React;

Pero esto no funciona. Tengo que escribir:

import React from 'react';
export const React = React;

Pero esto es extraño. ¿Cuál es la forma correcta de hacer esto?

ACTUALIZADO :

Gracias por ayuda y referencias. He resuelto mi problema con muchas pistas. Me gustaría compartir algunos casos comunes para mí y las soluciones.

importaciones de exportación

import d, {obj} from '...';

export {obj, d};
export {obj as name1, d as name2};

reexportar todas las importaciones nombradas

export * from '...';
export * as name1 from '...';

reexportar algunas importaciones con nombre

export {a, b as name1} from '...';

reexportar importación predeterminada como exportación predeterminada

export {default} from '...';

reexportar importación predeterminada como exportación con nombre

export {default as name1} from '...';
Yao Zhao
fuente
¿Por qué exportarías reaccionar?
omarjmh
puedes export {React}pero de nuevo, si necesitas Reaccionar en algún lugar, solo debes importarlo allí.
loganfsmyth
2
export react es solo un ejemplo, de hecho, quiero organizar algún proyecto para que el usuario pueda importar algún objeto en una ruta más corta y de alto nivel.
Yao Zhao
Muchas gracias por esa actualización. Solucionó todos los problemas que tuve con ES6 / 7. Le sugiero que agregue esto como respuesta y lo acepte.
Florian Wendelborn
12
export * as name1 from '...';esto no funciona para mí (usando webpack 2). ¿Algunas ideas?
Entidad Black

Respuestas:

131

A menudo hago lo siguiente en los archivos index.js que componen varios archivos:

export {default as SomeClass} from './SomeClass';
export {someFunction} from './utils';
export {default as React} from 'react';

Esta entrada de blog proporciona algunos buenos ejemplos adicionales.

Nota IMPORTANTE

Debe tener en cuenta esta regla de eslint al acceder a estas importaciones exportadas. Básicamente, en otro archivo, no deberías:

import SomeClassModule from 'SomeClass/index.js';
SomeClassModule.someFunction(); // Oops, error

Usted debe hacer esto:

import SomeClassModule, {someFunction} from 'SomeClass/index.js';
someFunction(); // Ok
Eric H.
fuente
36

Puede exportar archivos importados con dicha estructura

import First from './First'
import Second from './Second'
/..../
export { First, Second }
Igor Dolzhenkov
fuente
2

Para mi caso de uso, necesito explícitamente algún tipo de declaración de importación explícita para que Babel pueda transpilar mi código es7 a es5.

Los siguientes resultados en un error You gave us a visitor for the node type "ForAwaitStatement" but it's not a valid type:

require( 'babel-core/register' ); //transpiles es7 to es5
export {default} from './module_name'

Mi solución fue importar explícitamente el módulo usando require():

require( 'babel-core/register' );
export default require( './module_name' ).default;
Kacy
fuente
-1

Dado ./foo.js:

const Foo = class {
  talk() { return 'hello'; }
};

export default Foo;

Entonces deberías poder hacer esto:

import Foo from './foo';

let foo = new Foo();

foo.talk(); // => 'hello';

La sintaxis sigue más o menos el patrón commonjs module.exports, donde haría esto:

const Foo = class {

};

module.exports = Foo;

Más aquí:

http://exploringjs.com/es6/ch_modules.html

Rich Apodaca
fuente
¿De eso no se trataba la pregunta?
Dan Dascalescu