Quels sont les outils de packaging front-end Web ?

Les outils de packaging front-end Web comprennent : 1. Webpack, qui est un outil de gestion modulaire et un outil de packaging qui peut empaqueter et intégrer des fichiers de différents modules, et garantir que les références entre eux sont correctes et que l'exécution est ordonnée ; Grunt, un outil de packaging et de construction front-end ; 3. Gulp, écrit des scripts de packaging en code ; 4. Rollup, outil de packaging modulaire ES6 ; 5. Parcel, un packager d'applications Web extrêmement rapide et sans configuration ; un chargeur de fichiers et de modules JS.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ordinateur Dell G3.

Outil de packaging frontal Web

1 Webpack

Webpack : Il s'agit d'un outil de gestion modulaire et d'un outil de packaging. Vous pouvez empaqueter et intégrer des fichiers de différents modules et vous assurer que les références entre eux sont correctes et que l'exécution est ordonnée. Lorsque webpack traite votre application, il crée en interne un graphique de dépendances, mappe chaque module requis par le projet et génère un ou plusieurs bundles.

Grâce à la conversion du chargeur, toute forme de ressources peut être considérée comme des modules, tels que les modules CommonJs, les modules AMD, les modules ES6, CSS, les images, etc. Il peut regrouper de nombreux modules libres dans des ressources frontales adaptées au déploiement dans un environnement de production en fonction des dépendances et des règles. Vous pouvez également séparer le code des modules chargés à la demande et les charger de manière asynchrone lorsqu'ils sont réellement nécessaires. Il se positionne comme un packager de modules, tandis que Gulp/Grunt est un outil de build. Webpack peut remplacer certaines fonctions de Gulp/Grunt, mais ce n'est pas un outil fonctionnel et peut être utilisé conjointement avec celui-ci.

Webpack prend en charge toutes les options de modules populaires et est devenu synonyme de développement React. Bien que Webpack prétende être un regroupeur de modules, il peut déjà être utilisé comme exécuteur de tâches universel.

2. Grunt

Grunt : L'outil de packaging le plus ancien, il utilise l'idée de configuration pour écrire des scripts de packaging, il y aura donc plus d'éléments de configuration, tels que option, src, dest, etc. . De plus, différents plug-ins peuvent avoir leurs propres champs d'extension, ce qui nécessite des coûts cognitifs élevés. Lors de leur utilisation, vous devez comprendre les règles de configuration des différents plug-ins.

3. Gulp

Gulp : utilisez du code pour écrire des scripts d'empaquetage, et le code est écrit dans un style de flux. Il résume uniquement les interfaces gulp.src, gulp.pipe, gulp.dest, gulp.watch et. l'application est assez simple. Il est plus facile à apprendre et à utiliser, et la quantité de code utilisant gulp peut être réduite d'environ la moitié par rapport à Grunt. (PS : cette introduction est pour gulp3 et n'est pas disponible dans gulp4)

4 Rollup

Rollup : La prochaine génération d'outils modulaires ES6 est l'utilisation de la conception de modules ES6 et du tremblement d'arbre pour générer. Code simple plus simple et plus efficace. De manière générale, utilisez Webpack pour les applications et Rollup pour les bibliothèques de classes ; utilisez Webpack lorsque le fractionnement du code (Code Splitting) est requis, ou lorsque de nombreuses ressources statiques doivent être traitées, ou lorsque le projet construit doit introduire de nombreuses dépendances de module CommonJS. La base de code est basée sur des modules ES6, et je souhaite que le code soit directement utilisable par d'autres, grâce à Rollup.

5. Parcel

Parcel est un "packageur d'applications Web extrêmement rapide et sans configuration". Dans la formation Web front-end, qu'il s'agisse de connaissances théoriques ou d'opérations pratiques de projet, on apprendra les outils de packaging de modules, afin que vous puissiez véritablement apprendre à utiliser les outils front-end.

Parcel a les fonctionnalités suivantes :

• Rapidement

• Regroupe tous les actifs du projet

• Aucun fractionnement de code configuré

6. navigateur

ify prend en charge Node.js dans l'utilisation de CommonJS module qui compile tous les modules dans un seul fichier compatible avec le navigateur. Il est conçu sur la base de l'idée de flux et peut être utilisé via une ligne de commande ou une API. Il ne traite que du processus inverse de la modularisation JavaScript, mais favorise un meilleur développement de la modularisation.

7. RequireJS

RequireJS est un chargeur de fichiers et de modules JavaScript. Il est optimisé pour une utilisation dans le navigateur, mais peut être utilisé dans d'autres environnements JavaScript tels que Rhino et Node. L'utilisation d'un chargeur de script modulaire comme RequireJS améliorera la vitesse et la qualité de votre code.

Maîtriser l'utilisation de ces outils modulaires front-end rendra votre travail plus facile et plus efficace. La modularisation est devenue une compétence essentielle pour les ingénieurs front-end modernes.

(Partage de vidéos d'apprentissage : front-end web)

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!