Polímero - Instalación

Es fácil configurar Polymer en su sistema. Las siguientes son las dos formas de instalar Polymer.

  • La CLI de polímero (interfaz de línea de comandos)
  • El Bower

Instalación de polímero mediante la CLI de polímero

Step 1 - Instale Polymer usando el siguiente comando npm.

npm install -g polymer-cli@next

Step 2 - Verifique la instalación y la versión correctas con el siguiente comando.

polymer --version

Si se ha instalado correctamente, mostrará la versión como:

Step 3 - Cree un directorio con el nombre de su elección y cambie a ese directorio.

mkdir polymer-js 
cd polymer-js

Step 4- Para inicializar su proyecto, ejecute el siguiente comando en su directorio Polymer-js .

polymer init

Después de ejecutar el comando anterior, mostrará algo como esto:

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 - Seleccione la aplicación polímero-2 de las opciones dadas anteriormente.

Ahora, inicie su proyecto usando el siguiente comando.

polymer serve

Instalación de polímero con Bower

Step 1 - Para comenzar desde cero usando el método Bower, instale el Bower usando el siguiente comando.

npm install -g bower

Step 2 - Instale el polímero usando el siguiente comando.

npm install -g polymer-cli@next

Step 3 - Verifique la instalación exitosa y la versión de Polymer, usando el siguiente comando.

polymer --version

Si se ha instalado correctamente, mostrará la versión como:

0.18.0-pre.13.

Step 4 - Para instalar la última versión de Polymer 2.0 RC de bower, use el siguiente comando.

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

Step 5 - Crea un index.html y agregue el siguiente código en la etiqueta <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 - Inicie su proyecto usando el siguiente comando.

polymer serve

Construyendo para la implementación

Para construir su proyecto para su implementación, polymer build El comando es una forma más fácil, que minificará, compilará o agrupará su código según los indicadores de la línea de comando.

Para crear una compilación universal que funcione en todos los navegadores, use el siguiente comando.

polymer build --js-compile

El comando anterior construirá el proyecto para construir / predeterminado y puede iniciar este directorio, usando el siguiente comando.

polymer serve build/default

Polymer 2.0 utiliza elementos personalizados ES6 y HTML. Para las mejores prácticas, siempre es bueno usar ES6 para navegadores con soporte completo de ES6 y compilar ES5 para navegadores antiguos que no son compatibles con ES6. La siguiente tabla muestra la mejor estrategia para su proyecto.

Estrategia Más fácil para la compatibilidad con varios navegadores Más óptimo para el rendimiento de WC v1
Servidor Cualquier servidor funciona, incluidos los estáticos Se requiere servicio diferencial
Código implementado ES5 transpilado ES6
Cargador Polyfill webcomponents-es5-loader.js webcomponents-loader.js