Polymère - Installation

Il est facile de configurer Polymer dans votre système. Voici les deux façons d'installer Polymer.

  • Le Polymer CLI (Interface de ligne de commande)
  • Le Bower

Installation de Polymer à l'aide de Polymer CLI

Step 1 - Installez Polymer à l'aide de la commande npm suivante.

npm install -g [email protected]

Step 2 - Vérifiez l'installation et la version réussies à l'aide de la commande suivante.

polymer --version

S'il s'est installé avec succès, il affichera la version comme -

Step 3 - Créez un répertoire avec le nom de votre choix et basculez vers ce répertoire.

mkdir polymer-js 
cd polymer-js

Step 4- Pour initialiser votre projet, exécutez la commande suivante dans votre répertoire polymer-js .

polymer init

Après avoir exécuté la commande ci-dessus, il affichera quelque chose comme ceci -

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 - Sélectionnez l'application polymère-2 parmi les options ci-dessus.

Maintenant, démarrez votre projet à l'aide de la commande suivante.

polymer serve

Installation de polymère à l'aide de Bower

Step 1 - Pour repartir de zéro en utilisant la méthode Bower, installez le Bower en utilisant la commande suivante.

npm install -g bower

Step 2 - Installez le Polymer à l'aide de la commande suivante.

npm install -g [email protected]

Step 3 - Vérifiez l'installation réussie et la version de Polymer à l'aide de la commande suivante.

polymer --version

S'il s'est installé avec succès, il affichera la version comme -

0.18.0-pre.13.

Step 4 - Pour installer la dernière version de Polymer 2.0 RC de bower, utilisez la commande suivante.

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

Step 5 - Créer un index.html fichier et ajoutez le code suivant dans la balise <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 - Démarrez votre projet à l'aide de la commande suivante.

polymer serve

Construire pour le déploiement

Pour construire votre projet de déploiement, polymer build est un moyen plus simple, qui réduira, compilera ou regroupera votre code en fonction des indicateurs de ligne de commande.

Pour créer une version universelle qui fonctionne sur tous les navigateurs, utilisez la commande suivante.

polymer build --js-compile

La commande ci-dessus construira le projet à build / default et vous pouvez démarrer ce répertoire à l'aide de la commande suivante.

polymer serve build/default

Polymer 2.0 utilise ES6 et des éléments personnalisés HTML. Pour les meilleures pratiques, il est toujours bon d'utiliser ES6 avec des navigateurs avec une prise en charge complète d'ES6 et de compiler ES5 sur d'anciens navigateurs qui ne prennent pas en charge ES6. Le tableau suivant présente la meilleure stratégie pour votre projet.

Stratégie Le plus simple pour la prise en charge de plusieurs navigateurs Le plus optimal pour les performances de WC v1
Serveur Tout serveur fonctionne, y compris les serveurs statiques Service différentiel requis
Code déployé ES5 transpilé ES6
Chargeur Polyfill webcomponents-es5-loader.js webcomponents-loader.js