Легко настроить Polymer в вашей системе. Ниже приведены два способа установки Polymer.
- Polymer CLI (интерфейс командной строки)
- Бауэр
Установка полимера с помощью CLI Polymer
Шаг 1 — Установите Polymer с помощью следующей команды npm.
npm install -g polymer-cli@next
Шаг 2 — Проверьте успешную установку и версию, используя следующую команду.
polymer --version
Если он был успешно установлен, то он покажет версию как —
Шаг 3 — Создайте каталог с именем по вашему выбору и переключитесь на этот каталог.
mkdir polymer-js cd polymer-js
Шаг 4 — Чтобы инициализировать ваш проект, выполните следующую команду в вашем Polymer-JSDirectory .
polymer init
После выполнения вышеупомянутой команды, она покажет что-то вроде этого —
C:\polymer-js>polymer init ? Which starter template would you like to use? 1) polymer-1-element - A simple Polymer 1.0 element template 2) polymer-2-element - A simple Polymer 2.0 element template 3) polymer-1-application - A simple Polymer 1.0 application template 4) polymer-2-application - A simple Polymer 2.0 application 5) polymer-1-starter-kit - A Polymer 1.x starter application template, with navigation and "PRPL pattern" loading 6) polymer-2-starter-kit - A Polymer 2.x starter application template, with navigation and "PRPL pattern" loading 7) shop - The "Shop" Progressive Web App demo Answer: 4
Шаг 5 — Выберите полимер-2-приложение из приведенных выше вариантов.
Теперь запустите ваш проект, используя следующую команду.
polymer serve
Установка полимера с помощью Bower
Шаг 1 — Чтобы начать с нуля, используя метод Bower, установите Bower с помощью следующей команды.
npm install -g bower
Шаг 2 — Установите полимер, используя следующую команду.
npm install -g polymer-cli@next
Шаг 3 — Проверьте успешную установку и версию Polymer, используя следующую команду.
polymer --version
Если он был успешно установлен, то он покажет версию как —
0.18.0-pre.13.
Шаг 4 — Чтобы установить последнюю версию Polymer 2.0 RC от Bower, используйте следующую команду.
bower install Polymer/polymer#^2.0.0-rc.3
Шаг 5. Создайте файл index.html и добавьте следующий код в тег <head>.
<script src = "/bower_components/webcomponentsjs/webcomponentsloader.js"></script> // it loads the polyfills <link rel = "import" href = "/bower_components/polymer/polymer.html"> // it import Polymer
Шаг 6 — Запустите ваш проект с помощью следующей команды.
polymer serve
Здание для развертывания
Чтобы построить ваш проект для развертывания, команда полимерного построения — это более простой способ, который минимизирует, компилирует или связывает ваш код в зависимости от флагов командной строки.
Чтобы создать универсальную сборку, которая работает во всех браузерах, используйте следующую команду.
polymer build --js-compile
Приведенная выше команда создаст проект для сборки / default, и вы можете запустить этот каталог, используя следующую команду.
polymer serve build/default
Polymer 2.0 использует пользовательские элементы ES6 и HTML. Для лучшей практики всегда полезно использовать ES6 для браузеров с полной поддержкой ES6 и компилировать ES5 для старых браузеров, которые не поддерживают ES6. Следующая таблица показывает лучшую стратегию для вашего проекта.