ES6, ¿cómo se puede exportar un módulo importado en una sola línea?

Respuestas:

194
export {default as Module} from './Module/Module';

es la forma estándar de ES6, siempre que no necesite Moduleestar también disponible dentro del módulo que realiza la exportación.

export Module from './Module/Module';

es una forma propuesta de ESnext para hacerlo, pero eso solo funciona si lo ha habilitado en Babel por ahora.

loganfsmyth
fuente
Funcionó muy bien, sin embargo, parece que a Webpack no le gusta esto, dando una notificación de que componentahora es de solo lectura y no se puede recargar en caliente. ¡Muy extraño!
Desafinado
perfecto, esta debería ser la respuesta aceptada. (Si la recarga en caliente del paquete web no le gusta, eso es un problema en esa herramienta o es el complemento HMR).
Benja
18
Si alguien se pregunta qué complemento de babel es, está export-extensionsaquí - babeljs.io/docs/plugins/transform-export-extensions
Noitidart
@loganfsmyth ¿hay alguna forma de exportar lo anterior como predeterminado?
licuado
4
@ abhishek-kdm export { default as default } fromorexport { default } from
loganfsmyth
25

No sé por qué, pero esto funciona para mí:

componentes / index.js:

import Component from './Component';
import Component2 from './Component2';
import Component3 from './Component3';
import Component4 from './Component4';

export {Component, Component2, Component3, Component4};

Importo las exportaciones así:

import {Component, Component2, Component3, Component4} from '../components';
Kamuran Sönecek
fuente
23

Tenga en cuenta que también puede volver a exportar todo desde un módulo:

export * from './Module/Module';
RynoRn
fuente
Esta sintaxis de comodines solo funcionará en archivos con exportaciones con nombre. Si el archivo solo tiene una única exportación predeterminada, obtendrá el error "No se encontraron exportaciones con nombre en el módulo".
dmbaughman
12

Para los componentes de React Native, esta sintaxis me funciona:

export {default} from 'react-native-swiper';
Cherniv
fuente
Esto me funciona para React (no Native) cuando deseo reexportar un valor predeterminado importado. Lo uso en archivos index.js que no aplican ningún HOC a mis componentes 'puros'
Shiraz
-1

Entonces, encontré que esto funciona bastante bien para la funcionalidad de exportación inmediata de tener un index.jsen la raíz del componentsdirectorio para facilitar la referencia:

import Component from './Component/Component'
import ComponentTwo from './ComponentTwo/ComponentTwo'

module.exports = {
  Component,
  ComponentTwo
};

Necesitas usar module.exports.

Desafinado
fuente
3
Tenga en cuenta que, dado que esto es parcialmente módulos CommonJS, esto solo funcionará específicamente en Babel y fallará si intenta usarlo en un módulo ES6 real una vez que el soporte para ellos aterrice en más entornos, y probablemente dejará de funcionar en futuras versiones de Babel.
loganfsmyth
Correcto. Entremezclando commonJS y es6 importación / exportación en Babel 6 breaks. Babel5 permitió / reforzó este comportamiento incorrecto. En su ejemplo, Componentya no será una referencia a su componente exportado, sino que será un objeto, con su referencia de instancia vivaComponent.default
Scott Silvi
¿Alguien sabe cómo hacer esto sin usar module.exports? Me gusta este método de empaquetar un montón de componentes en un index.jspero no puedo entender la sintaxis. import x from 'x'; import y from 'y'; export default {x, y};luego import {x} from xy;no funciona (y no puedo entender por qué no)
Alex McMillan
2
Alex, ¿lo intentaste en su export {x, y}lugar?
jtompl
Esta respuesta no es es6. Es una plataforma que no es de EcamScript. -1
rektide