импортировать несколько компонентов в одну строку (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'

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

/bosons/index.js

/atoms/index.js

/molecules/index.js

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

import ButtonStyled from './ButtonStyled.vue'

export default {
  ButtonStyled
}

or

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"

javascript vue.js regex vue-component atomic-design
person Yung Silva    schedule 25.04.2019    source источник
comment
Попробуйте пометить, какой сборщик javascript вы используете (я думаю, что Webpack используется по умолчанию), потому что то, что вы хотите сделать, вероятно, может быть выполнено в конфигурации сборщика.   -  person Benjamin Davies    schedule 25.04.2019
comment
Что ты хочешь этим сказать? but is not feasible, every component created or deleted the index.js needs to be changed - что вы имеете в виду под словом «изменилось»? Я только что проверил это с помощью решения index.js, и оно отлично сработало.   -  person Matt Oestreich    schedule 25.04.2019
comment
@MattOestreich таким образом я импортирую статически, поэтому с каждым созданным компонентом я должен добавить его в index.js, если я удалю компонент, также нужно удалить из index.js, мне нужен index.js для импорта всех компонентов внутри папки динамически, извините за мой плохой английский   -  person Yung Silva    schedule 25.04.2019
comment
Итак, вы хотите автоматически импортировать каждый файл Vue в своем проекте одним движением, независимо от того, в каком каталоге они находятся? Я определенно не рекомендую это делать, но зачем вам вообще это нужно?   -  person Matt Oestreich    schedule 25.04.2019

Ответы (2)


arrow_upward
1
arrow_downward

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

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

Шаг 1

Я также использовал индексные файлы в папке компонентов, например, в папке bosons добавьте файл 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} выглядит как деструктуризация, но это не так. Это относится к экспорту, который выглядит как export const, но это экспорт по умолчанию для экспорта.

person Paul    schedule 25.04.2019
comment
Я обновил свой вопрос как можно ближе к решению, взгляните, пожалуйста, и могу ли я помочь - person Yung Silva; 25.04.2019
comment
Я не могу придумать, как это можно сделать, поскольку, насколько мне известно, вы не можете выполнять динамический экспорт const в javascript. Как сказал Мэтт, то, что вы хотите сделать, довольно необычно, поэтому было бы неплохо подумать о различных подходах и о том, действительно ли необходимо импортировать все подобные компоненты. Если вам действительно, действительно, действительно нужно это сделать, вы можете написать сценарий вне вашего приложения vue, который изменяет сам код. - person Paul; 25.04.2019

arrow_upward
-1
arrow_downward

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

Плагин Weback - named-exports

person Yung Silva    schedule 09.07.2019