Как глобально зарегистрировать компоненты, в цикле?

Question

[Евгений]

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

Идея была такая:
Приложение при сборке обходит папки модуля, в котором лежит файл с глобальными компонентами модуля, в виде объекта (ключ -> название, значение - расположение). Затем я подключаю файл с этим обьектом и перебираю его свойства, регистрируя компонент.

// Пример структуры файла одного из модулей 
export default {
    ModulePageItemsTypes:   "./components/pages/items/ModulePageItemsTypes",
    .....
}

Но когда я пытают циклом перебрать этот файл и зарегистрировать компоненты.

import globalComponents from './pathToModule/globals'
for (var key in globalComponents) {
    // Вот так компонент регистрируется (если указывать путь строкой)
    Vue.component(key, require('./components/pages/items/ModulePageItemsTypes').default);

    // Если путь указан через переменную цикла, то при сборке выдает ошибку.
    Vue.component(key, require(globalComponents[key]).default);
}

Или может есть более простой способ.

Comments

[Евгений]

Неужели нет никаких вариантов?

Answer 1

[IlonMusk]

Попробуйте require(`${globalComponents[key]}`).default)

Comments

[Евгений]

К сожалению нет. Точно такая же ошибка.

Module not found: Error: Can't resolve globalComponents[key]

[IlonMusk]

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

[IlonMusk]

Просто вынесите в константу require(global..), а во Vue.component передавайте key и component.default || component

[Евгений]

Ну тут ситуация другая. Вы получили список всех компонентов через функцию require.context, а там хранятся не только ключи файлов. Если я так делаю, то у меня тоже срабатывает, но регистрирует глобально все компоненты.

Если же я в своем коде вынесу строку в константу, все равно не срабатывает.

import globalComponents from './globals'
for (var key in globalComponents) {
    const componentConfig = require(globalComponents[key]);
    Vue.component(key, componentConfig.default || componentConfig)
}

Пока я вижу выход только один. Давать именам файлов название Global...... обходить все каталоги и регулярной проверять название. Но как то это не совсем то что я хотел.
Такая схема работает. Проверил.

[Евгений]

На самом деле даже вот такая конструкция не работает

const componentPath = './components/HomeTest.vue';
const component = require(componentPath);