Webpack, Babel et ESLint #react #code #programming #javascript

13 May 2025 · 2 min

Watch on YouTube

1:57

In this French-language tutorial, the presenter explains three essential development tools for React projects: Webpack, Babel, and ESLint. Webpack is described as a module bundler that aggregates JavaScript, CSS, images, fonts, and other assets into optimized bundles for the browser, using loaders to handle non‑JS files. Babel is presented as a transpiler that converts modern ES6+ JavaScript, JSX, and even TypeScript‑like code into standard JavaScript that all browsers can execute, ensuring compatibility especially with older browsers. ESLint is introduced as a linting tool that detects errors, enforces coding style, and promotes best practices to improve code security and maintainability. The speaker emphasizes how each tool fits into the development workflow—Webpack for bundling and asset management, Babel for code transformation, and ESLint for code quality—providing a concise overview of their roles and why they are indispensable in a React development pipeline.

Chapters

Parmi les outils dont un projet React a besoin lors du développement, il y a Webpack, Babel et ESLint. Webpack est un module bundler pour JavaScript, c'est-à-dire un outil qui permet de regrouper les codes sources dans un seul ou plusieurs fichiers optimisés pour l'exécution sur le navigateur. En effet, comme vous allez le voir plus loin dans ce cours, on crée souvent des modules personnalisés, comme des composants, que l'on importe dans le fichier principal de l'application. Au moment de l'exécution ou du déploiement du projet, ces modules-là seront regroupés de manière organisée et optimisée dans quelques fichiers JavaScript. En plus, Webpack ne se limite pas qu'aux fichiers et codes JavaScript mais il peut aussi gérer le CSS, les images, les polices, etc. Grâce à des fonctions nommées loaders. Babel est un transcompilateur dit aussi transpiler. Un transpiler est un outil qui permet de convertir un code source d'un langage de programmation ou un on a un code source dans un autre langage. À titre d'exemple, un navigateur ne comprend pas du code écrit en TypeScript, il faut donc transformer celui-ci en JavaScript avant de l'exécuter. Cette transformation est assurée à l'aide d'un transpiler. Babel quant à lui transforme le code JavaScript ES6 et plus en code JavaScript standard compris par tous les navigateurs. En effet, comme vous allez le voir plus loin dans ce cours, on utilise généralement une écriture JavaScript moderne lors du codage de l'application React. Donc, certains codes risquent de ne pas s'exécuter correctement, surtout sur les anciens navigateurs. C'est pour cette raison que Babel intervient pour le convertir en code compréhensible. En plus, il n'y a pas que du JavaScript qui sera transpilé, mais aussi le JSX qui est incontournable dans un projet React. ESLint est un linter ou outil de linting JavaScript. Il s'agit d'un outil qui assure la détection et la correction des erreurs dans le code. Il veille également sur le respect d'un style particulier lors du développement du projet ainsi que les bonnes pratiques de codage afin d'assurer une meilleure sécurité. Et maintenabilité du code produit.