Polimer - instalacja

Konfiguracja Polymer w systemie jest łatwa. Poniżej przedstawiono dwa sposoby instalacji polimeru.

  • Polimerowy interfejs CLI (interfejs wiersza poleceń)
  • Altana

Instalowanie polimeru za pomocą polimerowego interfejsu wiersza polecenia

Step 1 - Zainstaluj Polymer za pomocą następującego polecenia npm.

npm install -g polymer-cli@next

Step 2 - Sprawdź pomyślną instalację i wersję za pomocą następującego polecenia.

polymer --version

Jeśli została pomyślnie zainstalowana, wyświetli wersję jako -

Step 3 - Utwórz katalog o wybranej nazwie i przejdź do tego katalogu.

mkdir polymer-js 
cd polymer-js

Step 4- Aby zainicjować projekt, uruchom następujące polecenie w katalogu polimer-js .

polymer init

Po wykonaniu powyższego polecenia pokaże coś takiego -

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 - Wybierz aplikację polimer-2 z podanych powyżej opcji.

Teraz rozpocznij projekt za pomocą następującego polecenia.

polymer serve

Instalowanie polimeru za pomocą Bower

Step 1 - Aby rozpocząć od zera przy użyciu metody Bower, zainstaluj Bower za pomocą następującego polecenia.

npm install -g bower

Step 2 - Zainstaluj polimer za pomocą następującego polecenia.

npm install -g polymer-cli@next

Step 3 - Sprawdź pomyślną instalację i wersję Polymer za pomocą następującego polecenia.

polymer --version

Jeśli została pomyślnie zainstalowana, wyświetli wersję jako -

0.18.0-pre.13.

Step 4 - Aby zainstalować najnowszą wersję Polymer 2.0 RC z bower, użyj następującego polecenia.

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

Step 5 - Utwórz plik index.html file i dodaj następujący kod w tagu <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 - Rozpocznij projekt za pomocą następującego polecenia.

polymer serve

Budowanie do wdrożenia

Aby zbudować projekt do wdrożenia, polymer build polecenie jest łatwiejszym sposobem, który zminimalizuje, skompiluje lub spakuje kod w zależności od flag wiersza polecenia.

Aby utworzyć uniwersalną kompilację, która działa we wszystkich przeglądarkach, użyj następującego polecenia.

polymer build --js-compile

Powyższe polecenie zbuduje projekt do zbudowania / domyślnego i możesz uruchomić ten katalog, używając następującego polecenia.

polymer serve build/default

Polymer 2.0 wykorzystuje niestandardowe elementy ES6 i HTML. Najlepszą praktyką jest używanie ES6 w przeglądarkach z pełną obsługą ES6 i kompilowanie ES5 do starszych przeglądarek, które nie obsługują ES6. Poniższa tabela przedstawia najlepszą strategię dla Twojego projektu.

Strategia Najłatwiejszy do obsługi wielu przeglądarek Najbardziej optymalny dla wydajności WC v1
serwer Działa dowolny serwer, w tym statyczny Wymagana obsługa różnicowa
Wdrożony kod Przekazano ES5 ES6
Ładowarka Polyfill webcomponents-es5-loader.js webcomponents-loader.js