如何导出多个组件

Question

我有一个共享文件夹，我将其公开为一个 npm 模块。 在该共享文件夹中，我有一个带有 index.js 的组件文件夹，将它们导出为默认值：

export { default as AqMegaMenu } from "./megaMenu/AqMegaMenu.vue";
export { default as AqDetailsCard } from "./AqDetailsCard.vue";
export { default as AqDoughnutChart } from "./charts/AqDoughnutChart.vue";
...

我的库入口文件是 main.js，我想通过它公开我的整个组件，所以我将它们导入到其他项目中，如下所示：

import {Comp1, Comp2} from "@my/shared"

目前我在main.js中一一导出：

export { default as AqDetailsCard } from "./components/AqDetailsCard.vue";
...

但我想知道是否有办法使用它的 index.js 导出整个组件目录 并且仍然能够将它导入到我上面显示的其他项目中。

Answer 1

你可以试试这样的

import camelCase from 'lodash/camelCase'
const requireModule = require.context('./components', true, /\.vue$/)
const modules = {}

requireModule.keys().forEach(filename => 
{
    const moduleName = camelCase(fileName.match(/([^\\\/]+)\.vue$/)[1]);
    modules[moduleName] = requireModule(fileName)
})
export default modules