Можно ли импортировать модули из всех файлов в каталоге, используя подстановочный?


С 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 161

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 файлы, а также происходит во время компиляции, чтобы избежать делать readdirs во время выполнения.

также с более новой версией вы можете сделать точно так же, как ваш пример:

 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;

Если вы не экспортируете по умолчанию в A, B, C, а просто экспортируете {}, то это можно сделать

// 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()