将变量ES5动态导出到ES6

Question

我正在研究vue / nuxt.js项目，想应用原子设计方法，我想以集群化和更智能的方式导入组件。现在import ButtonStyled from '@/components/atoms/ButtonStyled.vue'import TextLead from '@/components/atoms/TextLead.vue'import InputSearch from '@/components/atoms/InputSearch.vue'我多么希望import {    ButtonStyled,    TextLead,    InputSearch} from '@/components/atoms'解决方案？index.js 在以下文件夹中 atoms它运行完美（ES5）// ES5 works ?const req = require.context('.', false, /\.vue$/)req.keys().forEach(fileName => {  const componentName = fileName.replace(/^.+\/([^/]+)\.vue/, '$1')  module.exports[componentName] = req(fileName).default})// ES6 does not work ?// ERROR: Module build failed, 'import' and 'export' may only appear at the top levelconst req = require.context('.', false, /\.vue$/)req.keys().forEach(fileName => {  const componentName = fileName.replace(/^.+\/([^/]+)\.vue/, '$1')  export const [componentName] = req(fileName).default})nuxt use ES6NOTE：我无法导出对象，因为无法使用，import {ButtonStyled}否则导入后必须解构对象我需要导出以便可以使用import { ButtonStyled } from '@/components/atoms'我需要导出文件夹中每个组件的名称任何建议，信息或建议，将不胜感激。

Answer 1

首先，在EM6上使用导入/导出时，您需要小心，因为现在您无法导出js文件顶级范围之外的任何位置，并且它的一般处理方式与EM5不同。

现在有了问题。我看到您正在从ForEach循环/函数内部导出组件，并且在EM5中完全可以正常工作，但与EM6完全不同，并且至少在不期望组件数量的情况下，我看到了两种解决问题的方法迅速增长：

调用一个返回组件并导出它的函数，对每个组件执行此操作。应该看起来像这样：

./componentsFile.js

exports.component1 = () => { /*code...*/ return component }

exports.component2 = () => { /*code...*/ return component }

./renderingFile.js

import { component1, component2 } from './componentsFile.js'

/* use the components that you get from the return... */

另一种方法是构建一个对象，其中的字段是组件。并在导入时对其进行销毁。

./componentsFile.js

     const component1 = /*Create the component*/

     const component2 = /*Create the component*/

     exports.object = {

         component1,

         component2,}

./renderingFile.js

   import { component1, component2 } from './componentsFile.js'

   /*Use the components...*/

我认为您可以通过以下两种方式来获得想法。

Answer 2

我创建了一个库，为我解决了这个问题，使导出从目录中命名，并侦听模块的创建，重命名和排除，并更新了执行导出的index.js。

也许对其他人有帮助。

命名出口