Импорт всех модулей из директории с wildcard в ES6

Быстрый ответ

Прямой импорт из директории по шаблону в JavaScript с использованием стандартного синтаксиса ES6 import не поддерживается. Тем не менее, с применением fs и path из Node.js, а также с использованием асинхронного import(), возможно динамически загрузить все модули из каталога:

const fs = require('fs').promises;
const path = require('path');

async function importModules(directory) {
  const files = await fs.readdir(directory);
  const modules = files.map(file => import(path.resolve(directory, file)));
  return Promise.all(modules);
}

Такой подход позволяет осуществлять загрузку в процессе выполнения программы, считывая файлы из каталога и импортируя их как отдельные модули в форме промисов.

Реализация стратегии с использованием index.js

В файле index.js можно собрать все экспорты модулей в одном месте:

// В вашем index.js
export { default as ModuleA } from './ModuleA.js';
export { default as ModuleB } from './ModuleB.js';

Это упрощает код и позволяет реализовать импорт через единую точку входа.

import { ModuleA, ModuleB } from './lib/things';

Усиление возможностей Babel с использованием шаблонов

Пользователи Babel могут воспользоваться плагином babel-plugin-wildcard, который расширяет возможности импорта:

1. Установите плагин: bash npm install babel-plugin-wildcard --save-dev
2. Настройте его в файле .babelrc: json { "plugins": [ "wildcard" ] }

Теперь вы готовы к масштабному использованию импорта:

import * as Things from 'lib/things';

Воспользуйтесь возможностями динамических импортов

Функция import() позволяет загружать модули по мере их необходимости:

for (const file of await fs.readdir(directory)) {
  import(`./${file}`).then(module => {
    module.doTheThing();
  });
}

Применение await в import() делает код более компактным:

const module = await import(`./${filename}`);
module.doTheThing();

Используйте мощь синтаксиса ES6

Широкие возможности ES6, такие как оператор расширения и именованные экспорты, помогают организовать код более чистым и аккуратным способом:

export const ModuleA = ...;

Данный подход способствует удобству поддержки и управлению модулями.

Визуализация

Определите каждый файл в вашем каталоге как часть пазла 🧩:

Каталог:
🧩 module1.js
🧩 module2.js
🧩 module3.js

Наша задача — собрать данную картинку автоматически:

import * as allModules from './puzzles/*';

Замечание: встроенной поддержки шаблонного импорта в JavaScript нет, но вы можете использовать динамические импорты или такие инструменты сборки как Webpack.

Проявляйте осторожность, используя глобальные переменные

Глобальные переменные могут исключить необходимость в импортах и экспортах при использовании index.js:

// В файле index.js
global.ModuleA = require('./ModuleA');

Но не забывайте о необходимой осторожности при использовании глобальных переменных, чтобы предотвратить загрязнение пространства имен.

Используйте помощь require.context() в Webpack

Функция require.context() в Webpack предоставляет способ импортировать все файлы из одного каталога:

const req = require.context('./directory', false, /\.js$/);
req.keys().forEach(key => {
  const module = req(key);
});

Полезные материалы

1. Модули: модули ECMAScript в Node.js — здесь можно найти официальную документацию по модулям ES.
2. import – JavaScript на MDN Web Docs — на этом сайте рассказано о динамических импортах.
3. Управление зависимостями в webpack — в этом руководстве описан процесс импорта каталогов и управления зависимостями.
4. babel-plugin-wildcard – npm — страница плагина Babel для реализации шаблонного импорта.
5. Динамические импорты на JavaScript.Info — на этой странице подробно описывается использование динамических импортов в JavaScript.
6. node.js require all files in a folder? на Stack Overflow — здесь можно прочитать обсуждение стратегий импорта файлов из каталога в Node.js.
7. esbuild – Плагины — здесь описываются плагины загрузчика esbuild для настройки процесса импорта.