Полимер - Монтаж

Polymer легко настроить в вашей системе. Ниже приведены два способа установки Polymer.

Polymer CLI (интерфейс командной строки)
Беседка

Установка Polymer с помощью Polymer CLI

Step 1 - Установите Polymer с помощью следующей команды npm.

npm install -g polymer-cli@next

Step 2 - Проверьте успешную установку и версию с помощью следующей команды.

polymer --version

Если он установлен успешно, он покажет версию как -

Step 3 - Создайте каталог с именем по вашему выбору и переключитесь в этот каталог.

mkdir polymer-js 
cd polymer-js

Step 4- Чтобы инициализировать ваш проект, выполните следующую команду в вашем каталоге polymer-js .

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

Step 5 - Выберите приложение «Полимер-2» из приведенных выше вариантов.

Теперь запустите свой проект, используя следующую команду.

polymer serve

Установка полимера с помощью Bower

Step 1 - Чтобы начать с нуля, используя метод Bower, установите Bower с помощью следующей команды.

npm install -g bower

Step 2 - Установите полимер, используя следующую команду.

npm install -g polymer-cli@next

Step 3 - Проверьте успешную установку и версию Polymer, используя следующую команду.

polymer --version

Если он установлен успешно, он покажет версию как -

0.18.0-pre.13.

Step 4 - Чтобы установить последнюю версию Polymer 2.0 RC из bower, используйте следующую команду.

bower install Polymer/polymer#^2.0.0-rc.3

Step 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

Step 6 - Запустите свой проект, используя следующую команду.

polymer serve

Строительство для развертывания

Чтобы собрать свой проект для развертывания, polymer build command - это более простой способ, который минимизирует, скомпилирует или объединит ваш код в зависимости от флагов командной строки.

Чтобы создать универсальную сборку, которая работает во всех браузерах, используйте следующую команду.

polymer build --js-compile

Приведенная выше команда создаст проект для сборки / default, и вы можете запустить этот каталог, используя следующую команду.

polymer serve build/default

Polymer 2.0 использует пользовательские элементы ES6 и HTML. Лучше всего использовать ES6 для браузеров с полной поддержкой ES6 и скомпилировать ES5 для старых браузеров, которые не поддерживают ES6. В следующей таблице показана лучшая стратегия для вашего проекта.

Стратегия	Самый простой для кросс-браузерной поддержки	Самый оптимальный для производительности WC v1
Сервер	Работает любой сервер, в том числе статический	Требуется дифференциальное обслуживание
Развернутый код	ES5 передан	ES6
Загрузчик полифиллов	webcomponents-es5-loader.js	webcomponents-loader.js