Веб-компоненты с Vue CLI 3

Среди множества функций, которые поставляются с новейшей версией интерфейса командной строки JavaScript-фреймворка Vue, есть одна, которую я нахожу довольно впечатляющей, а именно возможность упаковывать одиночный файловый компонент (SFC) в качестве веб-компонента. Это что? По сути, это способ создания собственных HTML-тегов. Давайте посмотрим, как сделать проект и добавить некоторые вкусности, чтобы сделать работу в вашем туалете приятной.

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

mkdir my-awesome-component && cd my-awesome-component

Минимум, необходимый для такого рода проектов, — это файл .vue. Давайте создадим его.

touch MyAwesomeComponent.vue

Если вы уже знакомы с Vue SFC, вы знаете, как они структурированы. Давайте добавим немного кода, чтобы увидеть некоторый прогресс.

<template>
  <p>Hey you!</p>
</template>

Готово! Давайте построим это и посмотрим, как это выглядит.

vue build --target wc --name my-awesome-component MyAwesomeComponent.vue

Если вам повезет, у вас теперь будет папка dist со встроенными файлами. Вы получаете файл .js со всем встроенным (хорошо, пока не так много встроенного) и файл demo.html, который вы можете сразу же открыть, чтобы протестировать свой компонент. Если вы откроете файл demo.html в своем редакторе, который, как я знаю, это Sublime Text, вы увидите, что он загружает Vue. Веб-компоненты, подобные этому, зависят от глобальной доступности Vue для работы.

Я слышу тебя сзади. «О, это так?! Ты лучше скажи мне что-нибудь более полезное или начни думать о том, как ты собираешься вернуть мне мое время!»
Ок ок, попробую. Добавим сюда немного функциональности. В конце концов, здесь мы используем Vue, и было бы здорово, если бы мы хотя бы немного написали JavaScript. Мы добавим скрипт в наш SFC что-нибудь, чтобы убедиться, что все на месте. Давайте просто перейдем к полному хардкору и напишем немного ES6.

<template>
  <p>{{ msg }}</p>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hey you!'
    }
  }
}
</script>

Теперь мы можем воспроизвести нашу команду сборки. Но не так быстро, иначе CLI будет кричать на вас, говоря, что у вас не установлен babel-loader. Webpack (на котором основан весь CLI) нужен для транспиляции вашего прекрасного ES6. Как бы мы это сделали? Просто создайте файл package.json с помощью предпочитаемого менеджера пакетов.

yarn init

Вы можете нажимать клавишу ввода до конца, CLI все равно проигнорирует точку входа. А теперь добавьте babel-loader в качестве зависимости от разработчиков.

yarn add babel-loader --dev

Мы уже на месте? Нет! Попробуйте собрать еще раз, и он скажет вам, что вам также нужен @babel/core. Просто установите его, как раньше.

yarn add @babel/core --dev

Попробуйте собрать снова, и теперь у вас есть собственный веб-компонент, работающий на Vue и с поддержкой ES6.

Все еще не впечатлен. Хорошо, тогда давайте добавим поддержку Tailwind CSS. Для тех из вас, кто не знает, Tailwind — это подключаемый модуль PostCSS, который генерирует служебные классы из файла конфигурации .js, предоставляя вам максимально возможную гибкость. Vue CLI 3 может обрабатывать конфигурацию PostCSS через файл RC, поэтому, если вам интересно, почему, я бы сказал, почему бы и нет? Мы начнем с добавления пакета tailwindcss.

yarn add tailwindcss

Конфигурационный файл PostCSS.

touch .postcssrc.js

И файл tailwind.js по умолчанию.

./node_modules/.bin/tailwind init

Теперь в настройках PostCSS добавляем

module.exports = {
  plugins: [
    require('tailwindcss')('./tailwind.js')
  ]
}

И в наш файл .vue добавляем блок стилей

<style>
@tailwind utilities;
</style>

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

<p class="text-teal">{{ msg }}</p>

Постройте снова, и вот оно! Ваш веб-компонент на базе Vue и Tailwind! Но ждать! Интерфейс командной строки сообщает вам, что ваш компонент превышает рекомендуемый предел размера, и это потому, что Tailwind добавляет много классов, которые вы на самом деле не используете. К счастью, для этого есть решение: Purgecss. Purgecss — это плагин для веб-пакетов, который может сканировать ваши файлы на наличие неиспользуемых классов (или, если быть точным, используемых классов) и удалять каждый сантиметр CSS, который вы не используете, сводя размер файла к минимуму. Я думаю, вы можете настроить его как плагин для веб-пакета, но давайте использовать его версию PostCSS.

yarn add @fullhuman/postcss-purgecss --dev

И добавьте его в конфигурацию PostCSS, весь файл должен быть таким

module.exports = {
  plugins: [
    require('tailwindcss')('./tailwind.js'),
    require('@fullhuman/postcss-purgecss')({
      content: ['./*.vue'],
      extractors: [
        {
          extractor: class TailwindExtractor {
            static extract(content) {
              return content.match(/[A-z0-9-:\/]+/g) || [];
            }
          },
          extensions: ['vue']
        }
      ]
    })
  ]
}

Постройте снова, и теперь мы действительно закончили. Теперь вы можете начать создавать свои собственные компоненты на базе Vue и Tailwind и распространять их с минимальным размером файла.

Надеюсь, вам понравился этот рецепт!