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 |