• Accueil
  • Info
  • Publicité
  • Privacy & Policy
  • Nous Contacter
No Result
View All Result
Technique de pointe
  • Actualité
  • Technologies
  • Jeu vidéo
  • Mobile
  • Astuces
  • HTML5 / CSS
  • Java Script
  • PHP
  • Article Sponsorisé
  • Astuces
  • Jeu vidéo
  • Nous Contacter
MYCAMER
  • Actualité
  • Mobile
  • Jeu vidéo
    Le jeu vidéo Call of Duty: Modern Warfare 2 obtient une date de sortie

    Le jeu vidéo Call of Duty: Modern Warfare 2 obtient une date de sortie

    La semaine de la ville du jeu vidéo : les arcades de Yakuza sont propres, étrangement studieuses et un délice

    La semaine de la ville du jeu vidéo : les arcades de Yakuza sont propres, étrangement studieuses et un délice

    Les employés d’Activision voteront pour le syndicat

    Les employés d’Activision voteront pour le syndicat

    Top 5 des meilleurs jeux vidéo PC en Inde mis à jour

    Top 5 des meilleurs jeux vidéo PC en Inde mis à jour

    16 meilleures offres: jeux vidéo, équipement de plein air et technologie

    16 meilleures offres: jeux vidéo, équipement de plein air et technologie

    Le jeu – 8 conseils pour les survivants

    Le jeu – 8 conseils pour les survivants

    Meilleures actions de jeux vidéo à acheter en mai

    Meilleures actions de jeux vidéo à acheter en mai

    APERÇU : Jeu vidéo Escape Academy

    APERÇU : Jeu vidéo Escape Academy

    Un général à la retraite quatre étoiles pense que les séquences de jeux vidéo sont le conflit Ukraine-Russie

    Un général à la retraite quatre étoiles pense que les séquences de jeux vidéo sont le conflit Ukraine-Russie

  • Developpement web
    • All
    • Language HTML5
    ATHENA GOLD CORPORATION acquiert un prospect de cuivre porphyrique, d’or et de molybdène dans le district de Crow Springs, dans le comté d’Esmeralda, au Nevada

    ATHENA GOLD CORPORATION acquiert un prospect de cuivre porphyrique, d’or et de molybdène dans le district de Crow Springs, dans le comté d’Esmeralda, au Nevada

    Chargé de cours en UI et UX Design à l’UNIVERSITY OF GREENWICH

    Chargé de cours en UI et UX Design à l’UNIVERSITY OF GREENWICH

    Revue Figma |  Bloc créatif

    Revue Figma | Bloc créatif

    Commerce de détail omnicanal – La combinaison parfaite pour le commerce de détail

    Commerce de détail omnicanal – La combinaison parfaite pour le commerce de détail

    ALE : Accord de libre-échange entre l’Inde et l’Australie : pourquoi l’ALE est différent, sans précédent

    ALE : Accord de libre-échange entre l’Inde et l’Australie : pourquoi l’ALE est différent, sans précédent

    Apprenez JavaScript sans expérience de codage pour seulement 40 $

    Apprenez JavaScript sans expérience de codage pour seulement 40 $

    Manipulation des couleurs avec JavaScript |  Bonus HTML

    Manipulation des couleurs avec JavaScript | Bonus HTML

    Début d’un parcours de développement frontend – La nouvelle pile

    Début d’un parcours de développement frontend – La nouvelle pile

    Un homme condamné à plus de 25 ans de prison pour avoir volé un magasin de téléphones portables à Gunpoint |  USAO-NDTX

    L’ancien shérif de Norfolk condamné pour corruption publique | USAO-EDVA

  • Astuces
    Comment utiliser WordPress : un guide pour les débutants

    Comment utiliser WordPress : un guide pour les débutants

    Revue Squarespace 2022 : fonctionnalités, prix et plus

    WordPress.com Review 2022: Features, Pricing & More

    Comment installer WordPress sur le serveur Ubuntu 22.04 LTS

    Comment installer WordPress sur le serveur Ubuntu 22.04 LTS

    Jacob Nicotra, fondateur et PDG de Jacob Nicotra Web Development, a été présenté dans le magazine Authority

    Jacob Nicotra, fondateur et PDG de Jacob Nicotra Web Development, a été présenté dans le magazine Authority

    Revue Squarespace 2022 : fonctionnalités, prix et plus

    Which is Better in 2022?

    Set Up Your Store in 7 Steps

    Set Up Your Store in 7 Steps

    Revue Squarespace 2022 : fonctionnalités, prix et plus

    SiteGround Review 2022 : fonctionnalités, prix et plus

    Revue Squarespace 2022 : fonctionnalités, prix et plus

    Revue Squarespace 2022 : fonctionnalités, prix et plus

    Comment commencer à tester votre code WordPress avec le framework de test PHP Pest – WP Tavern

    Comment commencer à tester votre code WordPress avec le framework de test PHP Pest – WP Tavern

  • Nous contacter
No Result
View All Result
MYCAMER
No Result
View All Result
Home Actualité

7 outils qui transforment le développement JavaScript

Caleb by Caleb
mai 26, 2021
in Actualité
0 0
0
7 outils qui transforment le développement JavaScript
337
SHARES
2k
VIEWS
Share on FacebookShare on TwitterRedditLinkedin


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.

Example of the Title

Example description. Lorem Ipsum is simply dummy text of the printing and type..

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.

Droits d’auteur © 2021 IDG Communications, Inc.

— to www.infoworld.com

Get real time update about this post categories directly on your device, subscribe now.

Unsubscribe
Caleb

Caleb

Stay Connected

  • 82.2k Followers
  • 113k Subscribers

Articles populaires

  • 10 problèmes courants de l’iPhone 13 et comment les résoudre

    10 problèmes courants de l’iPhone 13 et comment les résoudre

    3563 shares
    Share 1425 Tweet 891
  • Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

    897 shares
    Share 359 Tweet 224
  • Battle.net s’est remis d’une attaque DDoS, selon Blizzard

    495 shares
    Share 198 Tweet 124
  • Avantages et inconvénients des concepteurs et créateurs de jeux vidéo

    523 shares
    Share 209 Tweet 131
  • Exposition de portraits un hommage intime au service, au sacrifice

    526 shares
    Share 210 Tweet 132

Follow Our Page

Ajouter votre lien ici

Example of the Title

Follow Us

    Go to the Customizer > JNews : Social, Like & View > Instagram Feed Setting, to connect your Instagram account.
Facebook Twitter Youtube Vimeo Instagram

We bring you the best Premium WordPress Themes that perfect for news, magazine, personal blog, etc. Check our landing page for details.

Category

  • Actualité
  • Article Sponsorisé
  • Astuces
  • Jeu vidéo
  • Language HTML5
  • Mobile
  • portrait
  • Technologies

Recent News

ATHENA GOLD CORPORATION acquiert un prospect de cuivre porphyrique, d’or et de molybdène dans le district de Crow Springs, dans le comté d’Esmeralda, au Nevada

ATHENA GOLD CORPORATION acquiert un prospect de cuivre porphyrique, d’or et de molybdène dans le district de Crow Springs, dans le comté d’Esmeralda, au Nevada

mai 25, 2022
Portrait of a killer: ‘Bullied’ Call of Duty-loving Texas school gunman brawled repeatedly at school

Portrait of a killer: ‘Bullied’ Call of Duty-loving Texas school gunman brawled repeatedly at school

mai 25, 2022

© 2022 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Actualité
  • Mobile
  • Jeu vidéo
  • Developpement web
  • Astuces
  • Nous contacter

© 2022 JNews - Premium WordPress news & magazine theme by Jegtheme.

Welcome Back!

Sign In with Facebook
Sign In with Google
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
fr French
ar Arabiczh-CN Chinese (Simplified)en Englishfr Frenchde Germanit Italianru Russianes Spanish

Add New Playlist

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.