Выполнение динамического импорта в Vite/Rollup с произвольной глубиной каталога. ⇐ Javascript

[Anonymous]

В Vite и Rollup (с помощью @rollup/plugin-dynamic-import-vars) можно объявить динамический импорт в коде:

Код: Выделить всё

import(`./components/${name}.js`);

Код анализируется во время сборки, и Rollup создаст фрагмент для каждого файла, соответствующего glob ./comComponents/*.js. Затем во время выполнения версия кода, обработанная с помощью Rollup, импортирует правильный фрагмент на основе значения name во время выполнения. Эта стратегия работает при динамическом импорте с глубиной каталога, равной единице.
Можно также использовать каталоги с другой глубиной, если все фрагменты имеют одинаковую глубину:

Код: Выделить всё

import(`./components/${superName}/${subName}.js`);

В этом случае Rollup будет рассматривать любой файл, соответствующий glob ./comComponents/*/*.js.
У меня более сложная структура папки компонентов:

Код: Выделить всё

components/
├─ Baz.js
├─ FooBar/
│  ├─ Bar.js
│  ├─ Foo.js
├─ Qux.js

Здесь глубина каталога произвольна и зависит от файла. Baz.js и Qux.js имеют глубину, равную единице, и их можно импортировать с помощью ./comComponents/${name}.js, тогда как Bar.js и Foo.js имеют глубину, равную двум, и их необходимо импортировать с помощью ./comComponents/${superName}/${subName}.js. (В моей реальной реальной ситуации есть еще более глубокие файлы.)
В идеале я бы хотел написать код примерно так, где pathAndName может быть Baz, FooBar/Bar, FooBar/Foo или Qux:

Код: Выделить всё

import(`./components/${pathAndName}.js`);

К сожалению, Rollup и Vite, похоже, не могут справиться с этой ситуацией. Глоб, с которым я бы хотел, чтобы Rollup сопоставлялся, был бы ./comComponents/**/*.js. Однако документация @rollup/plugin-dynamic-import-vars утверждает:

Глобы имеют глубину только на один уровень
При создании глобусов каждая переменная в строке преобразуется в глобус * с максимум одной звездочкой на глубину каталога. Это позволяет избежать непреднамеренного добавления файлов из многих каталогов при импорте.

И если я попробую нужный код, я получаю в браузере ошибку, подобную следующей:

Ошибка: динамический импорт неизвестной переменной: ./comComponents/FooBar/Bar.js. Обратите внимание, что переменные представляют имена файлов только на один уровень глубины.

Если бы это был Webpack, я бы сделал следующее, и это не было бы проблемой:

Код: Выделить всё

import(
/* webpackInclude: /\.js$/ */
`components/${chunk_name}`
);

Итак, есть ли способ сделать это? Плагин, который я пропустил в поисках? Каким-то другим способом, которым я собираюсь это сделать? Или совет просто «Не делайте этого, это плохо, и вот почему»?

Подробнее здесь: https://stackoverflow.com/questions/798 ... tory-depth