Как использовать Polymer с Webpack

За последний год я провел ряд обсуждений с компаниями среднего и крупного размера, которые заинтересованы в создании общих библиотек пользовательского интерфейса, которыми могут пользоваться все их команды. Часто эти команды находятся в разных стеках (React, Vue, Angular и т. Д.), Поэтому использование чего-то вроде веб-компонентов и полимера имеет смысл, поскольку все эти фреймворки могут использовать веб-компоненты и взаимодействовать с ними.

Большинство фреймворков, как правило, полагаются на модули ES или CommonJS и такие инструменты, как Webpack, для объединения своего кода. Polymer, с другой стороны, использует импорт HTML. Это означает, что разработчикам, которые хотят использовать их вместе, необходимо будет согласовать способ объединения вещей и порядок их загрузки.

Но Webpack уже может понимать несколько форматов файлов (.css, .tsx и т. Д.). Так можно ли расширить его для понимания импорта HTML? Конечно, почему бы и нет! Сегодня я очень рад продемонстрировать полимер-веб-пакет-загрузчик, новый инструмент, который использует HTML-импорт и выводит модули, готовые для Webpack. Это не только упрощает использование Polymer с другими фреймворками, но также добавляет в Polymer интересные новые функции, такие как возможность использовать синтаксис ES Module import для извлечения кода, установленного через npm.

Прежде чем я забегу вперед, я хочу отметить, что это не официальный проект Polymer - Polymer не делает ставку на Webpack или что-то в этом роде - это просто потрясающий инструмент, созданный двумя членами сообщества, Bryan Coulter и Chad Killingsworth , что решает проблему, с которой столкнулись многие разработчики. Хотя проект все еще находится на стадии бета-тестирования, я подумал, что было бы круто сделать небольшую запись, чтобы члены сообщества Polymer могли надрать шину и высказать свое мнение.

Это кому?

Прежде чем перейти к мелочам, я хотел сначала определить, какие пользователи получат наибольшую выгоду от этого инструмента. Если вы уже используете Polymer CLI или polymer-build и довольны своим проектом, то во что бы то ни стало придерживайтесь их! Это отличные инструменты, которые делают потрясающие вещи 😁

Полимер-webpack-loader будет полезен всем, кто:

Интегрирует элементы Polymer как часть более крупного проекта, в котором используется другая структура.
Хочет использовать синтаксис import для использования пакетов npm в своих элементах Polymer.
Хочет использовать TypeScript, JSX, emojiscript, [вставьте yr FancyScript по выбору].

Как это работает?

polymer-webpack-loader берет HTML-файл импорта и преобразует все это в модуль JavaScript. Это делается в три этапа:

Все элементы <link> преобразуются в операторы модуля ES import. Например, <link rel="import" href="paper-button.html"> становится import ‘paper-button.html’;. Это может показаться немного странным, но помните, что все является модулем в Webpack, даже файлы HTML и CSS. Преобразуя <link> элементы в import операторы, Webpack может сканировать остальную часть нашего графа зависимостей.

Шаг 2. Превратите `<dom-module>` в строковые шаблоны

<dom-module> Polymer - это настраиваемый элемент, который захватывает содержащийся в нем шаблон и помещает его на глобальную карту. Всякий раз, когда создается элемент Polymer, первое, что он делает, это находит свой шаблон на этой карте и удаляет его. Полимер-webpack-loader просто берет содержимое вашего <dom-module> и преобразует его в строковый шаблон, который будет импортирован при выполнении пакета. По сути, он достигает той же цели - создается глобальная карта, поэтому шаблон элемента становится доступным, - но делает это несколько иначе.

Шаг 3. Отделите `<script>` элементов

Наконец, все теги <script>, содержащие допустимый атрибут src, преобразуются в операторы 'import'. Встроенные скрипты разделены и доступны другим загрузчикам в цепочке (например, babel-loader или ts-loader). Наконец, их бросают в bundle.js вместе со всем остальным.

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

Привет, мир!

Я создал крошечный демонстрационный проект, чтобы вы могли следить за ним.

Чтобы начать работу с загрузчиком, установите его из npm.

npm install --save-dev polymer-webpack-loader

Или, если вы используете демонстрационный проект, cd в демо-каталог и запустите npm i и bower i.

Затем поместите загрузчик в свой webpack.config.js, вот полный файл конфигурации из демонстрации. Я сделал все возможное, чтобы прокомментировать каждый раздел, поэтому, если вы новичок в Webpack, вы можете понять, что происходит.

Ключевой момент, на который следует обратить внимание, - это раздел module, в котором мы определяем массив rules. Первое правило проверяет, заканчивается ли файл на .html, если да, он отправляется набору связанных загрузчиков. Загрузчики каким-то образом преобразуют файл, аналогично «задачам» в других инструментах сборки. Здесь мы говорим: «прогнать все через полимер-веб-пакет-загрузчик, взять результат и передать его в babel-загрузчик».

Затем нам нужно дать нашему приложению отправную точку, поэтому создайте index.js файл и включите import оператор для извлечения импорта HTML.

/* src/index.js */
import './my-element.html';

А вот собственно определение my-element.html.

my-element.html, это довольно простой элемент из полимера с одной интересной особенностью. В элементе <script> я импортирую библиотеку date-fns. Webpack разрешит это до версии в моем каталоге node_modules и скомпилирует его в мой пакет, что довольно мило. Наконец, мы можем использовать модули с правильной областью видимости в определениях наших элементов!

Последнее, что нам нужно сделать, это собрать index.ejs, который будет обслуживаться сервером разработки Webpack.

index.ejs загружает адаптер ES5 Custom Elements, полифиллы веб-компонентов и bundle.js, созданные Webpack. Он также содержит экземпляр <my-element> в <body>.

Не знаете, что такое адаптер ES5 Custom Elements? Ознакомьтесь с этим роликом для полного объяснения.

Обратите внимание на строку с надписью <%= htmlWebpackPlugin.files.js[0] %>, так как именно здесь наш bundle.js закончится.

Наконец, в терминале запустите npm start, чтобы запустить сервер разработки Webpack, который откроет вам окно браузера. Вы должны увидеть что-то вроде этого:

Успех! Теперь у вас есть пакет Polymer с Webpack и возможность импорта из вашего node_modules каталога.

Открытые вопросы

Могу ли я публиковать элементы, созданные с помощью загрузчика, на WebComponents.org?

Это зависит. Если вы используете синтаксис import модуля ES для извлечения пакетов npm, тогда нет. В противном случае любой, кто хочет использовать ваш элемент, также должен будет использовать Webpack. Я думаю, что этот инструмент лучше всего использовать для обработки кода в вашем собственном приложении и для элементов, которыми вы не собираетесь делиться.

Означает ли это, что мне больше не нужно использовать беседку?

Не совсем. Основная причина, по которой Polymer и веб-компоненты в целом полагаются на bower, заключается в том, что имена тегов Custom Element являются глобальными. Это означает, что у вас не может быть одновременной попытки регистрации нескольких конфликтующих версий элемента. Bower принудительно выполняет дедупликацию конфликтов версий во время установки, поэтому вы всегда получаете одну версию зависимости. npm не поддерживает эту функцию, поэтому на данный момент, вероятно, лучше продолжать использовать bower для установки ваших веб-компонентов. Если вам интересно узнать об этом больше, посмотрите этот клип из одного из моих недавних выступлений по вводу-выводу.

А как насчет PRPL / разделения кода?

Одна из моих любимых функций HTML Imports заключается в том, что она побуждает вас объединять все HTML, CSS и JavaScript для компонента в один файл. Это упрощает отделение компонентов, критически важных для первого рендеринга, от компонентов, которые могут появиться позже в процессе. Затем вы можете использовать такой инструмент, как Polymer CLI, чтобы объединить ваши критические и некритические компоненты в отдельные «фрагменты» и отложить их загрузку с помощью importHref метода Polymer.

Мы можем добиться того же эффекта в Webpack, используя функцию под названием Разделение кода. Авторы polymer-webpack-loader собрали прекрасный Пример стартового набора Polymer, который демонстрирует, как настроить конфигурацию Webpack для разделения кода и как заменить метод importHref Polymer на динамический import() Webpack.

Заключение

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

Большое спасибо Брайану Коултеру и Чаду Киллингсворту за создание полимерного веб-пакета-загрузчика и Шону Ларкину за просмотр этого сообщения.

Первоначально опубликовано на сайте robdodson.me 17 июля 2017 г.

Как использовать Polymer с Webpack