Что случилось с именами модулей после минификации

Question

Я пытаюсь решить проблему с этим кодом :

    import globalComponents from './global-components';
    // ...
    globalComponents.forEach((component) => {
      // eslint-disable-next-line no-underscore-dangle
      Vue.component(component.__file.split('/').pop().split('.')[0], component);
    });

globalComponents - это каталог, содержащий index.js, который импортирует и повторно экспортирует два компонента Vue.js.файлы.Я не знал, что вы могли бы сделать это, но я думаю, что это способ сделать что-то вроде иерархии модулей Python.

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

Answer 1

Поскольку вы используете webpack, возможно, проще использовать require.context(), что избавит вас от головной боли.

const files = require.context('./global-components', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

Таким образом, вам не нужно поддерживать index.jsфайл, который просто импортирует и экспортирует все компоненты для этой цели.Просто создайте SFC в этом каталоге и все готово.