¿Es posible importar módulos desde todos los archivos en un directorio, usando un comodín?

Con ES6, puedo importar varias exportaciones desde un archivo como este:

import {ThingA, ThingB, ThingC} from 'lib/things'; 

Sin embargo, me gusta la organización de tener un módulo por archivo. Termino con importaciones como esta:

 import ThingA from 'lib/things/ThingA'; import ThingB from 'lib/things/ThingB'; import ThingC from 'lib/things/ThingC'; 

Me encantaría poder hacer esto:

 import {ThingA, ThingB, ThingC} from 'lib/things/*'; 

o algo similar, con la convención comprendida de que cada archivo contiene una exportación predeterminada, y cada módulo recibe el mismo nombre que su archivo.

es posible?

No creo que esto sea posible, pero afaik la resolución de los nombres de los módulos depende de los cargadores de módulos, por lo que podría haber una implementación de cargador que sí lo permita.

Hasta entonces, podría usar un “archivo de módulo” intermedio en lib/things/index.js que solo contiene

 export * from 'ThingA'; export * from 'ThingB'; export * from 'ThingC'; 

y te permitiría hacer

 import {ThingA, ThingB, ThingC} from 'lib/things'; 

Solo una variación del tema ya proporcionado en la respuesta, pero ¿qué tal esto?

En una Thing ,

 export default function ThingA () {} 

En things/index.js ,

 export {default as ThingA} from './ThingA' export {default as ThingB} from './ThingB' export {default as ThingC} from './ThingC' 

Luego, para consumir todas las cosas en otro lugar,

 import * as things from './things' things.ThingA() 

O para consumir solo algunas cosas,

 import {ThingA,ThingB} from './things' 

Las respuestas actuales sugieren una solución alternativa, pero me molesta que esto no exista, así que he creado un complemento de babel que hace esto.

Instalarlo usando:

 npm i --save-dev babel-plugin-wildcard 

luego .babelrc a tu .babelrc con:

 { "plugins": ["wildcard"] } 

ver el repository para obtener información detallada de la instalación


Esto te permite hacer esto:

 import * as Things from './lib/things'; // Do whatever you want with these :D Things.ThingA; Things.ThingB; Things.ThingC; 

de nuevo, el repository contiene más información sobre qué es exactamente lo que hace, pero hacerlo de esta manera evita crear archivos index.js y también ocurre en tiempo de comstackción para evitar hacer readdir en el tiempo de ejecución.

También con una versión más nueva puedes hacer exactamente como tu ejemplo:

  import { ThingsA, ThingsB, ThingsC } from './lib/things/*'; 

funciona igual que el anterior.

Los he usado algunas veces (en particular para construir objetos masivos dividiendo los datos en muchos archivos (por ejemplo, nodos AST)), para construirlos hice un pequeño script (que acabo de agregar a npm para que todos los demás puede usarlo).

Uso (actualmente necesitará usar babel para usar el archivo de exportación):

 $ npm install -g folder-module $ folder-module my-cool-module/ 

Genera un archivo que contiene:

 export {default as foo} from "./module/foo.js" export {default as default} from "./module/default.js" export {default as bar} from "./module/bar.js" ...etc 

Entonces solo puedes consumir el archivo:

 import * as myCoolModule from "my-cool-module.js" myCoolModule.foo() 

Solo otro enfoque a la respuesta de @ Bergi

 // lib/things/index.js import ThingA from './ThingA'; import ThingB from './ThingB'; import ThingC from './ThingC'; export default { ThingA, ThingB, ThingC } 

Usos

 import {ThingA, ThingB, ThingC} from './lib/things'; 

Esto no es exactamente lo que pediste pero, con este método, puedo iterar a través de la lista de componentsList en mis otros archivos y usar una función como componentsList.map(...) que me parece muy útil.

 import StepOne from './StepOne'; import StepTwo from './StepTwo'; import StepThree from './StepThree'; import StepFour from './StepFour'; import StepFive from './StepFive'; import StepSix from './StepSix'; import StepSeven from './StepSeven'; import StepEight from './StepEight'; const componentsList= () => [ { component: StepOne(), key: 'step1' }, { component: StepTwo(), key: 'step2' }, { component: StepThree(), key: 'step3' }, { component: StepFour(), key: 'step4' }, { component: StepFive(), key: 'step5' }, { component: StepSix(), key: 'step6' }, { component: StepSeven(), key: 'step7' }, { component: StepEight(), key: 'step8' } ]; export default componentsList; 

si no exporta los valores predeterminados en A, B, C, simplemente exporta {}, entonces es posible hacerlo

 // things/A.js export function A() {} // things/B.js export function B() {} // things/C.js export function C() {} // foo.js import * as Foo from ./thing Foo.A() Foo.B() Foo.C()