Среди множества функций, которые поставляются с новейшей версией интерфейса командной строки 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 и распространять их с минимальным размером файла.

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