Polimero - Installazione

È facile configurare Polymer nel tuo sistema. Di seguito sono riportati i due modi per installare Polymer.

  • Polymer CLI (Command Line Interface)
  • The Bower

Installazione di Polymer utilizzando Polymer CLI

Step 1 - Installa Polymer utilizzando il seguente comando npm.

npm install -g [email protected]

Step 2 - Verificare la corretta installazione e versione utilizzando il seguente comando.

polymer --version

Se è stato installato correttamente, mostrerà la versione come:

Step 3 - Crea una directory con il nome che preferisci e passa a quella directory.

mkdir polymer-js 
cd polymer-js

Step 4- Per inizializzare il tuo progetto, esegui il seguente comando nella tua directory polymer-js .

polymer init

Dopo aver eseguito il comando precedente, mostrerà qualcosa del genere:

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 - Selezionare l'applicazione del polimero-2 dalle opzioni sopra indicate.

Ora avvia il tuo progetto usando il seguente comando.

polymer serve

Installazione di polimero utilizzando Bower

Step 1 - Per iniziare da zero utilizzando il metodo Bower, installa Bower utilizzando il seguente comando.

npm install -g bower

Step 2 - Installa il polimero utilizzando il seguente comando.

npm install -g [email protected]

Step 3 - Verificare la corretta installazione e versione di Polymer, utilizzando il seguente comando.

polymer --version

Se è stato installato correttamente, mostrerà la versione come:

0.18.0-pre.13.

Step 4 - Per installare l'ultima versione di Polymer 2.0 RC da bower, utilizzare il seguente comando.

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

Step 5 - Crea un file index.html file e aggiungi il codice seguente nel tag <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 - Inizia il tuo progetto utilizzando il seguente comando.

polymer serve

Creazione per la distribuzione

Per creare il tuo progetto per la distribuzione, polymer build command è un modo più semplice, che minimizzerà, compilerà o raggrupperà il codice a seconda dei flag della riga di comando.

Per creare una build universale che funzioni su tutti i browser, usa il seguente comando.

polymer build --js-compile

Il comando precedente creerà il progetto per build / default e puoi avviare questa directory, usando il seguente comando.

polymer serve build/default

Polymer 2.0 utilizza ES6 e HTML Custom Elements. Per la migliore pratica, è sempre bene usare ES6 per browser con pieno supporto ES6 e compilare ES5 per vecchi browser che non supportano ES6. La tabella seguente mostra la migliore strategia per il tuo progetto.

Strategia Il più semplice per il supporto cross-browser Ideale per prestazioni WC v1
server Qualsiasi server funziona, compresi quelli statici È richiesta una porzione differenziale
Codice distribuito ES5 trasportabile ES6
Caricatore Polyfill webcomponents-es5-loader.js webcomponents-loader.js