• About
  • Advertise
  • Privacy & Policy
  • Contact
Tech News, Magazine & Review WordPress Theme 2017
  • ACCUEIL
    • Home – Layout 5
  • Review

    National Academy of Sciences endorses embryonic engineering

    Watch Dogs 2 Update Coming This Week, Here’s What It Does

    Fujifilm X-T2 review: The definition of a great camera

    The Analogue Nt Mini is the perfect NES console for video game lovers

    Using a mind reading device, ‘locked-in’ patients told researchers they’re happy

    Watch Cruise’s self-driving Bolt EV navigate smoothly to SF’s Dolores Park

  • Gaming

    To regain advertiser trust, Facebook is tracking ads by the millisecond

    National Academy of Sciences endorses embryonic engineering

    Google has been asked to take down over a million websites

    Watch Dogs 2 Update Coming This Week, Here’s What It Does

    The Analogue Nt Mini is the perfect NES console for video game lovers

    GoPro’s Karma drone is back on sale after design flaw made them fall out of the sky

  • Gear
    • All
    • Audio
    • Camera
    • Laptop
    • Smartphone

    Apple Watch Series 2 Is Swimproof and Comes With Built-In GPS

    National Academy of Sciences endorses embryonic engineering

    Jack Dorsey says he’ll continue running both Square and Twitter

    Fujifilm X-T2 review: The definition of a great camera

    The Warby Parker of hair color, Madison Reed, scores new funding and a CMO

    Shopify CEO attempts to defend continued hosting of Breitbart’s online store

    Trending Tags

    • Best iPhone 7 deals
    • Apple Watch 2
    • Nintendo Switch
    • CES 2017
    • Playstation 4 Pro
    • iOS 10
    • iPhone 7
    • Sillicon Valley
  • Computers

    To regain advertiser trust, Facebook is tracking ads by the millisecond

    Google has been asked to take down over a million websites

    Watch Dogs 2 Update Coming This Week, Here’s What It Does

    Fujifilm X-T2 review: The definition of a great camera

    Shopify CEO attempts to defend continued hosting of Breitbart’s online store

    SpaceX targets February 18 for Dragon resupply mission to ISS

  • Applications

    Apple Watch Series 2 Is Swimproof and Comes With Built-In GPS

    To regain advertiser trust, Facebook is tracking ads by the millisecond

    National Academy of Sciences endorses embryonic engineering

    Google has been asked to take down over a million websites

    Watch Dogs 2 Update Coming This Week, Here’s What It Does

    Jack Dorsey says he’ll continue running both Square and Twitter

  • Security

    To regain advertiser trust, Facebook is tracking ads by the millisecond

    National Academy of Sciences endorses embryonic engineering

    Google has been asked to take down over a million websites

    Watch Dogs 2 Update Coming This Week, Here’s What It Does

    The Warby Parker of hair color, Madison Reed, scores new funding and a CMO

    Shopify CEO attempts to defend continued hosting of Breitbart’s online store

No Result
View All Result
  • ACCUEIL
    • Home – Layout 5
  • Review

    National Academy of Sciences endorses embryonic engineering

    Watch Dogs 2 Update Coming This Week, Here’s What It Does

    Fujifilm X-T2 review: The definition of a great camera

    The Analogue Nt Mini is the perfect NES console for video game lovers

    Using a mind reading device, ‘locked-in’ patients told researchers they’re happy

    Watch Cruise’s self-driving Bolt EV navigate smoothly to SF’s Dolores Park

  • Gaming

    To regain advertiser trust, Facebook is tracking ads by the millisecond

    National Academy of Sciences endorses embryonic engineering

    Google has been asked to take down over a million websites

    Watch Dogs 2 Update Coming This Week, Here’s What It Does

    The Analogue Nt Mini is the perfect NES console for video game lovers

    GoPro’s Karma drone is back on sale after design flaw made them fall out of the sky

  • Gear
    • All
    • Audio
    • Camera
    • Laptop
    • Smartphone

    Apple Watch Series 2 Is Swimproof and Comes With Built-In GPS

    National Academy of Sciences endorses embryonic engineering

    Jack Dorsey says he’ll continue running both Square and Twitter

    Fujifilm X-T2 review: The definition of a great camera

    The Warby Parker of hair color, Madison Reed, scores new funding and a CMO

    Shopify CEO attempts to defend continued hosting of Breitbart’s online store

    Trending Tags

    • Best iPhone 7 deals
    • Apple Watch 2
    • Nintendo Switch
    • CES 2017
    • Playstation 4 Pro
    • iOS 10
    • iPhone 7
    • Sillicon Valley
  • Computers

    To regain advertiser trust, Facebook is tracking ads by the millisecond

    Google has been asked to take down over a million websites

    Watch Dogs 2 Update Coming This Week, Here’s What It Does

    Fujifilm X-T2 review: The definition of a great camera

    Shopify CEO attempts to defend continued hosting of Breitbart’s online store

    SpaceX targets February 18 for Dragon resupply mission to ISS

  • Applications

    Apple Watch Series 2 Is Swimproof and Comes With Built-In GPS

    To regain advertiser trust, Facebook is tracking ads by the millisecond

    National Academy of Sciences endorses embryonic engineering

    Google has been asked to take down over a million websites

    Watch Dogs 2 Update Coming This Week, Here’s What It Does

    Jack Dorsey says he’ll continue running both Square and Twitter

  • Security

    To regain advertiser trust, Facebook is tracking ads by the millisecond

    National Academy of Sciences endorses embryonic engineering

    Google has been asked to take down over a million websites

    Watch Dogs 2 Update Coming This Week, Here’s What It Does

    The Warby Parker of hair color, Madison Reed, scores new funding and a CMO

    Shopify CEO attempts to defend continued hosting of Breitbart’s online store

No Result
View All Result
Technique de pointe
No Result
View All Result
Home Générale

7 outils qui transforment le développement JavaScript

Caleb by Caleb
mai 26, 2021
145
7 outils qui transforment le développement JavaScript
Share on FacebookShare on Twitter


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.

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

Recommended.

Nike entre dans Metaverse sur la plateforme de jeux vidéo Roblox

Nike entre dans Metaverse sur la plateforme de jeux vidéo Roblox

novembre 19, 2021
Responsable Marketing + Communication – Q City Metro

Responsable Marketing + Communication – Q City Metro

février 11, 2023

Subscribe.

Trending.

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

décembre 24, 2021
Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

novembre 25, 2021
Erreur C14a du code d’assistance Snapchat : comment y remédier ?

Erreur C14a du code d’assistance Snapchat : comment y remédier ?

août 21, 2022
Avantages et inconvénients des concepteurs et créateurs de jeux vidéo

Avantages et inconvénients des concepteurs et créateurs de jeux vidéo

septembre 17, 2021
Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

mai 15, 2022

Catégories de produits

  • Non classé (2)
Technique de pointe

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

Follow Us

Catégories

  • Apple
  • Applications
  • Audio
  • Camera
  • Computers
  • Gaming
  • Gear
  • Générale
  • Laptop
  • Microsoft
  • Photography
  • portrait
  • Review
  • Security
  • Smartphone

Étiquettes

actualités industrielles actualité économique affaires ailette AMERS ASIE ASXPAC BACT Buying Guides CMPNY Commerce courrier quotidien CYCS CYCS08 des sports Divertissement EMRG Entreprise GEN Google Inc. ITSE ITSE08 jeu vidéo jeux vidéo l'Internet La technologie Logiciel Microsoft MTPIX NOM nous nouvelles Playstation 4 Pro politique Sillicon Valley SWIT TECH08 technologie TMT TOPCMB TOPNWS Types de contenu Éducation économie

Recent News

L’application de rencontres LGBTQ + Grindr émet un avertissement aux utilisateurs en Égypte

L’application de rencontres LGBTQ + Grindr émet un avertissement aux utilisateurs en Égypte

mars 25, 2023
Les 7 meilleures applications d’écriture pour votre Mac

Les 7 meilleures applications d’écriture pour votre Mac

mars 25, 2023
  • About
  • Advertise
  • Privacy & Policy
  • Contact

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

No Result
View All Result
  • Accueil
  • high tech
  • Jeu Vidéo
  • Tutoriel
    • HTML5 / CSS
    • Java Script
    • PHP / MySQL
  • Microsoft
  • Apple
  • Review
  • Applications
  • Photography
  • Security

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

Welcome Back!

Sign In with Facebook
Sign In with Google
Sign In with Linked In
OR

Login to your account below

Forgotten Password?

Retrieve your password

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

Log In

Add New Playlist

Nous avons découvert un nouveau système qui génère des revenus 100% passifs... Ignorer