JavaScript : Le débogage et l'analyse de code

Réduire le code avec UglifyJS

Testez gratuitement nos 1302 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
UglifyJS est un utilitaire de nettoyage de code. Il vous facilitera également la lecture des sources.
03:36

Transcription

Alors sachez qu'il existe également le contraire et « Uglify », eh bien, c'est un paquet aussi qui va être installable par npm et pour le coup, ça va pas vous permettre de rendre le code beau quoique vous allez voir qu'il y a quand même une option pour le faire mais c'est essentiellement fait pour compiler à la base. Donc ça va parser le code et puis ça va tout compiler. Ça c'est très intéressant quand vous allez mettre votre site en production. Si vous avez un code qui est écrit comme cela, vous allez peut-être avoir envie de le compresser parce que compressé évidemment, il prend un tout petit peu moins de place. Pour l'installer, c'est toujours la même chose, « npm install uglify-js -g », ça on va le faire où ? On va le faire directement en console. Donc on va se rendre sur la console. N'oubliez pas de préfixer par « sudo » si vous êtes comme moi sur un environnement Unix et puis ici on va l'installer, et une fois que c'est installé, eh bien on va l'utiliser. Pareil, on va faire un « Uglify ». Et puis, on va utiliser le « app.js » qui est le fichier que l'on veut et on voit qu'effectivement, la sortie dans le terminal, ça va être un code qui va être compressé. Alors pas d'inquiétude, pour le moment ce n'est qu'un exemple. Votre fichier n'a pas été touché. Donc là encore, on a tout un tas d'options qui existent et dans la documentation, vous aurez même des exemples. Alors c'est une très grosse doc pour le coup parce que « Uglify », c'est un projet qui est assez vieux. Là, c'est la version 2 qu'on va utiliser, il existait déjà en version 1. Il fait beaucoup de choses, il ne fait pas que de la compression et il faut savoir qu'il fait aussi de la réécriture sans aucun problème. Alors par contre, ça veut dire que vous allez devoir utiliser ici un « output ». Alors, il n'y a pas d'autre possibilité, il faut mettre le « output » pour pouvoir faire une sortie. Donc si on a envie ici de faire une sortie sur « app.js », on fera « -o » et puis « app.js » qui fait que ça va le réécrire. Donc si on retourne sur le code, effectivement, on voit bien que cette fois-ci, il a été compilé. Alors ne vous inquiétez pas, ce n'est pas très, très grave puisqu'on va pouvoir sans aucun problème utiliser la même chose que ce qu'on avait avant, c'est-à-dire, eh bien « Beautify ». Je vous conseille quand même pour l'exemple ici de réutiliser le « js-beautify » qu'on a utilisé juste avant. Donc on va faire la même chose que ce qu'on a fait avant, c'est-à-dire « -r » pour faire une réécriture, comme ça, on récupère le vrai fichier. Et puis, on va quand même ici utiliser, hop, celui-ci avec l'option « -b ». Alors « -b » avec « Uglify », qu'est-ce que ça fait ? Ça va beautifier, c'est-à dire que ça va rendre joli le code, surtout ça va essayer de respecter des normes. On va le lancer et on va avoir une sortie console. Moi c'est très bien, c'est ce que je voulais. La sortie console, ça va nous permettre de faire un petit comparatif entre les deux. On voit qu'ici effectivement, on a « jQuery », « a », etc. et si on descend un tout petit peu, on voit que les variables qu'on a ici, regardez comment elles ont été formatées à cet endroit-là. Vous voyez que lui, il va les formater en ligne. En fait, il va arrêter de faire des sauts de ligne inutiles. Il va quand même compresser un tout petit peu et surtout il va faire quelque chose de correcte, qui est plus lisible à la limite presque, que « js-beautify ». Après, à vous de choisir, là, je vous montre des outils évidemment, c'est à vous ensuite de faire un choix : soit vous passez par du coup « js-beautify » parce que vous passez par ça pour beautifier ou alors vous passez directement sur « uglify » et vous pouvez l'utiliser pour absolument tout. De la même manière ici, si on a envie d'utiliser ce fichier-là, beautifié, donc rendu joli, on va être obligé de le sortir, toujours pareil, avec l'option « o ». Pensez bien à mettre l'option « b » d'abord et puis ensuite l'option « o », ce qui permettra de réduire encore un tout petit peu le code et d'avoir quelque chose de propre. Ça c'est des outils vraiment utiles parce qu'avant de débugger quoique ce soit, il est vraiment important d'y voir plus clair dans le code. Pensez-y, on a deux outils qui nous permettent de faire ça, à vous ensuite de choisir le fonctionnement que vous allez en faire.

JavaScript : Le débogage et l'analyse de code

Prenez en main les techniques et les outils pour améliorer votre code JavaScript. Découvrez Bower, js-beautify, la console de Chrome, les tests unitaires et fonctionnels, etc.

1h29 (26 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :3 mars 2017

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 !