Parcel, un webpack plus simple

Parcel est un bundler d'applications Web. C'est dans la même catégorie d'outils du webpack, avec une proposition de valeur différente. Parcel promet de faire beaucoup de choses sans aucune configuration, et d'être rapide aussi.

Parcel est un bundler d'applications Web.

C'est dans la même catégorie d'outils queWebpack, avec une proposition de valeur différente.

Son ensemble de fonctionnalités principales comprend

regroupement d'actifs (JS, CSS, HTML, images)
zéro fractionnement du code de configuration
transformation automatique en utilisantBabel,PostCSSet PostHTML
remplacement du module à chaud
mise en cache et traitement parallèle pour des builds plus rapides

Parcel promet de faire tout cela sans aucune configuration et d'être rapide aussi.

Installation

Le colis est installé à l'aide deFil:

yarn global add parcel-bundler

ounpm:

npm install -g parcel-bundler

Commencer le colis

Le colis peut être démarré en utilisant

parcel watch index.html

il commencera à rechercher des ressources à partir de la source de la page HTML et remplacera toutes les références traitées par un fichier de sortie.

Vous pouvez également pointer Parcel vers un fichier JS à la place:

parcel watch entry.js

Serveur de développement

Parcel est livré avec un serveur de développement intégré, vous n'avez donc pas à en configurer un. Vous pouvez le démarrer avec:

parcel index.html

Bundle prêt pour la production

Lorsque vous êtes satisfait de votre application et que vous souhaitez créer un ensemble prêt pour la production, exécutez

parcel build index.html

Un bundle de production désactive le remplacement de module à chaud et ne surveille pas vos modifications, il existe une fois le regroupement terminé et utilise un minifier.

Il déclenche également automatiquement leNODE_ENVvariable àproduction, pour que les bibliothèques génèrent le code de production (par exemple, React etVueutiliser cette convention)

Actifs

JavaScript

Le colis prend en charge les deuxModules ES(import...) etCommonJS(require...).

Il effectueFractionnement automatique du code à l'aide d'importations dynamiques.

Qu'est-ce que cela signifie et pourquoi est-ce utile?

Une importation dynamique renvoie unpromesse, et au lieu de charger toutes les dépendances au démarrage de l'application, nous pouvons demander au navigateur de les charger, mais n'exécute que certaines parties de l'application lorsqu'elles sont prêtes.

Ou, nous pouvons demander au navigateur de les charger uniquement lorsque nous en avons besoin, par exemple lorsque l'utilisateur clique sur un lien particulier.

Voirfractionnement de codepour plus de détails.

CSS

Parcel prend en charge les CSS simples, Sass, Less et Stylus.

Vous pouvez écrire votre CSS en utilisantModules CSS.

Se transforme

Lorsque Parcel trouve que vous avez une configuration pour l'un des

Babel (.babelrc)
PostCSS (.postcssrc)
PostHTML (.posthtmlrc)

il l'utilisera automatiquement dans son processus de regroupement.

Remplacement du module à chaud

Le remplacement de module à chaud (HMR) est une fonctionnalité utile lors de la création d'une application. Lorsque nous sauvegardons une nouvelle copie de CSS ou JavaScript, HMR se charge de mettre à jour le module dans le navigateur, sans rafraîchir l'ensemble de l'application.

C'est cool surtout si votre application a beaucoup d'états que vous devez déclencher pour tester une fonctionnalité spécifique (par exemple «allez dans les paramètres, cliquez sur ceci, tapez cela…»).

Colis vs Webpack

Comparons Parcel au webpack, car c'est si populaire et vous en avez probablement entendu parler ou l'avez utilisé dans un projet. Il est également agréable de connaître les différences même si vous n'en avez jamais utilisé aucune.

webpack vous permet de faire des tonnes de choses, et bien que ce soit très cool, cela signifie également que nous devons le configurer soigneusement pour faire exactement ce que nous voulons.

Parfois lewebpack.config.jsLe fichier pousse à des centaines de lignes, et nous le copions / collons dans le projet suivant, et c'est pénible si nous devons le modifier.

Parcel nous promet de faire beaucoup de ce que Webpack fait, maissans aucune configuration du tout, reposant surconventions sur la configuration.

webpack 4, principalement en réponse au succès de Parcel, a introduit un mode de configuration zéro, avec quelques conventions, plutôt que de toujours nécessiter une configuration.

Alors que webpack ades milliers de plugins, Colis aquelques, mais ils ne sont pas annoncés sur le site, signe que les développeurs de Parcel veulent que nous évitions d'utiliser des plugins jusqu'à ce que nous ne puissions pas vraiment les éviter parce que nous ne pouvons pas nous adapter aux conventions de Parcel, ou pour faire en sorte que Parcel prenne en charge quelque chose qu'il ne sort pas de la boîte.

Lequel devriez-vous utiliser?Je recommanderais Parcel pour les petits projets et Webpack lorsque vous sortez de ses capacités et que vous voulez un contrôle absolu sur tout ce que fait votre bundler de modules.