5 мин. Очистите конфигурацию nuxt.config.js, чтобы сделать ее более читабельной.

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

TLTR; :: Поместите свои длинные строки и описания, объекты и т. д. в отдельный модуль JS, чтобы позже импортировать их в nuxt.config.js

В этом примере я буду использовать модуль конфигурации vue-meta в качестве примера.

Решение №1 — Частичная абстракция

До

//nuxt.config.js
module.exports = {
//...
    
    head: {
    title: 'MY TITLE',
    titleTemplate: '%s | MY TITLE',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        name: 'description',
        content: `meta data
            meta data
            meta data
            meta data
            meta data
            meta data
            meta data
            meta data`
      },
      {
        name: 'keywords',
        content: `meta data
            meta data
            meta data
            meta data
            meta data
            meta data
            meta data
            meta data`
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    script: [
      //...
    ]
  },
    
//...
}

После

//assets/js/meta-data.js
module.exports = {
  content: `😋 `,
  keywords: `keyword1,
    keyword2,
    keyword3
  `
}
//nuxt.config.js
const metaDataConfig = require('./assets/js/meta-data')
module.exports = {
//...
    
    head: {
    title: 'MY TITLE',
    titleTemplate: '%s | MY TITLE',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        name: 'description',
        content: metaDataConfig.content
      },
      {
        name: 'keywords',
        content: metaDataConfig.keywords
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    script: [
      //...
    ]
  },
    
//...
}

Решение №2 — Абсолютная абстракция

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

// ./configs/meta-data-config.js
module.exports = {
title: 'MY TITLE',
    titleTemplate: '%s | MY TITLE',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        name: 'description',
        content: `😋 `,
      },
      {
        name: 'keywords',
        content: `keyword1,
          keyword2,
          keyword3`
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    script: [
      //...
    ]
}
//nuxt.config.js
const metaDataConfig = require('./configs/meta-data-config.js')
module.exports = {
//...
    
    head: metaDataConfig,
    
//...
}

Подвести итог

Частичная абстракция — не удаляет всю конфигурацию из nuxt.config.js, а просто перемещает ровно столько, чтобы сделать файл конфигурации менее неприятным для чтения. Это оставляет видимыми основные параметры конфигурации внутри файла.
Абсолютная абстракция — удаляет всю конфигурацию из nuxt.config.js и полагается на то, что вы правильно подключите основной файл конфигурации к абстрагированному модулю.
Частичная или абсолютная абстракция вашей конфигурации зависит от того, что лучше всего подходит для вас. Лучше всего делать это, когда ваш файл конфигурации не читается. Вы можете использовать обе эти техники в разных модулях и плагинах. Нет правильного ответа.

Надеюсь, эта статья оказалась для вас полезной!

Дайте мне знать, если мне нужно добавить больше разъяснений! Ваше здоровье! 🍺

Ссылка:

Теги: #vue.js #vuejs #nuxtjs #javascript #typescript #программирование #разработка

5 мин. Очистите конфигурацию nuxt.config.js, чтобы сделать ее более читабельной.