С 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/*';

или что-то подобное, с понятным соглашением, что каждый файл содержит один экспорт по умолчанию, и каждый модуль называется так же, как его файл.

Это возможно?

Я не думаю, что это возможно, но на самом деле разрешение имен модулей зависит от загрузчиков модулей, так что может быть реализация загрузчика, которая поддерживает это.

До тех пор вы можете использовать промежуточный «файл модуля», 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/*';

работает так же, как и выше.

Великие гугли магглы! Это было сложнее, чем нужно было.

Экспортировать одну квартиру по умолчанию

Это отличная возможность использовать распространение ( ...в { ...Matters, ...Contacts }ниже:

// imports/collections/Matters.js
export default {           // default export
  hello: 'World',
  something: 'important',
};

// imports/collections/Contacts.js
export default {           // default export
  hello: 'Moon',
  email: 'hello@example.com',
};

// imports/collections/index.js
import Matters from './Matters';      // import default export as var 'Matters'
import Contacts from './Contacts';

export default {  // default export
  ...Matters,     // spread Matters, overwriting previous properties
  ...Contacts,    // spread Contacts, overwriting previosu properties
};

// imports/test.js
import collections from './collections';  // import default export as 'collections'

console.log(collections);

Затем, чтобы запустить скомпилированный код babel из командной строки (из проекта root /):

$ npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node 
(trimmed)

$ npx babel-node --presets @babel/preset-env imports/test.js 
{ hello: 'Moon',
  something: 'important',
  email: 'hello@example.com' }

Экспорт одного древовидного по умолчанию

Если вы не хотите перезаписывать свойства, измените:

// imports/collections/index.js
import Matters from './Matters';     // import default as 'Matters'
import Contacts from './Contacts';

export default {   // export default
  Matters,
  Contacts,
};

И вывод будет:

$ npx babel-node --presets @babel/preset-env imports/test.js
{ Matters: { hello: 'World', something: 'important' },
  Contacts: { hello: 'Moon', email: 'hello@example.com' } }

Экспорт нескольких именованных экспортов без по умолчанию

Если вы посвящены DRY , синтаксис в импорте также меняется:

// imports/collections/index.js

// export default as named export 'Matters'
export { default as Matters } from './Matters';  
export { default as Contacts } from './Contacts'; 

Это создает 2 именованных экспорта без экспорта по умолчанию. Затем измените:

// imports/test.js
import { Matters, Contacts } from './collections';

console.log(Matters, Contacts);

И вывод:

$ npx babel-node --presets @babel/preset-env imports/test.js
{ hello: 'World', something: 'important' } { hello: 'Moon', email: 'hello@example.com' }

Импортировать все именованные экспорты

// imports/collections/index.js

// export default as named export 'Matters'
export { default as Matters } from './Matters';
export { default as Contacts } from './Contacts';

// imports/test.js

// Import all named exports as 'collections'
import * as collections from './collections';

console.log(collections);  // interesting output
console.log(collections.Matters, collections.Contacts);

Обратите внимание на разрушение import { Matters, Contacts } from './collections'; в предыдущем примере.

$ npx babel-node --presets @babel/preset-env imports/test.js
{ Matters: [Getter], Contacts: [Getter] }
{ hello: 'World', something: 'important' } { hello: 'Moon', email: 'hello@example.com' }

На практике

Учитывая эти исходные файлы:

/myLib/thingA.js
/myLib/thingB.js
/myLib/thingC.js

Создание /myLib/index.jsдля объединения всех файлов побеждает цель импорта / экспорта. Во-первых, было бы проще сделать все глобальным, чем сделать все глобальным с помощью импорта / экспорта через index.js «файлы-оболочки».

Если вы хотите определенный файл, import thingA from './myLib/thingA'; в ваших собственных проектах.

Создание «файла-обертки» с экспортом для модуля имеет смысл только в том случае, если вы собираете пакет для npm или для многолетнего многопользовательского проекта.

Сделал это так далеко? Смотрите документы для более подробной информации.

Кроме того, yay для Stackoverflow, наконец, поддерживает три в качестве разметки кода.

Вы можете использовать асинхронный импорт ():

import fs = require('fs');

а потом:

fs.readdir('./someDir', (err, files) => {
 files.forEach(file => {
  const module = import('./' + file).then(m =>
    m.callSomeMethod();
  );
  // or const module = await import('file')
  });
});

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

./modules/moduleA.js

export const example = 'example';
export const anotherExample = 'anotherExample';

./modules/index.js

// require all modules on the path and with the pattern defined
const req = require.context('./', true, /.js$/);

const modules = req.keys().map(req);

// export all modules
module.exports = modules;

./example.js

import { example, anotherExample } from './modules'

Я использовал их несколько раз (в частности, для создания массивных объектов, разделяющих данные по многим файлам (например, узлы 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()

Просто другой подход к ответу @ Берги

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

Вы также можете использовать require:

const moduleHolder = []

function loadModules(path) {
  let stat = fs.lstatSync(path)
  if (stat.isDirectory()) {
    // we have a directory: do a tree walk
    const files = fs.readdirSync(path)
    let f,
      l = files.length
    for (var i = 0; i < l; i++) {
      f = pathModule.join(path, files[i])
      loadModules(f)
    }
  } else {
    // we have a file: load it
    var controller = require(path)
    moduleHolder.push(controller)
  }
}

Затем используйте свой moduleHolder с динамически загружаемыми контроллерами:

  loadModules(DIR) 
  for (const controller of moduleHolder) {
    controller(app, db)
  }

Это не совсем то, что вы просили, но с помощью этого метода я могу выполнять итерации 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;

Если вы используете веб-пакет. Это импортирует файлы автоматически и экспортирует как API пространство имен .

Так что не нужно обновляться при каждом добавлении файла.

import camelCase from "lodash-es";
const requireModule = require.context("./", false, /\.js$/); // 
const api = {};

requireModule.keys().forEach(fileName => {
  if (fileName === "./index.js") return;
  const moduleName = camelCase(fileName.replace(/(\.\/|\.js)/g, ""));
  api[moduleName] = {
    ...requireModule(fileName).default
  };
});

export default api;

Для пользователей Typescript;

import { camelCase } from "lodash-es"
const requireModule = require.context("./folderName", false, /\.ts$/)

interface LooseObject {
  [key: string]: any
}

const api: LooseObject = {}

requireModule.keys().forEach(fileName => {
  if (fileName === "./index.ts") return
  const moduleName = camelCase(fileName.replace(/(\.\/|\.ts)/g, ""))
  api[moduleName] = {
    ...requireModule(fileName).default,
  }
})

export default api

Я смог взять у пользователя подход atilkan и немного его изменить:

Для пользователей Typescript;

require.context('@/folder/with/modules', false, /\.ts$/).keys().forEach((fileName => {
    import('@/folder/with/modules' + fileName).then((mod) => {
            (window as any)[fileName] = mod[fileName];
            const module = new (window as any)[fileName]();

            // use module
});

}));

если вы не экспортируете значения по умолчанию в 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()