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

Question

我正在尝试解决this code 的问题：

    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 即可。