Vue-cli 3 сейчас находится в стадии бета-тестирования, и он был перестроен с нуля. Уже около года я отвечаю за шаблоны Vuetify, созданные под vue-cli 2.x, и совсем недавно я сделал vue-cli-plugin-vuetify для нового vue-cli 3. На основе этого опыта, и я хочу поделиться своими мыслями о том, как новый vue-cli навсегда изменит то, как мы все разрабатываем с помощью Vue.

Отказ от ответственности: я не буду подробно рассказывать, как использовать vue-cli 3 в этом посте. Однако есть два отличных гида. Первый - пост Аллигатора, а второй - YouTube-видео демо Эвана Ю из его последнего выступления.

Если вы уже знаете все о проблемах vue-cli 2.x, не стесняйтесь переходить к следующему разделу. Ниже я кратко изложу 3 основных проблемы, которые привели к изменению дизайна старого клиента.

1. Шаблоны быстро устаревают

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

Основная команда поддерживает 6 шаблонов, самый популярный из которых - vuejs-templates / webpack. Этот один шаблон был разветвлен более 3000 раз, что имеет смысл, поскольку собственный README шаблона предлагает вам разделить его и создать свой собственный.

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

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

2. Начать работу по-прежнему непросто.

Несмотря на то, что существует более 3000 форков шаблонов Vue, на самом деле только несколько десятков из них хорошо известны, чтобы быть жизнеспособными вариантами для большинства разработчиков. Тем не менее, это много. Vuetify предлагает 9 шаблонов на выбор. Это довольно большой справочник, который нужно тщательно проанализировать, чтобы найти отправную точку для вашего приложения, и этого достаточно, чтобы парализовать даже самых упорных разработчиков.

Затем представьте дюжину или около того вариантов, которые должен сделать пользователь после того, как остановится на одном шаблоне. Поскольку многие вопросы: «Вы хотите использовать эту библиотеку или эту?» легко потратить часы на исследование и выбор между инструментами, чтобы сделать «правильный выбор», поскольку, если не считать начала, пути назад нет.

3. Все зависимости библиотек находятся в одних и тех же файлах.

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

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

Устойчивое развитие - это развитие, которое отвечает потребностям настоящего без ущерба для способности будущих поколений удовлетворять свои собственные потребности - Кевлин Хенни

Будущее - это подключи и работай

Не бойся! Vue-cli 3 уже здесь! А теперь с совершенно новой архитектурой на основе плагинов!

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

Убрав все эти шаблоны, теперь вы можете просто начать работу с vue create my-app. Затем в любое время после первоначальной настройки вы можете установить любые дополнительные функции, которые захотите. В самом деле, в ЛЮБОЕ ВРЕМЯ после этого вы можете легко добавить новый плагин в свое приложение. Вам больше не нужно делать «правильный выбор», когда вы впервые создаете свое приложение. Какое облегчение!

Скажем, после месяца прототипирования вы хотите попробовать Vuetify для увеличения размера. Без проблем! Просто беги…

yarn add vue-cli-plugin-vuetify
vue invoke vuetify

Вот и все! Вы получите такую ​​же простую настройку, как и в старом cli, но намного позже, чем ваше приложение было создано.

Да, и шаблоны еще не исчезли. Мы просто превзошли их. Плагины по-прежнему могут включать свои собственные файлы шаблонов, как это можно увидеть в Vuetify's plugin. Еще лучше то, что новый cli использует вместо этого EJS templating.

Научите старое приложение новым трюкам

Одна из самых мощных функций vue-cli 3, также, вероятно, самая тонкая…

Вы можете запустить плагин `vue invoke plugin` в любое время.

Не только при первой установке подключаемого модуля, но и в любое время после тоже. Теоретически это означает, что плагин может поддерживать себя сверхурочно. Такая библиотека, как Vuetify, может не только обновиться до последней версии в вашем package.json, но с возможностью перезаписать любой существующий файл, она также должна быть в состоянии справиться с любой необходимой миграцией. То же самое касается обновлений веб-пакетов, изменений конфигурации и практически всего, что обычно обрабатывается vue-cli или плагином.

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

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

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

Экосистема DRYer

Вчерашние разработчики шаблонов завтра станут разработчиками плагинов. Плагины будут основным способом добавления и поддержки сторонних библиотек Vue в ваше приложение.

В будущем библиотекам не нужно будет поддерживать несколько форков и клонов других шаблонов только для того, чтобы добавить их поддержку широкому спектру существующих веб-приложений. SSR, PWA, Electron, Cordova - это лишь некоторые из разновидностей, которые в настоящее время поддерживает Vuetify, и каждый из них представляет собой отдельный шаблон, который необходимо поддерживать. Ну не более! Вскоре мы увидим появление отдельных плагинов, предназначенных для добавления и поддержки только одной функции каждый.

В будущем почти каждое приложение Vue будет построено на основе нового vue-cli. Мы даже увидим, как он используется для создания веб-компонентов, которые работают в приложениях React и Angular, а также для страниц с ванильным Javascript (ознакомьтесь с докладом Эвана для демонстрации). Сейчас самое лучшее время быть разработчиком Vue!

Спасибо за прочтение

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

Наконец, все ссылки, упомянутые выше, скопированы ниже для вашего удобства :)

использованная литература