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

Богатые встроенные функции

Vue CLI 3 полностью отличается от своей предыдущей версии. Цель переписывания двоякая:

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

По сути, Vue CLI предоставляет предварительно сконфигурированную настройку сборки, созданную поверх webpack 4. Мы стремимся минимизировать количество конфигураций, которые должны пройти разработчики, поэтому любой проект Vue CLI 3 поставляется с готовой поддержкой. для:

  • Предварительно настроенные функции веб-пакета, такие как горячая замена модуля, разбиение кода, встряхивание дерева, эффективное долгосрочное кеширование, наложение ошибок и т. Д.
  • Транспиляция ES2017 (плюс общие предложения, такие как распространение остатков объектов и динамический импорт) и внедрение полифиллов на основе использования через Babel 7 + preset-env
  • Поддержка PostCSS (с включенным автопрефиксом по умолчанию) и всех основных препроцессоров CSS
  • Автоматически сгенерированный HTML-код с хешированными ссылками на ресурсы и подсказками для предварительной / предварительной загрузки ресурсов
  • Режимы и каскадные переменные среды через .env файлы
  • Современный режим: параллельная поставка родного пакета ES2017 + и устаревшего пакета (подробности ниже)
  • Многостраничный режим: создайте приложение с несколькими точками входа HTML / JS.
  • Цели сборки: встраивайте однофайловые компоненты Vue в библиотеку или собственные веб-компоненты (подробности ниже).

Кроме того, существует множество дополнительных интеграций, которые вы можете комбинировать при создании нового проекта, например:

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

Настраивается без необходимости извлечения

Все перечисленные выше функции работают с нулевой конфигурацией с вашей стороны: когда вы формируете проект через Vue CLI 3, он устанавливает службу времени выполнения Vue CLI (@ vue / cli-service), выбранные плагины функций и генерирует необходимые файлы конфигурации для ты. В большинстве случаев вам просто нужно сосредоточиться на написании кода.

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

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

Для сторонних интеграций, таких как Babel, TypeScript и PostCSS, Vue CLI учитывает соответствующие файлы конфигурации для этих инструментов. Для webpack пользователь может либо использовать webpack-merge, чтобы объединить простые параметры в окончательную конфигурацию, либо точно настраивать и настраивать существующие загрузчики и плагины через цепочку webpack. Кроме того, Vue CLI поставляется с командой vue inspect, которая поможет вам проверить внутреннюю конфигурацию веб-пакета. Самое приятное то, что вам не нужно извлекать только для небольших настроек - вы все равно можете обновить службу CLI и плагины, чтобы получать исправления и новые функции.

Расширяемая система плагинов

Мы хотим, чтобы Vue CLI был платформой, на которой может строить сообщество, поэтому мы разработали новую версию с архитектурой плагинов с первого дня. Плагин Vue CLI 3 может быть очень мощным: он может внедрять зависимости и файлы на этапе формирования шаблона приложения, а также настраивать конфигурацию веб-пакета приложения или вводить дополнительные команды в службу CLI во время разработки. Большинство встроенных интеграций, таких как TypeScript, реализованы как плагины с использованием того же API плагина, который доступен для всех плагинов сообщества. Если вы заинтересованы в написании собственного плагина, ознакомьтесь с руководством разработчика плагинов.

В Vue CLI 3 у нас больше нет шаблонов - вместо этого вы можете создать свой собственный удаленный пресет, чтобы поделиться своим выбором плагинов и опций с другими разработчиками.

Графический интерфейс пользователя

Благодаря великолепной работе Гийома ЧАО, Vue CLI 3 поставляется с полноценным графическим интерфейсом, который не только может создавать новые проекты, но и управлять надстройками и задачами внутри проектов (да, это даже возможно. с причудливой панелью управления веб-пакетом, показанной ниже):

Примечание: хотя Vue CLI 3 выпущен как стабильный, пользовательский интерфейс все еще находится в стадии бета-тестирования. Ожидайте несколько причуд здесь и там.

Мгновенное прототипирование

Не весело ждать npm install, прежде чем ты сможешь написать какой-либо код. Иногда нам просто нужен мгновенный доступ к рабочей среде, чтобы пробудить искру вдохновения. С помощью команды vue serve Vue CLI 3 это все, что вам нужно сделать, чтобы начать прототипирование с однофайловыми компонентами Vue:

Сервер разработки прототипов поставляется с той же настройкой, что и стандартное приложение, поэтому вы можете легко переместить файл prototype*.vue в папку src должным образом созданного проекта, чтобы продолжить работу над ним.

Универсальность и готовность к будущему

Современный режим

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

Vue CLI предлагает «Современный режим», который поможет вам решить эту проблему. При сборке для производства с помощью следующей команды:

vue-cli-service build --modern

Vue CLI создаст две версии вашего приложения: один современный пакет, нацеленный на современные браузеры, поддерживающие модули ES, и один устаревший пакет, нацеленный на старые браузеры, которые этого не делают.

Но самое интересное в том, что особых требований к развертыванию нет. В сгенерированном HTML-файле автоматически используются методы, описанные в отличном сообщении Филиппа Уолтона:

  • Современный пакет загружается с <script type="module"> в браузерах, которые его поддерживают; они также предварительно загружаются с использованием <link rel="modulepreload">.
  • В устаревший пакет загружается <script nomodule>, который игнорируется браузерами, поддерживающими модули ES.
  • Исправление для <script nomodule> в Safari 10 также вводится автоматически.

Для приложения Hello World размер современного пакета уже на 16% меньше. В производственной среде современный пакет обычно приводит к значительно более быстрому синтаксическому анализу и оценке, повышая производительность загрузки вашего приложения. Лучшая часть? Все, что вам нужно, это флаг командной строки --modern.

Причина, по которой мы не делаем современный режим по умолчанию, - это более длительное время сборки и некоторая дополнительная конфигурация, необходимая, если вы работаете с CORS / CSP.

Сборка как веб-компоненты

Вы можете встроить любой *.vue компонент в проекте Vue CLI 3 в веб-компонент с помощью:

vue-cli-service build --target wc --name my-element src/MyComponent.vue

Это сгенерирует пакет JavaScript, который обертывает и регистрирует внутренний компонент Vue как собственный настраиваемый элемент на странице, который затем можно использовать просто как <my-element>. Потребляющая страница действительно должна включать Vue на страницу как глобальную, но в остальном Vue полностью скрыт как деталь реализации.

Вы даже можете собрать несколько *.vue компонентов в пакет с разделением кода, состоящий из нескольких частей:

vue-cli-service build --target wc-async 'src/components/*.vue'

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

С Vue CLI 3 ту же базу кода можно использовать для создания приложения, библиотеки UMD или собственных веб-компонентов. Вы получаете одинаковый опыт разработки Vue независимо от того, к каким целям вы стремитесь.

Попробуйте сегодня!

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

Вы можете попробовать это прямо сейчас, следуя инструкциям из документации. Нам не терпится увидеть, что вы на нем построите. Удачного взлома!