Публикация расширений

Quasar Framework предоставляет мощный инструмент для создания расширений, которые могут быть использованы повторно в различных проектах или опубликованы для сообщества. Расширение в Quasar — это модуль, который добавляет функциональность, команды CLI, UI-компоненты, плагины или шаблоны в проекты, построенные на Vue.js.

Структура расширения

Стандартная структура расширения выглядит следующим образом:

my-extension/
├─ src/
│  ├─ index.js
│  ├─ boot/
│  │  └─ my-boot-file.js
│  └─ components/
│     └─ MyComponent.vue
├─ quasar-extension.json
├─ package.json
└─ README.md
  • src/index.js — основной файл расширения, экспортирует функции установки и конфигурации.
  • boot/ — папка с файлами инициализации (boot files), которые подключаются автоматически при загрузке проекта.
  • components/ — UI-компоненты, которые можно зарегистрировать глобально через расширение.
  • quasar-extension.json — мета-файл расширения, который описывает его имя, версию, зависимости и команды CLI.
  • package.json — стандартный файл npm-пакета с указанием зависимостей и скриптов.

Основной API расширений

Расширения в Quasar используют Node.js API для интеграции с CLI. Основные методы:

  1. extendQuasarConf Позволяет модифицировать конфигурацию Quasar (quasar.conf.js). Пример использования:
module.exports = function (api) {
  api.extendQuasarConf((conf) => {
    conf.build.vueRouterMode = 'history';
    conf.css.push('app-extension.css');
  });
};
  1. registerCommand Добавление собственных CLI-команд:
module.exports = function (api) {
  api.registerCommand({
    name: 'hello',
    description: 'Выводит приветственное сообщение',
    handler: () => {
      console.log('Привет из моего расширения!');
    }
  });
};
  1. addBootFile Регистрация boot-файлов в проекте:
api.addBootFile('my-boot-file.js');
  1. addComponent Позволяет расширению автоматически регистрировать Vue-компоненты:
api.addComponent({ name: 'MyComponent', path: 'components/MyComponent.vue' });

Подготовка к публикации

Для публикации расширения через npm необходимо убедиться, что выполнены следующие шаги:

  1. Настройка package.json Важные поля:
{
  "name": "@username/my-extension",
  "version": "1.0.0",
  "main": "src/index.js",
  "quasar": {
    "type": "app-extension",
    "id": "my-extension"
  },
  "files": [
    "src",
    "quasar-extension.json"
  ]
}
  • name — уникальное имя пакета в npm.
  • quasar.type — указывает, что это расширение для Quasar.
  • files — список файлов, включаемых при публикации.
  1. Создание quasar-extension.json
{
  "name": "my-extension",
  "version": "1.0.0",
  "description": "Пример расширения для Quasar",
  "author": "Имя Автора",
  "url": "https://github.com/username/my-extension",
  "hooks": []
}
  • hooks могут содержать команды для установки или обновления расширения.
  1. Локальное тестирование Для проверки работы расширения перед публикацией используется локальная установка:
quasar ext add ../my-extension
  1. Публикация в npm
npm publish --access public

После публикации расширение становится доступным для установки через Quasar CLI:

quasar ext add @username/my-extension

Управление версиями и обновления

Quasar Framework рекомендует семантическое версионирование (SemVer) для расширений:

  • MAJOR — изменения, несовместимые с предыдущими версиями.
  • MINOR — добавление новых функций, совместимых с предыдущими версиями.
  • PATCH — исправление ошибок, не влияющее на API.

Команды CLI Quasar позволяют пользователям проверять доступные обновления расширений:

quasar ext update

Интеграция с UI и командами проекта

Расширения могут добавлять собственные интерфейсы:

  • Глобальные Vue-компоненты, доступные во всех страницах проекта.
  • Boot-файлы для инициализации плагинов, сервисов или глобальных переменных.
  • CLI-команды, расширяющие функциональность Quasar CLI (например, генераторы компонентов или настройка проекта).

Пример регистрации компонента и boot-файла:

module.exports = function (api) {
  api.addComponent({ name: 'AlertBox', path: 'components/AlertBox.vue' });
  api.addBootFile('boot/alert.js');
};

Советы по качественным расширениям

  • Документировать каждую функцию и команду CLI.
  • Минимизировать зависимости, чтобы не увеличивать размер проекта.
  • Использовать тестирование через quasar dev и локальную установку.
  • Обеспечивать обратную совместимость при обновлениях.
  • Предоставлять примеры использования и демонстрационные компоненты.

Расширения Quasar позволяют создавать модульные, переиспользуемые блоки функциональности, которые легко распространяются через npm и интегрируются в проекты с минимальными усилиями.

Оглавление