Polímero - Instalação

É fácil configurar o Polymer em seu sistema. A seguir estão as duas maneiras de instalar o Polymer.

  • O Polymer CLI (interface de linha de comando)
  • The Bower

Instalação de polímero usando CLI de polímero

Step 1 - Instale o Polymer usando o seguinte comando npm.

npm install -g polymer-cli@next

Step 2 - Verifique a instalação e a versão bem-sucedidas usando o seguinte comando.

polymer --version

Se tiver sido instalado com sucesso, ele mostrará a versão como -

Step 3 - Crie um diretório com o nome de sua escolha e mude para esse diretório.

mkdir polymer-js 
cd polymer-js

Step 4- Para inicializar seu projeto, execute o seguinte comando em seu polímero-jsdirectory .

polymer init

Depois de executar o comando acima, ele mostrará algo assim -

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 - Selecione a aplicação de polímero 2 entre as opções fornecidas acima.

Agora, inicie seu projeto usando o seguinte comando.

polymer serve

Instalando Polymer usando Bower

Step 1 - Para começar do zero usando o método Bower, instale o Bower usando o seguinte comando.

npm install -g bower

Step 2 - Instale o Polymer usando o seguinte comando.

npm install -g polymer-cli@next

Step 3 - Verifique o sucesso da instalação e versão do Polymer, usando o seguinte comando.

polymer --version

Se tiver sido instalado com sucesso, ele mostrará a versão como -

0.18.0-pre.13.

Step 4 - Para instalar a versão mais recente do Polymer 2.0 RC do bower, use o seguinte comando.

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

Step 5 - Crie um index.html arquivo e adicione o seguinte código na 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 - Inicie seu projeto usando o seguinte comando.

polymer serve

Edifício para implantação

Para construir seu projeto para implantação, polymer build command é uma maneira mais fácil, que irá minimizar, compilar ou agrupar seu código dependendo dos sinalizadores de linha de comando.

Para criar uma versão universal que funcione em todos os navegadores, use o seguinte comando.

polymer build --js-compile

O comando acima irá construir o projeto para construir / default e você pode iniciar este diretório, usando o seguinte comando.

polymer serve build/default

O Polymer 2.0 usa ES6 e HTML Custom Elements. Para melhores práticas, é sempre bom usar ES6 para navegadores com suporte ES6 completo e compilar ES5 para navegadores antigos que não suportam ES6. A tabela a seguir mostra a melhor estratégia para seu projeto.

Estratégia Mais fácil para suporte cruzado Mais ideal para desempenho WC v1
Servidor Qualquer servidor funciona, incluindo os estáticos Serviço diferencial necessário
Código implantado ES5 transpilado ES6
Polyfill Loader webcomponents-es5-loader.js webcomponents-loader.js