Les outils de build React étaient un thème commun des discussions en 2023, et de nouveaux ont été construits avec Rust. Cet article de blog vous donne un aperçu des plus populaires utilisés et des éléments à surveiller en 2024.
Depuis le 29 mai 2013, date de la sortie initiale de React.js, de nombreux frameworks et bibliothèques JavaScript ont vu le jour. Cependant, React.js a bénéficié de l’amour de la communauté ; le taux d’adoption a augmenté de façon exponentielle et est resté l’une des bibliothèques frontales les plus populaires et le deuxième framework JavaScript le plus populaire après Node.js, selon le Enquête auprès des développeurs Stack Overflow 2023.
Plus encore, React.js a trouvé sa place dans la base de code de plusieurs entreprises technologiques comme Netflix, Facebook, Amazon et Google.
À mesure que la bibliothèque React et son écosystème évoluent, cela devient encore plus compliqué. Le besoin d’outils de build devient une nécessité absolue pour compiler et distribuer votre application React.
Mais qu’est-ce qu’un outil de build ? Un outil de génération vous permet d’automatiser le processus de transformation de votre code source en un artefact prêt pour la production. Cela pourrait être le regroupement et la minification de votre CSS et JavaScript, avec des techniques d’optimisation telles que le tremblement d’arbre. Cela pourrait également impliquer la transpilation de code utilisant les dernières fonctionnalités ECMAScript en code fonctionnant sur tous les navigateurs. Vous ne voulez pas être surpris que le dernier Objet.groupBy() la fonctionnalité fonctionne pour vos utilisateurs de Chrome, mais pas pour ceux de Safari. 😉
Ce guide abordera les outils de build les plus populaires de l’écosystème React pour 2024, sans ordre particulier.
Rollup.js
Rollup.js est un bundler de modules JavaScript populaire. Sa fonction principale est d’organiser, d’optimiser et de combiner des morceaux de code JavaScript plus petits en un seul fichier JavaScript distribuable. Il est intéressant de noter que Rollup n’est pas uniquement destiné au frontend ; il est également utilisé sur le backend avec Node.js et même avec des plates-formes de bureau comme Electron.js.
Dans le but de créer des builds efficaces, Rollup supprime soigneusement le code inutilisé via un processus appelé secouer les arbres, ce qui contribue à réduire la taille de la sortie. Même si Rollup utilise des modules ES, il peut transpiler le code dans d’autres formats de modules comme UMD et CommonJS.
Utilisation du cumul
Pour commencer à utiliser Rollup, installez son outil de ligne de commande en exécutant
npm install --global rollup
Cela installera Rollup globalement et vous pourrez commencer à l’utiliser immédiatement pour regrouper votre code JavaScript. La façon dont vous l’utilisez dans le navigateur diffère légèrement de la façon dont vous l’utilisez dans le backend avec Node.js
Pour le navigateur, vous souhaitez regrouper votre code sous forme de expression de fonction immédiatement invoquée (IIFE), pour contrôler la portée et garantir que la bibliothèque est prête à être utilisée immédiatement. Vous pouvez le faire en utilisant la commande ci-dessous :
rollup main.js --file bundle.js --format iife
Pour Node.js, vous pouvez compiler vers des modules CommonJS ou ES
rollup main.js --file bundle.js --format cjs
//or
rollup main.js --file bundle.js --format amd
//or
rollup main.js --file bundle.js --format es
Pour compiler à la fois pour le navigateur et Node.js, utilisez le umd format comme indiqué ci-dessous :
rollup main.js --file bundle.js --format umd
Voici les formats dans lesquels vous pouvez compiler : « amd », « cjs », « system », « es », « iife » ou « umd ».
Vous utilisez peut-être déjà Rollup car de nombreux frameworks et outils (comme Vite) l’utilisent déjà.
Il existe une version basée sur Rust de Rollup.js qui est encore en développement, destinée à être une version plus rapide. Le nom est plutôt un inverse de Rollup, Déroulement vérifiez-le, aucune version n’a encore été publiée.
esconstruire
esconstruire est l’un des outils de construction les plus populaires et les plus rapides. De nombreux outils de construction plus récents comme Bun, Turbopack et Rspack s’en sont inspirés aujourd’hui. Son système de modules plugins est également l’un des modèles les plus admirés.
Selon cette référence en regroupant 10 copies de three.js à partir de zéro avec des cartes sources et une minification, esbuild a fonctionné encore mieux que Rspack et a été le deuxième outil de construction le plus rapide avec plus de 36,5 000 étoiles GitHub.
esbuild, comme la plupart des outils de build, a été conçu pour regrouper, réduire et générer une sortie optimisée pour la distribution et, bien sûr, pour augmenter l’expérience et la productivité des développeurs.
Utiliser esbuild
Il existe plusieurs façons d’utiliser esbuild, mais vous devez d’abord l’installer en exécutant la commande ci-dessous :
npm install --save-exact --save-dev esbuild
Une fois cette installation terminée, vous pouvez commencer à l’utiliser. Il possède également un Cour de récréation pour que vous puissiez explorer et avoir une idée de ce qui vous attend.
Vous pouvez exécuter la commande esbuild ci-dessous pour regrouper votre application React :
./node_modules/.bin/esbuild app.jsx --bundle --outfile=build.js
Vous trouverez ci-dessous une capture d’écran avec un exemple simple d’application React et le résultat de la construction réussie.
Si vous inspectez le build.js fichier, vous trouverez un code JavaScript fourni presque illisible, prêt à être déployé. Cela devrait ressembler à celui ci-dessous :
Vous pouvez également ajouter esbuild à vos scripts de build dans votre fichier package.json comme ceci :
{
"scripts": {
"build": "esbuild app.jsx --bundle --outfile=build.js"
}
}
Maintenant, vous pouvez exécuter :
npm run build
Vérifier la Documentation pour en savoir plus sur l’utilisation d’esbuild.
Rsconstruire
Rsconstruire est un bundler Web basé sur Rspack créé par ByteDance, la société derrière TikTok. Il regroupe tous vos fichiers statiques, tels que JavaScript, CSS et images, ainsi que vos dépendances, pour vous permettre de fournir du code optimisé et efficace au navigateur. Il améliore également votre expérience de développement en réduisant le coût d’installation initial ; ça marche. 👌🏽
Voici une comparaison des performances entre Rsbuild, Rspack, webpack et Vite.
Rsbuild prend en charge TypeScript et plusieurs bibliothèques css-in-js prêtes à l’emploi. Ceci est réalisé en utilisant le Rsbuild Plugin PostCSS. Essentiellement, Rsbuild est une version améliorée de webpack et ses plugins sont largement compatibles avec ceux utilisés dans webpack.
Utilisation de Rsbuild
Vous pouvez utiliser Rsbuild pour créer de nouveaux projets React en exécutant la commande ci-dessous :
npm create rsbuild@latest
Ensuite, pour générer une build de production avec Rsbuild, exécutez le code ci-dessous :
npm run build
Et votre script package.json devrait avoir la commande Rsbuild comme ceci :
{
"scripts": {
"build": "rsbuild build",
}
}
Le résultat de l’exécution du script de build devrait ressembler à la capture d’écran ci-dessous :
Il a généré le /dist répertoire avec tous les fichiers de build comme indiqué ci-dessous :
Turbopack
Turbopack est un autre bundler basé sur Rust créé par Vercel qui cherche à remplacer webpack. webpack est un outil étonnant qui facilite grandement le travail avec les frameworks et les bibliothèques JavaScript. Cela a rendu le regroupement, le fractionnement de code, la réduction, le tremblement d’arborescence, le rechargement de module à chaud, etc. de projets JavaScript beaucoup plus faciles, avec une configuration par défaut et une configuration de configuration avancée en option si nécessaire.
L’objectif principal de Turbopack est d’être un bundler plus performant, ayant un temps de démarrage et de construction minimal et générant une version de production plus efficace.
L’une des principales caractéristiques de Turbopack est son processus de construction incrémentielle, qui améliore considérablement les performances. Il vous permet de créer votre projet une fois, puis de réutiliser la version mise en cache pour les versions ultérieures, sauf en cas de mise à jour. S’il y a une mise à jour, il reconstruit généralement uniquement la partie avec la nouvelle mise à jour.
Remarque : Turbopack n’est pas prêt pour la production au moment d’écrire ces lignes, utilisez-le donc avec prudence.
Utiliser Turbopack
Au moment d’écrire ces lignes, Turbopack n’est utilisable qu’avec Next.js. Ainsi, pour configurer un nouveau projet Next.js avec Turbopack, exécutez la commande create-next-app avec un indicateur « with-turbopack » :
npx create-next-app --example with-turbopack
Il démarrera une nouvelle application Next.js pour vous et votre fichier package.json devrait ressembler à celui ci-dessous :
Pour l’utiliser dans une application Next.js existante, ajoutez le --turbo indicateur à votre commande de script.
{
"scripts": {
"dev": "next dev --turbo"
}
}
Vite
Vite, avec plus de 61,7 000 étoiles GitHub, est l’un des outils de création d’interface les plus rapides et les plus populaires, en particulier grâce à Rollup, le bundler derrière la vitesse de Vite. À mesure que la taille de votre fichier JavaScript augmente, votre système de build a tendance à ralentir, ce qui peut être frustrant et limitant, même avec le remplacement à chaud du module (HMR). Vite utilise une approche unique qui combine des modules ES natifs avec un système de modules virtuels pour accélérer le démarrage et le temps de construction.
Lorsque vous importez un module, Vite le gère comme un module virtuel. Pendant le développement, il ne regroupe pas tout votre code dans un seul fichier. Au lieu de cela, il génère des builds à la demande pour chaque module et les sert dans des fichiers séparés. Cette approche élimine le besoin d’un processus de regroupement complet à chaque fois que vous effectuez une modification, et conduit à des rechargements plus rapides et, bien sûr, à un développeur satisfait. 😃
Utiliser Vite comme bundler
Vite facilite grandement le regroupement de votre projet pour le déploiement en production. Tout ce que vous avez à faire est d’exécuter le vite build commande et un répertoire de build sera généré avec la version de production. Les exécutions ultérieures de la même commande mettront à jour le build annuaire.
Pour créer une application React avec Vite, exécutez la commande ci-dessous :
npm create vite@latest
Lorsque vous exécutez la commande ci-dessus, elle vous guidera tout au long du processus de création d’un projet React standard avec Vite préconfiguré pour vous. Le résultat devrait ressembler à la capture d’écran ci-dessous :
Maintenant que nous avons généré le code passe-partout, ouvrez le package.json fichier dans le répertoire du projet, vous remarquerez que le script de construction a été configuré pour s’exécuter vite build comme indiqué ci-dessous:
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
Le bundler Vite reprend à partir de là et crée une version de production dans le ./dist répertoire lorsque vous exécutez npm run build sur votre terminal :
Étant donné que Vite utilise Rollup pour le regroupement, il vous permet d’utiliser directement les options de configuration de Rollup pour contrôler la construction dans le vite.config.js fichier comme indiqué ci-dessous :
export default defineConfig({
build: {
rollupOptions: {
},
},
})
Chignon
Chignon est une boîte à outils de développement logiciel open source tout-en-un construite avec le langage de programmation Zig et prétend être ultra rapide.
L’une des fonctionnalités tout-en-un de Bun est un bundler, c’est-à-dire un outil de construction qui peut être utilisé pour créer des projets JavaScript/TypeScript.
Bien que la vitesse soit l’une des principales raisons pour lesquelles les développeurs aiment Bun, le fait qu’elle vous permette d’effectuer plusieurs tâches et de réduire le nombre d’outils dont vous avez besoin pour apprendre ou utiliser constitue un gros avantage. Vous pouvez choisir d’utiliser Bun comme moteur d’exécution, bundler, transpileur ou exécuteur de test.
Utiliser le chignon
Pour commencer à utiliser Bun, exécutez l’une de ces commandes :
curl -fsSL https://bun.sh/install | bash
Ou ceci si vous préférez npm :
npm install -g bun
Regroupement
Vous pouvez utiliser Bun pour regrouper votre application React en vue du déploiement en exécutant la commande ci-dessous :
bun build ./src/main.tsx --outdir ./build
Vous obtiendrez le résultat affiché dans la capture d’écran ci-dessous :
La commande ci-dessus regroupera et transpilera tous vos fichiers TypeScript et créera une version qui fonctionne dans tous les principaux navigateurs.
Conclusion
Au cours de ce guide, nous avons découvert certains des outils de création React populaires. Cependant, le choix d’un outil de construction dépend des exigences de votre projet.
Comme nous l’avons vu, tous les outils de build ne sont pas créés de la même manière. Ils diffèrent par leurs capacités : alors que certains vous permettent de transpiler du code TypeScript en JavaScript et de regrouper l’ensemble du projet, certains se concentrent uniquement sur l’optimisation et le regroupement. Un thème commun est qu’ils parlent tous de vitesse. Recherchez ce qui est le plus important pour votre projet et laissez-le guider votre choix.
Par exemple, un auteur de bibliothèque préférera probablement Rollup à Vite, car Vite est davantage un outil de construction au niveau de l’application, tandis que Rollup pourrait répondre aux deux. Cependant, un développeur cherchant à créer une application choisira très probablement Vite ou Bun plutôt que Rollup, car Vite est livré avec de nombreuses batteries, ce qui facilite la création d’une application.
Avant de prendre votre décision finale sur l’outil à utiliser, assurez-vous de consulter la documentation de l’outil de construction et assurez-vous qu’elle correspond à ce que vous avez l’intention d’en faire.
Bon codage ! 👩🏽💻
Source link