Представляем Nuxt DevTools

На Vue Amsterdam 2023 мы анонсировали предварительную версию Nuxt DevTools, нового инструмента, который поможет понять ваше приложение Nuxt и еще больше улучшить опыт разработчика. Сегодня мы выпустили новую минорную версию v0.3.0 с кучей обновлений и улучшений.

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

Опыт разработчика (DX)

В последние годы все больше внимания уделяется Developer Experience (DX). Инструменты и фреймворки стремятся улучшить DX. Попутно Nuxt представил множество инновационных возможностей и соглашений, чтобы сделать вашу повседневную разработку проще и эффективнее.

В Nuxt 3 мы перешли на Vite в качестве бандлера по умолчанию для горячей замены модулей (HMR) во время разработки, что создает более быструю обратную связь для вашего рабочего процесса. Кроме того, мы представили Nitro, новый серверный движок, который позволяет вам развертывать приложение Nuxt на любом хостинге, таком как Vercel, Netlify, Cloudflare и других с нулевой конфигурацией.

Nuxt предлагает множество встроенных распространенных практик:

• Пишите TypeScript и ESM из коробки по всей вашей кодовой базе.
• Создавайте одностраничные приложения (SPA), используйте рендеринг на сервере (SSR), генерацию статических сайтов (SSG) или сочетайте их на роутах — используя одну и ту же кодовую базу изоморфно без какой-либо явной настройки.
• Используйте несколько композаблов, таких как useState и useAsyncData для совместного использования состояния, доступных на сервере и клиенте.
• Используйте SEO-утилиты, такие как useHead и useSeoMeta, чтобы упростить управление метатегами.

Более того, такие функции, как система лейаутов, плагины, middleware и другие инструменты упрощают создание приложений и делают кодовую базу более организованной.

Такие соглашения, как маршрутизация на основе файлов и API-интерфейсы сервера на основе файлов, делают маршрутизацию интуитивно понятной и простой.

Автоимпорт компонентов упрощает создание общих компонентов, которые напрямую доступны в любом файле Vue. В отличие от глобальных компонентов, они разделены по коду. Мы также представили автоимпорт композаблов, где все API из Vue доступно напрямую. Модули Nuxt также могут предоставлять свои собственные композаблы для автоматического импорта, а также ваши локальные композаблы.

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

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

Проблема

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

С каждой новой функцией и соглашением, которые мы вводим, мы добавляем немного больше абстракции во фреймворк.

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

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

Представляем Nuxt DevTools

Nuxt DevTools — визуальный инструмент, который поможет вам понять ваше приложение Nuxt и еще больше улучшить опыт разработчика. Он создан для обеспечения большей прозрачности Nuxt и вашего приложения, поиска узких мест производительности и помощи в управлении вашим приложением и конфигурацией.

Он поставляется как экспериментальный модуль и предоставляет представления прямо внутри вашего приложения. После установки он добавит небольшой значок в нижнюю часть вашего приложения. Щелчок по нему откроет панель DevTools.

Чтобы попробовать, обратитесь к руководству по установке.

Обзор

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

Страницы

Вкладка "Pages" показывает ваши текущие маршруты и обеспечивает быстрый способ навигации по ним. Для динамических маршрутов она также предоставляет форму для интерактивного заполнения каждого параметра. Вы также можете использовать текстовое поле для воспроизведения и проверки того, как сопоставляется каждый маршрут.

Компоненты

Вкладка "Components" показывает все компоненты, которые вы используете в своем приложении, и откуда они. Вы также можете выполнить поиск по ним и перейти к исходному коду.

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

Вы также можете использовать функцию "Инспектор", чтобы проверить DOM-дерево и увидеть, какой компонент его отображает. Щелкните, чтобы перейти в редактор на определенную строку. Это значительно упрощает внесение изменений, без необходимости глубокого понимания структуры проекта.

Импорты

Вкладка "Imports" показывает все автоматические импорты, зарегистрированные в Nuxt. Вы можете видеть, какие файлы их импортируют, и откуда они. Некоторые записи также могут содержать краткие описания и ссылки на документацию.

Модули

Вкладка "Modules" показывает все установленные вами модули и предоставляет ссылки на их документацию и исходный код. Вы можете найти больше модулей в модулях Nuxt.

Недавно мы представили экспериментальную функцию обновления, которая позволяет вам легко обновлять Nuxt или модули. С помощью вкладки Terminal он прозрачно показывает вывод процесса обновления.

Ассеты

Вкладка "Assets" показывает все ваши статические ассеты и информацию о них. Вы можете скопировать пути к ассетам или фрагменты кода для их использования. В будущем, с интеграцией Nuxt Image, вы даже сможете оптимизировать изображения одним щелчком мыши.

Плагины

Вкладка "Plugins" показывает все плагины, которые вы используете в своем приложении. Поскольку плагины запускаются до монтирования приложения, время, затрачиваемое на каждый плагин, должно быть минимальным, чтобы не блокировать приложение при рендеринге. Временные затраты каждого предоставленного плагина могут быть полезны для поиска узких мест производительности.

Хуки

Вкладка "Hooks" поможет вам отслеживать время, проведенное в каждом хуке как на клиенте, так и на сервере. Вы также можете увидеть, сколько слушателей зарегистрировалось для каждого хука и сколько раз они были вызваны. Это может быть полезно для поиска узких мест производительности.

Конфигурация приложения

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

Полезная нагрузка и данные

На этой вкладке показано состояние, созданное useState, useAsyncData и useFetch. Может быть полезно понять, как получаются данные, и как управляется состояние, или изменить их реактивно, чтобы увидеть, как они влияют на ваше приложение. Для useAsyncData и useFetch вы также можете вручную запустить их повторное получение.

Терминалы

В некоторых интеграциях может потребоваться запустить подпроцессы для выполнения определенных задач. До DevTools вы либо полностью скрывали вывод подпроцесса и поглощали потенциальные предупреждения/ошибки, либо перенаправляли в stdout и засоряли свой терминал множественными выводами. Теперь вы можете иметь вывод в DevTools для каждого процесса и четко изолировать его.

Виртуальные файлы

Вкладка "Virtual Files" показывает виртуальные файлы, сгенерированные Nuxt и Nitro для поддержки соглашений. Это может быть полезно для расширенной отладки.

Инспектирование

Вкладка "Inspect" предоставляет интеграцию vite-plugin-inspect, позволяя вам инспектировать этапы преобразования Vite. Это может быть полезно для понимания того, как каждый плагин преобразует ваш код, и для выявления потенциальных проблем.

VS Code

Благодаря VS Code Server мы можем интегрировать полнофункциональный экземпляр VS Code в DevTools. Вы можете устанавливать расширения и синхронизировать свои настройки. Это позволяет вам получить более тесный цикл обратной связи, где вы можете изменять код и видеть результат немедленно, не выходя из браузера.

Представления, предоставленные модулями

Учитывая экосистему, Nuxt DevTools разработаны гибкими и расширяемыми. Модули могут вносить свои собственные представления в DevTools, чтобы предоставлять интерактивные данные и интерактивные площадки для их интеграции. Ниже приведено несколько примеров:

Модуль VueUse предоставляет страницу поиска доступных композаблов и просмотра их документации.

Модуль UnoCSS предоставляет интерактивный инспектор, позволяющий увидеть, как каждый модуль вносит вклад в конечный CSS.

Модуль Nuxt Icon предоставляет поисковую систему для всех доступных иконок.

Модуль Nuxt Vitest предоставляет пользовательский интерфейс Vitest для тестов, работающих по тому же пайплайну, что и ваше приложение Nuxt.

Для авторов модулей

С релизом v0.3.0 мы улучшили возможность авторов модулей вносить свой вклад в DevTools.

Он включает:

• Представления, предоставленные модулем
• Доступ к контексту клиентского приложения и утилитам devtools
• Пользовательские функции RPC для связи между сервером и клиентом
• Создание подпроцессов и потоковая передача вывода
• @nuxt/devtools-kit - набор утилит, помогающих интегрировать ваш модуль с DevTools
• @nuxt/devtools-ui-kit - компоненты пользовательского интерфейса, используемые в DevTools, чтобы сделать представление вашего модуля согласованным с остальной частью DevTools
• Начальный шаблон для создания модуля с интеграцией DevTools

Чтобы узнать больше, ознакомьтесь с Руководством для авторов модулей Devtools.

Чего ожидать дальше?

Это только начало пути. Мы планируем добавить в DevTools больше функций, одновременно исследуя способы представления данных более интуитивным и игровым способом.

Цели Nuxt DevTools:

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

Вы можете следить за последними обновлениями, открыв репозиторий GitHub и подписавшись на официальный Twitter Nuxt.

Спасибо за чтение, и мы с нетерпением ждем ваших отзывов и вклада!