Как сократить код?

Question

[imeyuves]

Пишу проект на vue с использованием Primevue. Импортирую много элементов, из-за этого код выглядит немного так себе, как сократить все это?

import PrimeVue from "primevue/config"
import 'primevue/resources/themes/aura-light-blue/theme.css'
import IconField from 'primevue/iconfield'
import InputIcon from 'primevue/inputicon'
import InputText from 'primevue/inputtext'
import Divider from 'primevue/divider'
import Toolbar from 'primevue/toolbar'
import Button from 'primevue/button'
import Dialog from 'primevue/dialog'
import Form from "primevue/forms"

app.component('Form', Form)
app.component('Dialog', Dialog)
app.component('Button', Button)
app.component('InputIcon', InputIcon)
app.component('IconField', IconField)
app.component('InputText', InputText)
app.component('Divider', Divider)
app.component('Toolbar', Toolbar)

Comments

[Adamos]

Использовать IDE, которая аккуратно свернет эти объявления до тех пор, пока они вам не понадобились.
"Наши саперы незамедлительно выехали на место и приняли меры. Теперь предмет на бомбу не похож" (с)

[Wispik]

Как вам такие вопросы в голову то приходят? В примере 19 строк кода ВСЕГО, куда их экономить-то? Как понимаю, это все в index.js импортируется, и часто ты в этот файл заглядываешь, что тебе код глаза мозолит?
И кстати vite или что ты там используешь, при сборке эти импорты оптимизирует, так что толку от этой экономии на строках, никакого

Answer 1

[Dosya]

const components = {
  Form: 'form',
  Dialog: 'dialog',
  Button: 'button',
  InputIcon: 'inputicon',
  IconField: 'iconfield',
  InputText: 'inputtext',
  Divider: 'divider',
  Toolbar: 'toolbar'
}

Object.keys(components).forEach((component) => {
  const name = components[component]
  app.component(component, () => import(`primevue/${name}`))
})

Comments

[Adamos]

А потом заходишь в код любого из этих компонентов и задаешь IDE простую задачку "Find Usage".
А оно тебе в ответ - ШЫШЪ.
Потому что спички успешно сэкономлены.
Аж четыре строчки!

[Wispik]

Ну если совсем до маразма дойти и извращаться, в попытке зачем-то экономить строчки, то можно так

const components = ['Form', 'Dialog', 'Button']

components .forEach(el => {
    app.component(el, () => import(`primevue/${el.toLowerCase()}`))
})

Но если бы я увидел такой код в рабочем проекте, это по рукам арматурой надо сразу))

[Adamos]

Wispik, если извращаться, можно скомкать в ['...'.].forEach(... - и все в одну строчку, лебединым аккордом.

Answer 2

[Сергей delphinpro]

Используйте автоимпорт.
Есть официальный плагин, посмотрите в документации.