Mettre une application en production avec Angular 2

Découvrir les plug-ins efficaces

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
WebPack dispose de nombreux plug-ins pour vous faire gagner du temps. Découvrez les meilleurs d'entre eux au travers d'exemples pratiques.
04:13

Transcription

On va utiliser deux fichiers de configuration et de définition de plug-ins. Il va falloir faire attention à ça parce qu'on a un fichier qui s'appelle common et on a ensuite un fichier par environnement. Ça, vous l'avez déjà vu dans la vidéo précédente. Maintenant, le fichier common, on va en parler un petit peu parce qu'ici sont définis tous les plug-ins qu'on va utiliser et on redéfinit d'autres plug-ins si on en a besoin dans les environnements. Le common va être ajouté ici dans les deux configurations, et ensuite il va être mergé, c'est-à-dire qu'on va utiliser le commonConfig plus des configurations qui seront les configurations qui se trouvent dans ce fichier-là pour faire la configuration finale. Donc, dans common, vous trouverez les tâches de base qui sont en fait communes aux deux projets. Et qu'est-ce qu'on va faire à l'intérieur ? On va faire énormément de choses, on va copier des informations, on va vérifier des éléments HTML, on va les packager pour en faire un seul script, on va utiliser des extensions HTML, on va aussi, pourquoi pas, travailler avec les assets, toutes les images, les CSS, etc. Donc, ce sont des plug-ins qui à chaque fois vont être utilisés, et regardez ici, configurés. Alors, comment ça marche ? Eh bien, vous allez voir qu'effectivement à l'intérieur de ce fichier qui est là, on va à un moment, alors, je vais descendre un petit peu plus bas, définir ici les différents plug-ins, et ces différents plug-ins, ils seront appelés, et donc ils seront chargés, et on leur injectera de la configuration. Par exemple ici, on dit que les assets, on va avoir les webpack-assets.json qui vont définir les différents assets et qui vont nous permettre de travailler avec. Ce sera packagé un petit peu plus tard et utilisé par ce plug-in pour fonctionner. Ici, pareil, on va récupérer polyfills et vendor et puis on va travailler avec. Ici, on va avoir un contexte de remplacement qui va nous permettre de travailler sur les sources et de venir en fait récupérer toutes les informations des vendors, puisque pour le coup, ici, on va aller chercher les librairies angular core. On va aussi, ici, avoir un script de copie qui va copier les assets dans un dossier asset et qui va récupérer src/meta parce qu'on va avoir à l'intérieur ici des informations dans meta. Donc, vous voyez que ça, ce sera utilisé, il va aller les chercher, et puis il va les injecter dans le bon dossier. De la même manière, ici. On a HtmlWebpackPlugin qui va en fait utiliser un template particulier et qui va injecter des informations. Souvenez-vous, je vous ai montré ça, les petites informations méta. C'est ce plug-in qui va nous permettre de remplacer des infos qu'on a à l'intérieur d'un index.html par ce qu'on a référencé. Et on référence en haut. Si vous ne l'avez pas vu au début, regardez, c'est ici. C'est là qu'on vient référencer les différentes petites informations, et elles seront remplacées. Donc, il y a tout un tas de plug-ins qui existent qui sont extrêmement intéressants et qui vont permettre donc de travailler. Donc, à chaque fois, ça va être un petit peu de config pour chaque plug-in pour venir faire fonctionner la compilation, etc., de vos différents projets. Alors, il faudra choisir ce que vous mettrez dans le fichier common qui est en fait disponible sur les deux environnements, et ce que vous mettrez dans votre fichier final d'environnement particulier pour travailler avec. Je vais vous montrer aussi sur le site Internet de WebPack, ici sur le côté, vous avez la liste des différents plug-ins. Donc, il ne faut pas hésiter à aller regarder ça, vous voyez ici, Using Plugins, ça vous permet de comprendre comment ça va être utilisé, ce n'est pas très compliqué, et vous avez aussi le listing de tous les plug-ins. Là, on vous les définit tous. Il y en a quand même pas mal. Bien sûr, vous démarrez toujours avec un template, et c'est vraiment bien de pouvoir faire vos essais directement ici. Alors là, si vous voulez gagner en clarté, je vous conseille d'enlever tous les commentaires, mais ce qui est intéressant aussi, c'est que regardez, ici, à chaque fois vous allez avoir de l'information sur le dépôt sur lequel vous pouvez aller chercher le code source. Donc, vous pouvez aussi copier à chaque fois les URL, allez les regarder... c'est sur le github du WebPack, et vous aurez à chaque fois les différentes informations précises de l'utilisation de chaque plug-in. Donc là, vous avez tout ce qu'il faut pour bien démarrer. Bien évidemment, ce n'est pas très compliqué en soi parce que finalement tout ce que l'on fait c'est récupérer les différentes informations qui se trouvent dans tous ces dossiers, et on va en créer une distribution. Je vais vous montrer après comment effectivement on passe en mode production avec un script qu'on a déjà écrit, un script tel que celui-ci.

Mettre une application en production avec Angular 2

Optimisez la mise en production de votre application AngularJS. Réduisez le temps de chargement et d’affichage, gérez les tâches répétitives avec des scripts, etc.

1h05 (20 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :13 déc. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !