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 |