7 outils qui transforment le développement JavaScript

Il semble que chaque année soit une année exceptionnelle pour JavaScript, et 2021 ne fait pas exception. En particulier, une nouvelle génération de bundlers et d’outils de construction remet en question l’inertie des outils «assez bons». Une vitesse améliorée, une meilleure expérience de développement et des versions de production de meilleure qualité sont tous les domaines prioritaires de la nouvelle race.

Poursuivez votre lecture pour un aperçu de la nouvelle version stable des outils JavaScript. ESM, esbuild, Parcel, pnpm, Rollup, Snowpack et Vite sont les nouvelles stars qui facilitent le développement JS.

Modules ECMAScript (ESM)

Les modules ECMAScript, également appelés modules ES ou ESM, sont la syntaxe officielle du module JavaScript. En tant que tel, ce n’est pas techniquement un outil, mais il a de larges implications pour le développement et les outils JS. Nous avons vu pendant un certain temps beaucoup de chaos et d’incertitude dans l’utilisation du module JavaScript (avec Node.js atterrissant sur la syntaxe CommonJS). Mais avec la récente approbation d’ESM et sa mise en œuvre générale dans les navigateurs, de nouvelles possibilités s’ouvrent.

La forme générale de la syntaxe ESM est présentée dans le Listing 1. La première ligne est la syntaxe pour importer une exportation par défaut. Le second utilise la déstructuration pour spécifier les membres à l’intérieur du module.

Listing 1. Syntaxe ESM

import aModule from 'module-name';
import { moduleMember, anotherMember } from 'module-name';

Même Microsoft Edge prend désormais en charge ESM, de sorte que tous les principaux navigateurs le prennent désormais en charge.

Le navigateur utilise les modules de deux manières: soit dans les scripts JavaScript qu’il inclut, soit directement dans le "module" balise de script, illustrée dans la liste 2.

Listing 2. Importation via le module de script

<script type="module" src="https://unpkg.com/browse/react@17.0.1/"></script>
<script type="module">
  import React from 'react';
</script>
<script type="module" src="https://www.infoworld.com/article/3619560/my-module.js"></script>

Dans le listing 2, les deux premières balises de script montrent comment cibler une URL absolue. Remarquez dans un premier temps que vous utilisez le src attribut, et dans le second, vous exécutez l’importation JavaScript. La troisième balise de script montre une importation relative diffusée à partir du même domaine. Notez que lorsque vous insérez un script d’un autre domaine, CORS des restrictions s’appliquent.

Pendant de nombreuses années, divers bundlers (le plus souvent Webpack de nos jours) ont été utilisés pour regrouper des scripts afin de contourner les limitations du navigateur avec des modules. Une large prise en charge des navigateurs pour les modifications ESM, et la nouvelle génération d’outils a été développée pour tirer parti de cette prise en charge.

Cependant, vous verrez que le groupage a toujours un rôle à jouer, car autoriser le navigateur à demander naïvement tous les modules d’une application entraînerait de mauvaises performances à partir d’une multitude de requêtes. Le regroupement, la minification, le partage de code intelligent / CSS, etc. sont toujours importants pour de bonnes performances.

Vous pouvez voir la prise en charge du navigateur pour ESM ici.

esbuild

esbuild est une entrée relativement nouvelle dans le domaine du bundler. Comme d’autres, sa renommée est la vitesse. Il est écrit en Go par opposition à JavaScript et bénéficie du parallélisme intégré de Go. Il repose également sur une utilisation intelligente de la mémoire partagée lors de l’analyse et de la génération de code.

Vous pouvez avoir une idée de la vitesse d’esbuild en vérifiant les benchmarks du projet. Les benchmarks montrent des augmentations de performances de 100 fois et plus par rapport aux autres bundleurs.

Par défaut, esbuild bundles pour le navigateur mais il est également capable de regroupement pour Node.js. Il fonctionne de la même manière que les autres outils de construction en se connectant à NPM via package.json et node_modules. Il propose également une API JavaScript que vous pouvez utiliser pour regrouper les commandes de construction si vos besoins deviennent trop complexes et trop lourds pour une utilisation en ligne de commande. Le listing 3 montre un exemple d’utilisation de cette API.

esbuild se concentre sur le groupage et n’inclut pas de serveur en mode dev. Certaines fonctionnalités, comme code / CSS scission, sont toujours en cours. D’autres outils peuvent utiliser esbuild pour ses capacités de regroupement de production – voir Vite ci-dessous.

En mai 2021, esbuild avait ~ 25K étoiles GitHub et ~ 570K téléchargements hebdomadaires de NPM. Cela fait d’esbuild le plus petit des projets décrits ici, mais son utilisation augmente rapidement et ses promesses de performances en font une option tentante.

Listing 3. Utilisation de l’API JavaScript esbuild

require('esbuild').build({
  entryPoints: ['app.jsx'],
  bundle: true,
  outfile: 'out.js',
}).catch(() => process.exit(1))

esbuild génère un bundle entièrement autonome qui incorpore le code de votre application et toutes les dépendances. Beaucoup plug-ins sont disponibles pour gérer une variété de cas d’utilisation, à partir de Svelte à PostCSS à YAML. Prêt à l’emploi, esbuild prend en charge les types courants tels que TypeScript, JSX et JSON.

Colis

Je m’en voudrais si je ne mentionnais pas Colis, qui est un outil similaire dans l’esprit à Webpack et Rollup (voir ci-dessous). En plus de réduire les frais de configuration, Parcel prétend améliorer les performances, bien qu’il ne puisse pas correspondre aux affirmations d’esbuild à cet égard.

Le colis comprend le fractionnement du code sans configuration et le remplacement de module à chaud (HMR) prêt à l’emploi. Il intègre également de nombreux types de fichiers (comme les images) par défaut, et il peut les gérer sans configuration supplémentaire.

Parcel a environ 38 000 étoiles sur GitHub et environ 64 000 téléchargements hebdomadaires de NPM (les téléchargements hebdomadaires semblent se stabiliser). Ces statistiques en font une option viable de taille moyenne.

pnpm

pnpm n’est pas un bundler ou un outil de construction. Au lieu de cela, il s’agit d’un remplacement instantané de l’outil de dépendance NPM. Cela le rend similaire à Fil dans le but, mais pnpm adopte une approche différente: il utilise des liens physiques pour aplatir l’arborescence node_modules, simplifiant ainsi la gestion des dépendances et évitant les dépendances en double. Vous pouvez en savoir plus sur cette astuce d’ingénierie ici.

En plus d’économiser de l’espace disque, cette structure ouvre quelques améliorations de performances, comme on le voit dans ces benchmarks, qui montrent que pnpm surpasse les autres gestionnaires de packages dans la plupart des tâches.

pnpm inclut également pnpx, un outil similaire à npx, pour exécuter des packages.

pnpm a ~ 11K étoiles GitHub et ~ 191K téléchargements hebdomadaires de NPM. Il s’agit du gestionnaire de packages par défaut pour SvelteKit et connaît une forte croissance de son utilisation. pnpm semble être l’un des principaux candidats au prochain gestionnaire de dépendances standard de facto.

Rollup

Rollup est un bundler qui vous permet d’utiliser la syntaxe ESM partout. Il adoucit les différentes syntaxes vues à l’état sauvage (CJS, AMD, UMD, EMS, etc.) et regroupe votre code dans une syntaxe qui fonctionne tout simplement. En outre, Rollup offre un «tremblement d’arbre», qui est la capacité d’analyser votre base de code et d’éliminer les importations inutilisées. Cela a des avantages évidents en termes de performances.

Comme esbuild et d’autres bundlers, Rollup est lié à package.json et node_modules via NPM.

Lorsque vous utilisez Rollup, vous pouvez fondamentalement oublier la syntaxe du module et simplement utiliser ESM. En général, Rollup vise à vous donner l’expérience du futur développement JS, où tout est maintenant unifié sur ESM.

Rollup est assez similaire à Webpack en fonctionnement, mais contrairement à Webpack, il prend en charge la sortie Node.js. De plus, certains développeurs rapportent une expérience plus simple et plus fluide avec Rollup.

Rollup ne prend pas en charge le remplacement du module à chaud dès la sortie de la boîte.

Rollup a une communauté active et une écosystème plug-in. En mai 2021, il avait ~ 20K étoiles GitHub et ~ 4,8 millions de téléchargements hebdomadaires de NPM.

Vite

Vite était à l’origine un outil de construction spécifiquement pour Vue, mais il prend désormais en charge une utilisation générale. C’est devenu la solution de construction officielle pour SvelteKit il en est de même pour une utilisation de plus en plus large.

Vite se concentre sur la gestion de deux exigences pour le développement JS: l’exécution du mode de développement et la construction pour la production. Vite n’est pas un bundler et confie à la place les tâches de regroupement de production à Rollup.

Conçu pour être rapide (vite signifie rapide en français), Vite vante son serveur de développement à démarrage rapide et son remplacement de module à chaud. L’expérience confirme les affirmations de Vite – ces fonctionnalités fonctionnent assez rapidement par rapport à quelque chose comme Webpack.

Les améliorations de vitesse de Vite sont basées sur l’exploitation d’ESM et l’utilisation d’esbuild pour le pré-regroupement. L’utilisation d’ESM signifie que Vite peut décharger le travail de regroupement sur le navigateur pendant le développement et obtenir plus de granularité lors de la détermination des fichiers qui seront servis lors des modifications.

Vite utilise actuellement Rollup pour les versions de production (pour obtenir des fonctionnalités telles que le fractionnement CSS) mais pourrait passer à esbuild à l’avenir.

L’expérience de développement de Vite est son meilleur argument de vente – son remplacement de module à chaud est vraiment rapide. Il compte actuellement ~ 27K étoiles GitHub et ~ 124K téléchargements hebdomadaires de NPM, avec une forte augmentation des téléchargements au cours des deux derniers mois.

Manteau neigeux

Manteau neigeux est un autre serveur de bundler et de développement axé sur la vitesse. Il offre un démarrage rapide du serveur, une prise en charge ESM avec une mise en cache intelligente, un remplacement rapide des modules à chaud et une prise en charge à faible configuration de divers types de fichiers. Snowpack est similaire dans l’esprit à Rollup et Parcel.

Snowpack prend en charge le remplacement ciblé de modules à chaud pour JavaScript, les modules CSS et CSS prêts à l’emploi. Il dispose également d’un forte communauté de plug-ins.

Snowpack a ~ 18K étoiles GitHub et ~ 55K téléchargements hebdomadaires de NPM.

L’avenir des outils JS

Webpack a été un merveilleux standard de facto, mais il commence à montrer son âge. Les nouveaux outils, avec le nouveau paysage à l’esprit, sont sûrs d’offrir de meilleures performances et une expérience de développeur améliorée à l’avenir.

JavaScript reste un monde passionnant et en évolution rapide dans lequel se développer. La vie ne cesse de s’améliorer pour les développeurs JavaScript.