Я начал новый проект, который требует от нас создания библиотеки компонентов, совместимой с фреймворком Quasar. Библиотека будет написана на Vue, но должна быть совместима с Quasar. Основываясь на документации, мы решили создать расширение для приложения Quasar. В целом процесс оказался не таким простым, как я надеялся.

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

Начиная

Для начала создадим расширение приложения библиотеки компонентов с помощью интерфейса командной строки quasar:

quasar create component-library --kit ui

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

componet-library
     - app-extension # Installation scrips for including the library as part of a quasar project.
     - ui # The actual library
          - src
               - components # Where all your components should live
          - dev # A standalone sample app to test your work. DOES NOT GET INCLUDED IN THE LIBRARY OUTPUT

Мы видим, что Quasar автоматически включает компонент для нас в ui > src > components > Component.js. Давайте создадим новый, который использует кнопку квазара, чтобы мы могли видеть, как все работает вместе:

Затем мы должны зарегистрировать наш компонент с помощью функции Vue Plugin, найденной в ui > src > index.js

Затем мы можем использовать образец приложения в dev, чтобы проверить, работает ли наш компонент. Давайте перейдем к ui > dev > pages > Test1.vue и заменим его следующим файлом:

Вау, это было так просто, правда? Мы можем создавать наши компоненты в библиотеке и сразу видеть изменения на тестовых страницах. Поэкспериментируйте с файлом MyQuasarButton.vue, и мы увидим, что изменения происходят немедленно и в примере приложения.

Хорошо, так в чем проблема? Разве это не то, что мы искали?

Для нас проблема заключалась в том, что Квазар размахивал рукой. В ui > src > index.js мы видели, что экспортируем наш компонент как часть подключаемого модуля. Мы не проверяли, как это используется в примере приложения. Давайте посмотрим на это сейчас в ui > dev > boot > register.js

Это выглядит достаточно просто, мы просто импортируем VuePlugin из того, что называется «ui». Хорошо, давайте следим за комментарием о quasar.conf.js. В этом файле много чего происходит, но нас интересует его нижняя часть:

В частности, взгляните на строку 54. Quasar настраивает webpack так, чтобы он указывал импорт «ui» на относительный путь к папке. Вы уже поняли, в чем проблема?

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

Фактически, если вы прямо сейчас наберете «yarn build» в библиотеке компонентов, она даже не построит.

Создание файлов Vue с помощью шаблонов

Перво-наперво, давайте приступим к сборке. Похоже, что сборка не работает с файлами шаблонов в нашем файле MyQuasarButton.vue. Если вы посмотрите на компонент по умолчанию, который уже был в библиотеке, вы увидите, что это файл «.js» с функцией рендеринга, а не файл .vue с шаблоном. По какой-то причине Quasar CLI не включает правильный файл конфигурации Roll Up для поддержки файлов Vue. (Я до сих пор не совсем понимаю, почему библиотека на основе Vue не поддерживает файлы Vue из коробки).

Сначала установите эти зависимости:

yarn add @rollup/plugin-common-js --dev
yarn add rollup-plugin-vue --dev
yarn add vue-template-compiler --dev

Затем перейдите к ui> build > script.javascript.js и добавьте их в список плагинов:

Затем соберите снова, и все должно получиться.

Убедитесь, что вы тестируете вывод сборки

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

Быстрый способ правильно проверить это с помощью yarn link.

Сначала мы набираем ссылку пряжи в папке ui, чтобы увидеть это:

Затем мы можем перейти к ui > dev и выполнить предложенную команду:

yarn link quasar-ui-component-library

Теперь мы можем обновить импорт компонентов для ui в register.js, чтобы:

Затем запустите quasar dev и снова перейдите на тестовую страницу. Мы видим, что наша кнопка все еще отображается. Давайте проверим, что это встроенный компонент. Измените цвет MyQuasarButton с «янтарного» на «основной». Нажмите «Сохранить» и обратите внимание, что на этот раз браузер не выполняет «горячую» перезагрузку. Теперь снова запустите yarn build в ui. Теперь образец приложения должен быть обновлен до нового цвета!

Заключение

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

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

  1. Полностью переместите папку dev из проекта и отслеживайте ее отдельно
  2. Или переименуйте dev в «sample-app», чтобы было понятнее его назначение.

Весь код доступен здесь: https://github.com/jmccormack200/QuasarUIExtension