变量 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/, '')
  module.exports[componentName] = req(fileName).default
})

// ES6 does not work 
// ERROR: Module build failed, 'import' and 'export' may only appear at the top level
const req = require.context('.', false, /\.vue$/)

req.keys().forEach(fileName => {
  const componentName = fileName.replace(/^.+\/([^/]+)\.vue/, '')
  export const [componentName] = req(fileName).default
})

nuxt use ES6

NOTE: 我无法导出对象，因为我无法使用 import {ButtonStyled} 否则我将不得不在导入后解构对象

我需要导出才能使用

import { ButtonStyled } from '@/components/atoms'

我需要导出文件夹中每个组件的名称

如有任何意见、信息或建议，我们将不胜感激。

提前致谢。

Answer 1

首先，在 EM6 上使用 import/export 时需要小心，因为现在您无法导出 js 文件的顶级范围之外的任何地方及其一般处理与 EM5 不同。

问题来了。我看到您正在从 ForEach loop/function 内部导出组件，这在 EM5 中完全可以正常工作，但在 EM6 中却有所不同，至少我看到了两种解决问题的方法，如果您不期望数字动态增长的组件数：

调用一个 returns 组件的函数并将其导出，为每个组件执行此操作。应该看起来像这样：

./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。

也许对其他人有帮助。

变量 ES5 到 ES6 的动态导出

Dynamic export of variables ES5 to ES6

javascript

ecmascript-6

vue.js

es6-modules

nuxt.js

named-exports