Импортировать несколько компонентов в одну строку (Atomic Design + Vue.JS)

Я занимаюсь разработкой проекта с Vue.js и хотел бы применить методологию атомного проектирования, но я хотел бы импортировать компоненты кластеризованным и более разумным способом

В настоящее время

import GridLayout from '@/components/bosons/GridLayout.vue'
import LocalStorage from '@/components/bosons/LocalStorage.vue'

import ButtonStyled from '@/components/atoms/ButtonStyled.vue'
import TextLead from '@/components/atoms/TextLead.vue'
import InputSearch from '@/components/atoms/InputSearch.vue'

import SearchForm from '@/components/molecules/SearchForm.vue'

как бы я хотел

import {
    GridLayout,
    LocalStorage
} from '@/components/bosons'

import {
    ButtonStyled,
    TextLead,
    InputSearch
} from '@/components/atoms'

import {
    SearchForm
} from '@/components/molecules'

Sulution? Я думал о том, чтобы поместить index.js в папки

/bosons/index.js

/atoms/index.js

/molecules/index.js

и index.js импортирует все компоненты и экспортирует, так что это будет что-то вроде

import ButtonStyled from './ButtonStyled.vue'

export default {
  ButtonStyled
}

или же

export { default as ButtonStyled } from './ButtonStyled.vue'

работает нормально, но таким образом все еще статичен, каждый раз, когда вы создаете новый компонент, нужно добавить его index.js, каждый раз, когда вы удаляете компонент, вам также нужно удалить его из index.js

Мне нужно импортировать все компоненты папки динамически

чем ближе я это понял,

const req = require.context('./', true, /\.vue$/)

const modules = {}

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

export const { ButtonStyled, TextLead } = modules

но я все еще определяю имена переменных экспорта статически, мне нужно определить динамику на основе компонентов внутри папки

ПРИМЕЧАНИЕ: я не могу использовать

export default modules

если я использую приведенный выше фрагмент кода, я не смогу импортировать так, как мне нужно, а именно:

import { ButtonStyled } from "@/components/atoms"
Источник

1 ответ

Вот решение, которое динамически импортирует все компоненты в папке, хотя оператор import равен двум вместо одной строки.

Другим недостатком этого решения является то, что вам придется каждый раз импортировать всю папку компонентов, потому что деструктуризация происходит во второй строке. Это может привести к проблемам с производительностью, если вам не нужны все компоненты.

Шаг 1

Я также использовал индексные файлы в папке компонентов, поэтому, например, в вашей папке бозонов добавьте файл index.js со следующим содержимым:

const req = require.context(".", false, /\.vue$/);

const components = {};

req.keys().forEach(fileName => {
  if (fileName === "./index.js") return;
  const componentName = fileName.replace(/(\.\/|\.vue)/g, "");
  components[componentName] = req(fileName).default;
});

export default components;

Это добавляет файлы.vue к объекту компонентов, который затем можно экспортировать. Он исключает файл index.js (сам по себе).

Шаг 2

В вашем файле, куда вы хотите импортировать бозонные компоненты:

import bosons from "@/components/bosons";
const { GridLayout, LocalStorage } = bosons;

Это импортирует компоненты и сохраняет их в переменных, чтобы вы могли их использовать.

Обратите внимание, что в моем решении вы не можете сделать

import { GridLayout, LocalStorage } from "@/components/bosons";

потому что синтаксис import {component} выглядит как деструктурирующий, но это не так. Это относится к экспорту, который выглядит как "экспорт const", но это экспорт "экспорт по умолчанию".

Источник

Я создал плагин Webpack, библиотеку, которая идеально подходит для тех, кто работает с методологией Atomic Design, в основном это делает exports named из каталога, может быть, это поможет другим людям

Плагин Weback - именованный экспорт

Источник
Другие вопросы по тегам