Le fameux console.log… L’outil de debug « par défaut » (oui c’est parfois malheureux) de nombreux développeurs web. Son utilisation n’est pas dérangeante en soit mais pose problème à partir du moment où on se retrouve avec une cinquantaine de lignes en production qui pop dans la console à chaque fois qu’on navigue sur une page.

Je vais vous donner un moyen de supprimer tout ça dans votre application Angular.

Le petit exemple

Avant tout, un petit exemple de ce qu’on peut trouver sur certains sites.

Voilà, c’est rigolo de voir ça, ça sert à rien pour le mec qui navigue sur votre site, à rien pour les dev. qui ne les a pas et quand il y en a vraiment beaucoup c’est chiant.

Bref tout pour plaire, console.log ou le gendre idéal.

La pratique stackoverflow

Comme d’habitude, quand on a un soucis : direction stackoverflow ou un blog à la recherche d’une lumière dans la nuit (alors que avec les écrans, la lumière, 2h du mat… tout ça tout ça…). Vous trouverez une solution qui revient assez souvent. Le bon vieux…

Voilà.

Donc maintenant on ferme stackoverflow et on cherche une solution.

Le plugin

Hey un plugin, ça semble chouette comme truc ! Il existe en effet de nombreux plugins pour faire ce qu’on veut. De mon côté, je vous propose d’utiliser uglifyjs

Uglifyjs est un petit outil qui permet de faire de très très nombreuses choses, dont celle de dégommer vos console.log dans vos fichiers avec un simple paramètre. Nous avons même la possibilité de ne supprimer que certaines fonctions comme juste console.log et de garder les console.error par exemple.

Je vais pas vous expliquer tout ce qu’on peut faire avec uglifyjs (ça serait trop long), mais je vous invite à y jeter un œil car c’est un outil petit mais/et puissant.

Alors comme ça, uglifyjs, on va pas pouvoir en faire grand chose, puisqu’il faut qu’on arrive à le plugger dans notre application Angular. Et la… de base comme ça… à froid… c’est le drame.. (oui Madame, Monsieur, le drame….).

Etape 1 : Le build angular

Angular, depuis la CLI en version 6 RC2 utilise le fichier angular.json pour faire « sa soupe ». De base on fait du « ng serve » et « ng build » et la magie opère. Le pourquoi du comment, c’est pas le premier truc qu’on regarde tant que ça marche. Mais du coup, quand on veut faire un truc, c’est un peu le lapin dans les phares (alors oui y’a pas de phares dans l’image mais il est tout mignon).

Ce qu’on peut éventuellement savoir, c’est que Angular utilise webpack pour faire son travail de build. Ah ce bon vieux Webpack ! C’est une bonne nouvelle ça ! Car il existe un plugin uglifyjs pour webpack : uglifyjs-webpack-plugin.

Donc pour enlever nos console.log, il suffit d’intégrer le plugin uglifyjs dans le pipe de Webpack lancé par Angular. Simple non ? Je vous donne 7 minutes (cf. le chef de projet).

De base Angular ne vous permet pas d’intervenir si facilement. Le secret du build est bien gardé mon précieux (en fait non mais c’est long de s’y mettre alors on ferme les yeux).

On va donc tout d’abord utiliser ngx-build-plus pour pouvoir interagir avec notre build. Pour l’installer rien de plus simple

Attention à votre fichier package.json, la librairie a eu la tendance à se mettre dans les dependencies et non les devDependencies.

La librairie va remplacer quelques lignes dans votre fichier angular.json pour pouvoir s’insérer tranquille dans le build. Et bim, build étendu. Easy, on est dans le timing !

Etape 2 : Supprimons donc nos console.log

Maintenant que nous avons installé notre petit outil pour étendre le build Angular, il suffit de l’utiliser. Comment qu’on fait donc ?

Il suffit de créer un fichier à la racine de votre projet qui peut se nommer « webpack.partial.js ». Le nom reste dans l’esprit de ce qu’on peut trouver pour les configurations webpack (on sera pas perdu).

Dans notre fichier, nous allons avoir besoin d’utiliser le plugin de uglifyjs, que nous allons donc simplement installer avec la commande suivante :

Ne reste donc plus qu’à écrire le code dans notre fichier. Code qui va simplement utiliser notre plugin.

Attention aux versions que vous utilisez, la construction des options a changée entre les versions.

Ici notre plugin va supprimer tout les appels à la console. Nous pouvons utiliser le paramètre pure_func pour affiner ça comme le stipule la documentation de uglifyjs.

drop_console (default: false) — Pass true to discard calls to console.* functions. If you wish to drop a specific function call such as console.info and/or retain side effects from function arguments after dropping the function call then use pure_funcs instead.

Etape 3 : Le nouveau build

Ok, notre fichier est chouette et nous avons de quoi étendre le build. Comment qu’on procède pour que ça marche maintenant ? Et bien il suffit de lancer notre commande avec un nouveau paramètre et le tour est joué

Vous remplacez votre commande dans votre package.json et on y pense plus.

Plus de console.log en production et on peut en coller partout dans notre code mwhahaha.