Введение
Впервые я начал использовать Веб-компоненты и Полимер почти 3 года назад. В то время WebComponents все еще были идеей, написание полимерных элементов в Dart все еще оставалось популярной идеей, а библиотека (теперь фреймворк, но скоро снова станет библиотекой) все еще находилась на расстоянии более полугода от производства. выпуск. Тем не менее, как разработчик, который прошел путь от jQuery до Knockout и Durandal, я влюбился в мечту о WebComponents как кросс-браузерной спецификации для создания компонентов пользовательского интерфейса, не зависящих от фреймворка.
Перенесемся в сегодняшний день, и эта мечта очень близка к реальности. WebComponents не только готовы, поддержка со стороны 3 основных производителей браузеров практически завершена. Они практически готовы к использованию везде. Поскольку я большой поклонник простоты, скорости и эффективности FuseBox, я решил опубликовать статью, в которой подробно рассказывается, как объединить их вместе.
Это кому?
Это для всех, кто прочитал статью Роб Додсон о Как использовать Polymer с Webpack и подумал, что это здорово, но с FuseBox могло бы быть еще лучше.
Привет, мир!
Я создал крошечный демонстрационный проект, чтобы вы могли следить за ним.
Для начала создайте пустую папку проекта. Создайте в корне проекта папку package.json со следующим содержимым:
Установите зависимости с помощью пряжи.
yarn
Затем создайте свою fuse.js конфигурацию и добавьте следующий код. Я сделал все возможное, чтобы прокомментировать каждый раздел, поэтому, если вы новичок в FuseBox, вы можете понять, что происходит.
Это довольно стандартная настройка FuseBox, за исключением копирования поверх полифилла WebComponents. Мы вернемся к этому позже.
Затем мы создадим наш компонент hello-world.ts в каталоге компонентов с помощью следующего кода.
Одна небольшая деталь заключается в том, что из-за того, что мы используем TypeScript, класс PolymerElement не регистрируется правильно. Чтобы исправить это, добавьте файл typings.d.ts в каталог src со следующим содержимым.
declare var Polymer: { Element: { new () } }
Затем мы импортируем этот компонент вindex.ts и определим его с помощью customElements.define.
Наконец, мы создадим наш HTML-файл шаблона index.html со следующим кодом.
Важно отметить, что мы используем custom-elements-es5-adapter для обработки наших транспилированных компонентов в браузерах с встроенной поддержкой и используем $bundles, чтобы сообщить FuseBox, куда вставлять файлы сборки. В качестве последнего шага скопируйте webcomponents-lite.js в каталог src из node_modules/@webcomponents/webcomponentsjs.
Теперь мы можем запустить node fuse и быть щедро вознаграждены нашим hello-world рендерингом компонентов в браузере.
Таким образом, вы успешно собрали свой первый компонент Polymer с помощью FuseBox. На этом можно закончить, но помните, что это решение будет работать только в Chrome и Safari.
Самым простым решением было бы загрузить полифилл webcomponents-lite, но это решение означало бы загрузку ненужных зависимостей в браузеры, которые полностью соответствуют спецификации.
Второе и лучшее решение - использовать webcomponents-loader для необязательной загрузки зависимостей, а затем определять наши компоненты после срабатывания события WebComponentsReady.
Для этой статьи я выберу вариант 3: использование динамического импорта для загрузки полифилла, если это необходимо; в противном случае вернуться к определению компонентов. Скопируйте webcomponents-lite.js в наш src директор, а затем обновите index.ts следующим кодом.
Если мы обнаружим, что Shadow DOM или API Custom Element отсутствуют, мы сначала загрузим полифилл, а затем загрузим компоненты и определим их. В противном случае мы просто загружаем и определяем их.
Открытые вопросы
А как насчет использования пряжи --flat при установке Polymer?
К сожалению, похоже, что существует проблема с разрешением между некоторыми библиотеками Polymer и FuseBox. Несмотря на это, я смог успешно установить зависимости и построить, не полагаясь на этот флаг.
Вывод
Надеюсь, теперь вы хорошо понимаете, как легко создавать Polymer с помощью FuseBox. Оба инструмента представляют значительную ценность для сообщества разработчиков, и их совместное использование является естественным шагом к созданию компонентов, не зависящих от инфраструктуры.
Большое спасибо Робу Додсону и его полезной статье, которую я без зазрения совести адаптировал.
Счастливые тропы.
