Laisser un commentaire

Les modules JavaScript indispensables

L’un des motos de tout bon développeur est DRY, don’t repeat yourself. Pourtant, une très grosses partie de nos projets ont des besoins similaires : valider un email, uploader des fichiers…

À ce titre, conformément à un autre moto de tout bon développeur – ne pas réinventer la roue – on utilise des outils et modules déjà existants et éprouvés. Voici donc un petit listing des modules que j’utilise régulièrement.

Nous parlons ici de JavaScript, il va donc sans dire que tous ces outils se trouvent sur npm, le package manager du monde JS.

Par ailleurs, vous avez aussi très certainement vécu la situation où vous vous retrouvez à copier d’un projet à un autre des petits helpers ou lib maison. C’est donc peut-être le moment d’en faire un module npm et de le publier afin de pouvoir l’utiliser plus facilement.

À ce titre, certains modules de ce listing sont des modules que j’ai moi-même développé et mis à disposition de tous sur npm.

Modules front-end

Je parle ici des modules qui sont utilisés pour le front et se retrouvent dans le build final envoyé au navigateur du client.

Modules back-end

Le but n’est pas ici de lister tous les modules que l’on utilise régulièrement en back, mais plutôt de mettre en évidence ceux qui sont pratiques et que l’on a pas tout de suite en tête.

Modules isomorphiques

Nous parlons ici des modules que l’on utilise aussi bien en front qu’en back. Je considère plus le cas d’usage que le potentiel technique à tourner en front ou back.

Modules de développement

Ce sont ici les modules qui restent sur nos machines de dev, mais dont on pourrait difficilement se passer… Certains de ces modules s’utilisent de manière différentes selon que l’on travaille sur un modèle de pages “classiques” ou avec un bundler tel que Webpack.

Je vais donc commencer par l’usage classique – lequel est détaillé dans mon article sur Rollup – puis on verra comment gérer les choses avec Webpack (dans un cadre type Vue.js ou React).

Rollup

Là où on utilisait avant Browserify avec le CommonJS, on aura maintenant plutôt tendance à utiliser un module bundler capable de gérer les module ECMAScript.

J’utilise pour ma part Rollup. On l’installe avec ses indispensables plugins que sont :

Webpack & Vue.js

Dès lors que le projet est un peu plus complexe (ou selon les préférences), on a tendance à utiliser Webpack. C’est par exemple le bundler par défaut avec Vue CLI et il accompagne quasi automatiquement les projets React.

Bon nombre des dépendances sont directement installées et configurées par Vue CLI lorsqu’on l’utilise pour initialiser un projet. Il n’est donc pas forcement utile de les détailler ici car elles ne sont pas manuellement installées.

Comme je l’ai mentionné en introduction, il ne s’agit absolument pas d’une liste exhaustive de tous les modules utiles ou que j’utilise, mais plutôt de ceux que l’on retrouve presque systématiquement dans la plupart des typologies de projets. N’hésitez pas à me faire part de vos propres préférences et conseils en commentaires.

Commentaires

Rejoignez la discussion !

Vous pouvez utiliser Markdown pour les liens [ancre de lien](url), la mise en *italique* et en **gras**. Enfin pour le code, vous pouvez utiliser la syntaxe `inline` et la syntaxe bloc

```
ceci est un bloc
de code
```