Динамический экспорт переменных ES5 в ES6 - PullRequest
Новая
       13

Динамический экспорт переменных ES5 в ES6

1 голос
/ 03 мая 2019

Я работаю над проектом 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 level
const req = require.context('.', false, /\.vue$/)

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

nuxt use ES6

NOTE: я не могу экспортировать объект, потому что не могу использовать import {ButtonStyled}, или мне придется деструктурировать объект после его импорта

Мне нужно экспортировать, чтобы я мог использовать 

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

Мне нужно экспортировать имя каждого компонента в папку

Будем благодарны за любые советы, информацию или предложения.

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 09 июля 2019

Я создал библиотеку, которая решила эту проблему для меня, делает экспорт именованным из каталога и слушает создание, переименование и исключение модулей и обновляет index.js, который выполняет экспорт.

Может бытьэто помогает другим людям.

named-export

0 голосов
/ 03 мая 2019

Ну, во-первых, вы должны быть осторожны при использовании импорта / экспорта на 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...*/

Я думаю, вы можете понять эту идею двумя способами.

...