25 Мая 2018 HTML/CSS Перевод

Создание и публикация веб-компонентов при помощи Vue CLI 3

img

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

image

Отличным инструментом для создания веб-компонентов является Vue.js, и это стало еще проще с выпуском Vue CLI 3 и новой библиотеки @vue/web-component-wrapper.

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

Что такое веб-компоненты?

Вы, конечно, знакомы с элементами HTML, такими как div, span, table и т.д. Веб-компоненты представляют собой пользовательские HTML-элементы, которые можно повторно использовать в веб-приложениях и веб-страницах.

Например, вы можете создать пользовательский элемент, называемый video-player, видеоинтерфейс для многоразового использования, со своим UI, c выходящим за рамки доступных по умолчанию функций стандартного элемента video. Этот элемент может предоставлять атрибут «src» для видеофайла и такие события, как «воспроизведение», «пауза» и т.д., чтобы дать возможность потребителю программно управлять ими:

<div>
 <video-player src="..." onpause="..."></video-player>
</div>

Это, скорее всего, очень похоже на то, что могут делать обычные компоненты Vue. Разница в том, что веб-компоненты являются родными для браузера(или, по крайней мере, будут реализованы по мере выхода спецификаций) и могут использоваться как обычные HTML-элементы. Независимо от того, какие инструменты для создания своего веб-компонента применяются, вы сможете использовать его в React, Angular и т.д., или даже вообще без фреймворка.

function ReactComponent() {
 return(
   <h1>A Vue.js web component used in React!</h1>
   <video-player></video-player>
 );
}

Как создать веб-компонент?

Веб-компоненты создаются с помощью стандартных элементов HTML, который браузер уже знает, например, div, span и т.д. Таких образом, video-player может выглядеть так:

<div>
 <video src="..."></video>
 <div class="buttons">
   <button class="play-button"></button>
   <button class="pause-button"></button>
   ...
 </div>
 ...
</div>

Веб-компоненты могут также включать в себя CSS и JavaScript. Используя новые стандарты браузера, такие как Shadow DOM, эти аспекты полностью инкапсулированы в вашем пользовательском компоненте, так что потребителю не нужно беспокоиться о том, что его CSS может перезаписать правила в веб-компоненте

Конечно, существуют API которые вы будете использовать для самостоятельного объявления веб-компонентов. Но нам не нужно знать о них прямо сейчас, поскольку мы будем использовать Vue как слой абстракции.

Создание веб-компонентов с помощью @vue/web-component-wrapper

С помощью Vue CLI 3 и новой библиотеки @vue/web-component-wrapper можно легко создать веб-компонент.

Библиотека @vue/web-component-wrapper предоставляет обёртку вокруг компонента Vue, который взаимодействует с API веб-компонентов. Обёртка автоматически проксирует свойства, атрибуты, события, и слоты. Это означает, что вы можете написать рабочий веб-компонент с минимальными знаниями о компонентах Vue!

Еще одна хорошая библиотека Vue для создания веб-компонентов - vue-custom-element.

Чтобы создать веб-компонент, обязательно установите Vue CLI 3 и создайте новый проект с любыми настройками, который вам нравятся:

$ vue create vue-web-component-project

Теперь создайте новый компонент Vue, который вы хотите использовать в качестве веб-компонента. Этот компонент будет скомпилирован Webpack перед публикацией, поэтому для его создания можно использовать любые JavaScript функции. Ну а мы сделаем что-то действительно простое, чтобы показать концепцию:

src/components/VueWebComponent.vue

<template>
 <div>
   <h1>My Vue Web Component</h1>
   <div>{{ msg }}</div>
 </div>
</template>
<script>
 export default {
   props: ['msg'] 
 }
</script>

Чтобы подготовить компонент для обёртывания с помощью @vue/web-component-wrapper, убедитесь что ваша точка входа src/main.js выглядит следующим образом:

src/main.js

import Vue from 'vue';
import wrap from '@vue/web-component-wrapper';
import VueWebComponent from './components/VueWebComponent';
 
const CustomElement = wrap(Vue, VueWebComponent);
 
window.customElements.define('my-custom-element', CustomElement);

API для регистрации веб-компонента является customElements.define(). Обратите внимание, что «CustomElement» и «веб-компонент» являются синонимами в этом контексте.

Собираем веб-компонент с Vue CLI 3

Vue CLI 3 включает в себя множество новых замечательных функций (ознакомьтесь с этой статьёй с кратким изложением). Одна из них – это CLI Service, которая использует Webpack для множества задач, включая создание кода приложения для продакшн. Это можно сделать с помощью простой команды vue-cli-service build. Добавив --target wc, вы создадите пакет, который идеально подходит для веб-компонента:

$ vue-cli-service build --target wc --name my-custom-element ./src/main.js

Эта функция использует Webpack для создания одного файла JavaScript со всем необходимым для вашего веб-компонента. После добавления на страницу, этот скрипт зарегистрирует <my-custom-element>, который обёрнут Vue компонентом при помощи @vue/web-component-wrapper.

Использование веб-компонента Vue на веб-странице

Теперь, когда ваш компонент создан, вы или кто-либо еще можете использовать его в проекте без Vue.js (хотя вам нужно будет импортировать библиотеку Vue, поскольку он не входит в комплект, чтобы избежать повтора, в случаях если вы используете несколько веб-компонентов на основе Vue). Как только вы загрузите скрипт, который определяет пользовательский элемент, он будет работать точно так же, как и обычный HTML-элемент.

Обратите внимание, что очень важно подключить полифил, поскольку большинство браузеров не поддерживают все спецификации веб-компонентов. Здесь я буду использовать webcomponents.js (v1 spec polyfills).

index.html

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>My Non-Vue App</title>
 </head>
 <body>
   <!--Load Vue-->
   <script src="https://unpkg.com/vue"></script>
   <!--Load the web component polyfill-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-loader.js"></script>
   <!--Load your custom element-->
   <script src="./my-custom-element.js"></script>
   <!--Use your custom element-->
   <my-custom-element msg="Hello..."></my-custom-element>
 </body>
</html>

image

И это работает! Если вы захотите использовать код, который я называю шаблоном, я разместил его здесь в репозитории.

Публикация

Наконец, если вы хотите поделиться своим веб-компонентом с миром, нет лучшего места, чем webcomponents.org. На этом сайте имеется доступная для загрузки коллекция веб-компонентов. Представленные компоненты были созданы на различных фреймворках, включая Vue, Polymer, Angular и т.д.

image

Оригинал: Create & Publish Web Components With Vue CLI 3