Question

我正在制作一个Vue js应用程序，在其中我需要从某个目录中导出所有文件/组件，并将这些文件/组件导入到文件path.js中。

如果我在require中全部index.js将组件导出，以便可以像path.js一样在import {Component1,Component2} from index.js中访问它们？

注意：我不想使用import关键字在index.js中明确包含组件，这就是我使用require的原因。

Index.js

import upperFirst from "lodash/upperFirst";
import camelCase from "lodash/camelCase";


const requireComponent = require.context(".", true, /\.vue$/); // used to fetch Component1.vue and Component2.vue
const components = {};


requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName);
  const componentName = upperFirst(
    camelCase(fileName.replace(/^\.\//, "").replace(/\.\w+$/, ""))
    );
  
  components[componentName] = requireComponent(fileName).default;
  
});
export default components;

paths.js

import {Component1,Component2} from 'index.js';'

console.log(Component1); // undefined

我尝试将组件导出为export {...components}，但这会引发错误。

Answer 1

应该是

从“ index.js”导入组件

当您将其导出为单个常数值时。

Answer 2

在Index.js中没有Component1或Component2之类的东西，但是我想我知道您在寻找什么。

您可以通过命名的进出口来实现。

下面的简单示例：

index.js

export {components[0] as Component1};
export {components[1] as Component2};

export default components;

paths.js

    import {Component1, Component2} from 'index.js';
    //some code

如何导出所有带有require的组件？

2 个答案: