缩小后模块文件名发生了什么变化

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 是一个包含索引的目录.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即可。