Une introduction au bundler Esbuild

ESBUILD: Créez rapidement des outils, dites au revoir à la redondance de WebPack!

Esbuild est un outil d'emballage haute performance qui peut rapidement optimiser le code JavaScript, TypeScript, JSX et CSS. Cet article vous guidera rapidement dans Esbuild et montrera comment créer votre propre système de construction sans dépendances supplémentaires.

Points de base:

• Esbuild Efficacité: Esbuild est beaucoup plus rapide que les outils traditionnels tels que WebPack ou Rollup, et peut gérer efficacement JavaScript, TypeScript, JSX et CSS.
• Avantages de l'emballage: L'utilisation du package Esbuild peut améliorer les performances car elle prend en charge la partage d'arborescence, la vérification de la syntaxe et crée une sortie de fichier unique, ce qui accélère le chargement et simplifie la maintenance.
• Caractéristiques de développement: Esbuild prend en charge les serveurs de développement locaux et possède une fonction de rechargement chaud, et peut être développé sans rafraîchissement manuel.
• Flexibilité de configuration: Fournit deux méthodes de configuration: CLI et API, qui peuvent être intégrées dans divers environnements de développement et flux de travail.
• Limitations et notes: Bien que l'esbuild soit puissant, il est toujours au stade bêta et manque de fonctionnalités, telles que la vérification des types de typeScript, et d'autres outils sont nécessaires pour effectuer ces tâches.
• Application pratique: Cet article fournit un exemple de projet réel qui montre comment configurer et utiliser efficacement Esbuild pour créer des environnements de développement et de production.

Comment fonctionne Esbuild:

Des cadres comme

Vite ont adopté Esbuild, mais vous pouvez également utiliser Esbuild comme outil autonome dans vos propres projets.

• ESBUILD Packages JavaScript Code dans un seul fichier de la même manière aux outils d'emballage tels que Rollup. Il s'agit de la principale caractéristique d'Esbuild, qui analyse les modules, rapporte les problèmes de syntaxe, la "partage d'arborescence" supprime les fonctions inutilisées, supprime les journaux et les instructions de débogueur, comprime le code et fournit des mappages source.
• ESBUILD Packages CSS Code en un seul fichier. Il ne remplace pas complètement les préprocesseurs comme SASS ou POSTCSS, mais Esbuild peut gérer le code partiel, les problèmes de syntaxe, la nidification, le codage des ressources en ligne, la cartographie source, le préfixe automatique et la compression. Cela peut être suffisant .
• Esbuild fournit également un serveur de développement local avec un emballage automatique et un rechargement chaud, il n'y a donc pas besoin de rafraîchissement manuel. Il n'a pas toutes les fonctionnalités que Browsersync propose, mais cela suffit pour la plupart des cas.

Le code suivant vous aidera à comprendre le concept d'esbuild afin que vous puissiez étudier davantage les opportunités de configuration de votre projet.

Pourquoi l'emballer?

Il y a plusieurs avantages à emballer le code dans un seul fichier:

• peut développer des fichiers source plus petits et plus indépendants et être plus facile à maintenir.
• La vérification du style de code, le formatage de code et la vérification de la syntaxe peuvent être effectuées pendant l'emballage.
• L'outil d'emballage peut supprimer les fonctions inutilisées - appelée shaking arbre .
• Vous pouvez emballer différentes versions du même code et créer des cibles pour les navigateurs plus anciens, Node.js, Deno, etc.
• Le fichier unique se charge plus rapidement que plusieurs fichiers, et le navigateur n'a pas besoin de prise en charge du module ES.
• L'emballage au niveau de la production peut améliorer les performances en compressant le code et en supprimant les journaux et en débogage des instructions.

Pourquoi utiliser Esbuild?

Contrairement aux outils d'emballage JavaScript, Esbuild est un fichier exécutable GO compilé qui implémente beaucoup de traitement parallèle. C'est rapide, cent fois plus rapide que Rollup, Parcel ou WebPack. Il économise plusieurs semaines de temps de développement pendant le cycle de vie du projet.

De plus, Esbuild fournit également:

• Capacités d'emballage et de compilation JavaScript, TypeScript, JSX et CSS.
• Ligne de commande, JavaScript et API de configuration GO.
• prend en charge le module ES et CommonJS.
• Server de développement local avec mode de surveillance et rechargement en temps réel.
• Plugins pour ajouter plus de fonctionnalités.
• Documentation complète et outils expérimentaux en ligne.

Pourquoi éviter d'utiliser Esbuild?

Au moment de l'écriture, Esbuild a atteint la version 0.18. C'est fiable, mais c'est toujours un produit bêta.

Esbuild est mis à jour fréquemment et les options peuvent changer entre différentes versions. La documentation vous recommande de vous en tenir à des versions spécifiques. Vous pouvez le mettre à jour, mais vous devrez peut-être migrer le fichier de configuration et creuser dans la nouvelle documentation pour découvrir les modifications majeures.

Notez également que Esbuild n'effectue pas de vérification de type TypeScript, vous devez donc courir tsc -noEmit.

Démarrage super rapide:

Si nécessaire, créez un nouveau projet Node.js en utilisant npm init et installez Esbuild localement comme dépendance de développement:

<code class="language-bash">npm install esbuild --save-dev --save-exact</code>

L'installation prend environ 9 Mo. Vérifiez si cela fonctionne en exécutant la commande suivante pour afficher la version installée:

<code class="language-bash">./node_modules/.bin/esbuild --version</code>

ou exécutez la commande suivante pour afficher l'aide CLI:

<code class="language-bash">./node_modules/.bin/esbuild --help</code>

Utilisez l'API CLI pour emballer le script d'entrée (MyApp.js) et tous ses modules importés dans un seul fichier nommé bundle.js. Esbuild sortira le fichier en utilisant le format par défaut, orienté vers le navigateur, Instant Call Fonction Expression (iife):

<code class="language-bash">./node_modules/.bin/esbuild myapp.js --bundle --outfile=bundle.js</code>

Si vous n'utilisez pas Node.js, vous pouvez installer Esbuild d'une autre manière.

Exemple de projet:

Télécharger des exemples de fichiers et une configuration d'esbuild à partir de github. Il s'agit d'un projet Node.js, alors installez une seule dépendance Esbuild en utilisant la commande suivante:

<code class="language-bash">npm install</code>

Créez le fichier source dans SRC dans le répertoire de construction et démarrez le serveur de développement avec la commande suivante:

<code class="language-bash">npm start</code>

Maintenant, accédez à LocalHost: 8000 dans votre navigateur pour afficher la page Web qui affiche l'horloge en direct. Lorsque vous mettez à jour n'importe quel fichier CSS dans SRC / CSS / ou SRC / CSS / Partials, Esbuild reconditionne le code et recharge les styles en temps réel.

Appuyez sur CTRL | CMD C > Arrêtez le serveur.

Créez une version de production pour le déploiement à l'aide de la commande suivante:

<code class="language-bash">npm install esbuild --save-dev --save-exact</code>

Vérifiez les fichiers CSS et JavaScript dans le répertoire de construction pour voir les versions compressées sans cartes source.

(Un tel contenu, en raison des limites de l'espace, veuillez vous référer au texte d'origine ou le résumer vous-même en fonction du texte d'origine. Ce qui suit est le résumé du sujet de la partie suivante du texte d'origine. Vous pouvez extraire la clé Informations du texte d'origine basées sur ces sujets et faites des pseudo-originaux):

• Présentation du projet (Présentation du projet): Structure du projet et package.json Explication du script.
• Configuration d'Esbuild (Configuration d'Esbuild): esbuild.config.js Explication détaillée du fichier, y compris la cible de l'emballage, l'emballage JavaScript, l'emballage CSS, etc.
• Fichiers d'entrée et de sortie JavaScript (Fichiers d'entrée et de sortie JavaScript): Exemple d'analyse de code, y compris main.js, dom.js, time.js, etc.
• CSS Packaging (CSS Bundling): configuration de l'emballage CSS et analyse de code, y compris main.css, variables.css, elements.css, etc.
• Surveillance, reconstruction et service (regarder, reconstruire et servir): serveur de développement et implémentation de rechargement à chaud.
• Résumé (Résumé): Résumé des avantages et des inconvénients de l'esbuild.
• FAQs (questions fréquemment posées (FAQ) sur Esbuild): FAQs sur Esbuild.

N'oubliez pas que, dans le processus de pseudo-originalité, il est nécessaire d'ajuster la structure de la phrase, de remplacer les synonymes, etc., afin que l'article présente différentes expressions sans modifier la signification d'origine. Assurez-vous de lire attentivement le texte d'origine et d'extraire les informations clés en fonction du résumé du sujet ci-dessus pour la réécriture.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!