Babel est-il encore nécessaire en 2018 ?

Question

J'apprends le JavaScript en ce moment et certains m'ont dit qu'après avoir appris le HTML et le CSS et le Javascript vanille, je dois avoir des connaissances sur ES6/ES2015. Quand je regarde des tutoriels sur Youtube, il est dit que nous avons besoin de Babel ou quelque chose comme ça pour que le navigateur le lise. Je me demande donc, car cette vidéo n'est pas si vieille (mais quand même vieille). Est-il toujours nécessaire d'avoir Babel ou dois-je laisser tomber cette histoire de Babel ?

Answer 1

Babel est un compilateur JavaScript-to-JavaScript, parfois appelé un transpondeur qui convertit le code écrit avec un ensemble de fonctionnalités (par exemple, celles de l'ES2015 et des versions ultérieures) en code qui peut être exécuté dans un environnement JavaScript qui ne prend pas en charge ces fonctionnalités. (Il en existe d'autres, Babel n'en est qu'un assez populaire).

La décision d'utiliser Babel pour transposer votre code ES2015+ vers ES5 vous appartient entièrement, et dépend des environnements cibles que vous souhaitez prendre en charge. Si vous souhaitez prendre en charge toutes les versions d'IE (y compris IE11), par exemple, vous devrez transpiler. Si vous souhaitez uniquement prendre en charge les versions les plus récentes de Chrome, Firefox et Edge, ou d'autres environnements dans lesquels vous pouvez compter sur la présence des fonctionnalités que vous utilisez (comme des installations Node.js à jour), vous n'avez pas besoin de le faire.

Kangax dispose d'un ensemble de tableaux pratiques pour savoir quels moteurs JavaScript et/ou navigateurs prennent en charge les fonctionnalités les plus modernes de JavaScript (pas seulement ES2015, mais ES2016, ES2017, etc.).

L'utilité de Babel (et des outils similaires) va au-delà de la simple utilisation des fonctionnalités les plus récemment standardisées, et ce de deux manières au moins :

1. Vous pouvez utiliser Babel (et d'autres outils similaires) pour tirer parti de fonctionnalités qui seront probablement bientôt normalisées, même si elles ne sont pas encore bien supportées. Par exemple, les bases des champs publics de classe n'ont pas changé depuis longtemps, mais la proposition dans laquelle ils se trouvent est toujours (au moment où nous écrivons ces lignes, en juin 2018) au stade 3 (et a fait des allers-retours entre le stade 2 et le stade 3 à plusieurs reprises) pour des raisons sans rapport avec les champs de classe publics, et même les navigateurs de pointe comme Chrome, Firefox et Edge ne prennent pas encore en charge les champs de classe publics. Mais il est courant, de nos jours, d'utiliser des champs de classe via un transpilateur.

2. Vous pouvez écrire votre propre transformation Babel (ou similaire) pour ajouter vos propres fonctionnalités à JavaScript pour votre propre projet (ou utiliser celles que d'autres ont écrites), même si ces fonctionnalités ne feront jamais partie de JavaScript ou ne seront pas utilisées en dehors de votre projet.

Answer 2

Sans vouloir m'écarter du sujet, je recommande aux débutants de ne pas s'intéresser aux outils et aux configurations. Cela peut être accablant, surtout au pays des JS. Concentrez-vous sur l'apprentissage, les outils viendront plus tard. Vous pouvez commencer à utiliser ES6 tout de suite sans aucun outil.

L'un des moyens consiste à utiliser un REPL ou un terrain de jeu en ligne. Un outil que j'aime bien est https://stackblitz.com ce site web vous permet de vous familiariser avec l'importation de modules à partir de l'UE. npm pour aider votre code. Si vous êtes sur Chrome, vous pouvez ouvrir la console du développeur et voir les messages que vous envoyez du terrain de jeu à la console du développeur.

https://developer.chrome.com/devtools

Voici un terrain de jeu que j'ai réalisé pour vous aider à démarrer.

https://stackblitz.com/edit/react-t3wxth?file=index.js