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 |