Polymer является библиотекой JavaScript и требует наличия Node.js и менеджера пакетов npm для работы с зависимостями и сборкой проектов. На официальном сайте Node.js доступны установочные пакеты для всех основных платформ: Windows, macOS и Linux. После установки необходимо проверить корректность работы инструментов командой:
node -v
npm -vЭти команды возвращают версии Node.js и npm, что подтверждает успешную установку.
Для создания и управления проектами Polymer используется инструмент командной строки Polymer CLI. Установка производится через npm глобально:
npm install -g polymer-cliПроверка успешной установки выполняется командой:
polymer --versionCLI предоставляет возможности создания новых проектов, запуска локального сервера разработки и управления сборкой приложения.
Polymer CLI поддерживает шаблоны для быстрого старта. Для создания проекта используется команда:
polymer initCLI предложит выбрать тип шаблона, включая базовый элемент, элемент с приложением или стартовый шаблон для Polymer 3. После выбора шаблона создается структура проекта с необходимыми файлами:
index.html — основной файл приложения.src/ — каталог с компонентами и элементами
пользовательского интерфейса.bower.json или package.json — файл
управления зависимостями, в зависимости от версии Polymer.Polymer версии 3 и выше полностью основан на npm для управления пакетами. В проекте необходимо выполнить команду:
npm installОна установит все зависимости, указанные в package.json,
включая веб-компоненты и полифиллы.
Для работы с приложением в браузере требуется локальный сервер. Polymer CLI предоставляет встроенный сервер разработки:
polymer serveПо умолчанию сервер запускается на порту 8080 и обеспечивает
автоматическое обновление страницы при изменении файлов. В качестве
альтернативы можно использовать другие локальные серверы, например,
http-server через npm.
Polymer поддерживает сборку и оптимизацию приложения для продакшн.
Конфигурация выполняется через файл polymer.json. Основные
параметры:
entrypoint — основной HTML-файл приложения.shell — HTML-файл с общим каркасом (для приложений с
lazy-loading элементов).sources — пути к исходным файлам проекта.extraDependencies — дополнительные файлы, которые
должны быть включены в сборку.builds — массив с настройками для разных конфигураций
сборки (например, production, development).Запуск сборки выполняется командой:
polymer buildРезультатом является оптимизированная версия проекта в каталоге
build/.
Для эффективной работы с Polymer рекомендуется использовать редакторы с поддержкой веб-компонентов и ES6-модулей, например:
Рекомендуется включить автоматическую проверку синтаксиса, подсветку ошибок и возможность запускать локальный сервер напрямую из редактора.
Для больших проектов важно контролировать версии пакетов.
Рекомендуется использовать package-lock.json для
фиксирования версий зависимостей и избегать несовместимостей при сборке
на разных машинах. Также стоит периодически выполнять:
npm outdated
npm updateЭто позволяет отслеживать новые версии зависимостей и обновлять их безопасно, не нарушая работу приложения.
Для совместимости с устаревшими браузерами необходимо подключение
полифиллов Web Components. В Polymer 3 полифиллы поставляются через
пакет @webcomponents/webcomponentsjs и подключаются в
index.html следующим образом:
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>Это обеспечивает работу всех стандартов веб-компонентов в браузерах, не поддерживающих их нативно.
После выполнения всех шагов установка и настройка среды позволяет получить проект со следующей структурой:
my-polymer-app/
├── node_modules/
├── src/
│ └── my-element.js
├── index.html
├── package.json
├── polymer.json
└── README.mdЭта структура является базовой и может расширяться по мере добавления компонентов, стилей и дополнительных настроек сборки.