Можно ли импортировать модули из всех файлов в каталоге, используя подстановочный?
С ES6, я могу импортировать несколько экспорта из файла, как это:
import {ThingA, ThingB, ThingC} from 'lib/things';
тем не менее, мне нравится организация наличия одного модуля на файл. Я в конечном итоге с импортом, как это:
import ThingA from 'lib/things/ThingA';
import ThingB from 'lib/things/ThingB';
import ThingC from 'lib/things/ThingC';
Я хотел бы иметь возможность сделать это:
import {ThingA, ThingB, ThingC} from 'lib/things/*';
или что-то подобное, с понятным соглашением, что каждый файл содержит один экспорт по умолчанию, и каждый модуль называется так же, как его файл.
это возможно?
7 ответов:
Я не думаю, что это возможно, но afaik разрешение имен модулей зависит от загрузчиков модулей, поэтому может быть реализация загрузчика, которая поддерживает это.
до тех пор, вы можете использовать промежуточный "файл модуля" в
lib/things/index.js
, содержащихexport * from 'ThingA'; export * from 'ThingB'; export * from 'ThingC';
и это позволит вам сделать
import {ThingA, ThingB, ThingC} from 'lib/things';
просто вариация на тему уже представлена в ответе, но как насчет этого:
на
Thing
,export default function ThingA () {}
на
things/index.js
,export {default as ThingA} from './ThingA' export {default as ThingB} from './ThingB' export {default as ThingC} from './ThingC'
тогда потреблять все вещи в другом месте,
import * as things from './things' things.ThingA()
или потреблять только некоторые вещи,
import {ThingA,ThingB} from './things'
текущие ответы предполагают обходной путь, но меня беспокоит, почему этого не существует, поэтому я создал
babel
плагин, который делает это.установить с помощью:
npm i --save-dev babel-plugin-wildcard
затем добавьте его в свой
.babelrc
С:{ "plugins": ["wildcard"] }
посмотреть РЕПО для получения подробной информации об установке
это позволяет сделать следующее:
import * as Things from './lib/things'; // Do whatever you want with these :D Things.ThingA; Things.ThingB; Things.ThingC;
опять РЕПО содержит дополнительную информацию о том, что именно он делает, но делать это таким образом позволяет избежать создания
index.js
файлы, а также происходит во время компиляции, чтобы избежать делатьreaddir
s во время выполнения.также с более новой версией вы можете сделать точно так же, как ваш пример:
import { ThingsA, ThingsB, ThingsC } from './lib/things/*';
работает так же, как выше.
я использовал их несколько раз (в частности, для создания массивных объектов, разделяющих данные по многим файлам (например, узлам AST)), чтобы построить их, я сделал крошечный скрипт (который я только что добавил в npm, чтобы все остальные могли его использовать).
использование (в настоящее время вам нужно будет использовать babel для использования файла экспорта):
$ npm install -g folder-module $ folder-module my-cool-module/
создает файл, содержащий:
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
тогда вы можете просто использовать файл:
import * as myCoolModule from "my-cool-module.js" myCoolModule.foo()
просто другой подход к ответу @Bergi
// lib/things/index.js import ThingA from './ThingA'; import ThingB from './ThingB'; import ThingC from './ThingC'; export default { ThingA, ThingB, ThingC }
использует
import {ThingA, ThingB, ThingC} from './lib/things';
Это не совсем то, что вы просили, но, с помощью этого метода я могу проходить через
componentsList
в других моих файлах и использовать такие функции, какcomponentsList.map(...)
который я нахожу очень полезным !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;