Polimer - Kurulum
Polimer'i sisteminizde yapılandırmak kolaydır. Polimer kurmanın iki yolu aşağıdadır.
- Polimer CLI (Komut Satırı Arayüzü)
- The Bower
Polimer CLI Kullanarak Polimer Yükleme
Step 1 - Aşağıdaki npm komutunu kullanarak Polimer kurun.
npm install -g polymer-cli@next
Step 2 - Aşağıdaki komutu kullanarak başarılı kurulumu ve sürümü kontrol edin.
polymer --version
Başarıyla yüklendiyse, sürümü şu şekilde gösterecektir -
Step 3 - Seçtiğiniz adla bir dizin oluşturun ve o dizine geçin.
mkdir polymer-js
cd polymer-js
Step 4- Projenizi başlatmak için, polimer-js dizininizde aşağıdaki komutu çalıştırın .
polymer init
Yukarıdaki komutu uyguladıktan sonra, şuna benzer bir şey gösterecektir -
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 - Yukarıda verilen seçeneklerden polimer-2-uygulamasını seçin.
Şimdi, aşağıdaki komutu kullanarak projenize başlayın.
polymer serve
Polimerin Bower Kullanılarak Takılması
Step 1 - Bower yöntemini kullanarak sıfırdan başlamak için aşağıdaki komutu kullanarak Bower'ı kurun.
npm install -g bower
Step 2 - Aşağıdaki komutu kullanarak Polimeri kurun.
npm install -g polymer-cli@next
Step 3 - Aşağıdaki komutu kullanarak Polymer'in başarılı kurulumunu ve sürümünü kontrol edin.
polymer --version
Başarıyla yüklendiyse, sürümü şu şekilde gösterecektir -
0.18.0-pre.13.
Step 4 - En son Polymer 2.0 RC sürümünü bower'dan yüklemek için aşağıdaki komutu kullanın.
bower install Polymer/polymer#^2.0.0-rc.3
Step 5 - Bir index.html dosyasını açın ve aşağıdaki kodu <head> etiketine ekleyin.
<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 - Aşağıdaki komutu kullanarak projenizi başlatın.
polymer serve
Dağıtım için Oluşturma
Projenizi dağıtım için oluşturmak için, polymer build komutu, komut satırı bayraklarına bağlı olarak kodunuzu küçültecek, derleyecek veya paketleyecek daha kolay bir yoldur.
Tüm tarayıcılarda çalışan evrensel bir yapı oluşturmak için aşağıdaki komutu kullanın.
polymer build --js-compile
Yukarıdaki komut, projeyi build / default olarak oluşturacaktır ve aşağıdaki komutu kullanarak bu dizini başlatabilirsiniz.
polymer serve build/default
Polymer 2.0, ES6 ve HTML Özel Öğeleri kullanır. En iyi uygulama için, ES6'yı tam ES6 desteğine sahip tarayıcılarda kullanmak ve ES5'i ES6'yı desteklemeyen eski tarayıcılarda derlemek her zaman iyidir. Aşağıdaki tablo projeniz için en iyi stratejiyi göstermektedir.
Strateji | Tarayıcılar arası destek için en kolay | WC v1 performansı için en uygun |
---|---|---|
Sunucu | Statik olanlar dahil herhangi bir sunucu çalışır | Diferansiyel sunum gerekli |
Dağıtılan Kod | ES5 aktarılmış | ES6 |
Polyfill Yükleyici | webcomponents-es5-loader.js | webcomponents-loader.js |