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.


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

23

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

export * from './Module/Module';

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

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.


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
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.