如何使用动态名称导出变量

Question

我在nuxt.js中有一个components文件夹/components/atoms/在该文件夹中，我可以index.js动态导出所有组件const req = require.context('./', true, /\.vue$/)const components = {}req.keys().forEach(fileName => {  const componentName = fileName.replace(/^.+\/([^/]+)\.vue/, '$1')  components[componentName] = req(fileName).default})export const { ButtonStyled, TextLead, InputSearch } = components所以我可以随心所欲地导入import { ButtonStyled } from "@/components/atoms"问题是我正在定义要静态导出，固定的变量，因此对于每个创建的组件，我需要手动添加另一个变量我需要动态导出变量名例子：DynamicCreation = ['ButtonStyled', 'TextLead', 'InputSearch']export const { DynamicCreation } = components // output -> export const { ButtonStyled, TextLead,InputSearch  } = components我需要导出已经非结构化变量的名称注意：我无法使用此文件，export default components因为我无法像这样导入import { ButtonStyled } from "@/components/atoms"

Answer 1

您可以通过这种方式进行操作，检查是否需要什么。

创建一个文件以导入组件的组合：allComponents.js

export default {

 componentOne: require('./passToOneComponent.js');

 componentTwo: require('./passToOneComponent.js');

 componentThree: require('./passToOneComponent.js');

}

在index.js中之后，导出具有您想要的名称的allComponents.js：

export {default as SomeName } from 'allComponents.js';

因此，在最终文件中，您可以执行以下操作：

import { SomeName } from 'index.js';

SomeName.componentOne();

Answer 2

我创建了一个库进行这种类型的导出，任何想要的人都可以通过安装 npm

我创建了一个Webpack插件，该插件可以从组件进行命名导出，也许这可以帮助其他人

Weback插件-named-exports