Une introduction à Parcel.js, le bundler d’applications Web sans configuration

Une introduction à Parcel.js, le bundler d’applications Web sans configuration

Une introduction à Parcel.js, le bundler d’applications Web sans configuration
СОДЕРЖАНИЕ
02 июня 2020

Ce message est votre introduction à Parcel.js, l’auto-proclamé "bundle d’applications web ultra-rapide et sans configuration." Voici tout ce que vous devez savoir pour commencer:


De nombreux développeurs front-end sont devenus frustrés par certaines des complexités liées à la création d’applications Web aujourd’hui. Il est assez courant d’inclure une sorte d’outil de génération ou de regroupement dans un flux de travail frontal, de nombreux développeurs ont donc envisagé d’utiliser un outil frontal comme webpack.

Webpack est le bundler le plus populaire et il a suivi les traces de Require.js, Rollup et des solutions similaires. Mais la courbe d’apprentissage d’un outil comme le webpack est abrupte. Débuter avec webpack n’est pas facile en raison de ses configurations complexes. En conséquence, ces dernières années, une autre solution a émergé. Cet outil n’est pas nécessairement un front-runner, mais une alternative plus facile à digérer dans le paysage du bundler de modules front-end. Présentation de Parcel.js.

Introduction à Parcel.js

Parcel.js (parceljs.org) est exactement ce que veulent de nombreux développeurs débutants à intermédiaires: un bundle simple, à faible configuration, avec lequel vous pouvez être rapidement opérationnel.

J’espère que ce tutoriel Parcel fournira une introduction facile à suivre à cet outil. Je vais couvrir les bases, puis je vais vous montrer comment utiliser Parcel pour regrouper une application Web simple qui intègre Babel et Sass.

�� Table des matières:

  1. Pourquoi utiliser un bundle d’application web? #
  2. Installation de Parcel.js #
  3. Création d’un point d’entrée de fichier #
  4. Le dossier dist / #
  5. Utilisation de Parcel.js avec Babel #
  6. Utilisation de Parcel.js avec Sass #
  7. Regroupement de plusieurs scripts avec Parcel #
  8. Fractionnement de code avec Parcel.js #
  9. La production se construit avec Parcel.js #
  10. Avez-vous des inconvénients à utiliser Parcel? #

Site Web Parcel.js

Pourquoi utiliser un bundle d’application web?

Je ne passerai pas trop de temps à discuter des raisons d’utiliser un bundle d’applications comme Parcel.js, car ce sujet a certainement été traité auparavant. Mais voici un aperçu de base des avantages de l’utilisation d’un tel outil:

  • Votre application aura moins de requêtes HTTP en raison de la combinaison de scripts ou de feuilles de style
  • Les scripts et les feuilles de style peuvent être chargés à la demande, améliorant encore les performances
  • Les scripts et les feuilles de style peuvent être automatiquement réduits pour fournir moins de kilo-octets à l’utilisateur
  • Les travaux de regroupement et de minification sont effectués automatiquement par l’outil, minimisant le travail manuel
  • Les fichiers de développement sont organisés de manière modulaire, ce qui facilite grandement la maintenance et le débogage de votre code

Comme vous pouvez le voir, les avantages sont nombreux et principalement liés aux performances et à la maintenance du projet. Il y a certainement beaucoup de raisons d’utiliser un bundler, si c’est quelque chose que vous n’avez pas encore envisagé.

Avec cela à l’écart, commençons par les bases pour être opérationnel avec Parcel.js. Je vais lentement passer en revue les fonctionnalités de ce didacticiel en utilisant des exemples simples que vous pourrez facilement suivre.

Installation de Parcel.js

Vous pouvez installer Parcel.js dans votre terminal en utilisant Yarn ou npm. Pour ce didacticiel, j’utiliserai npm. Voici la commande pour l’installer globalement afin de pouvoir l’utiliser sur n’importe quel projet:

npm install parcel-bundler -g

L’indicateur -g l’installe globalement. Si vous ne souhaitez l’installer que pour un seul projet et l’ajouter aux devDependencies de votre projet dans package.json, vous pouvez exécuter la même commande dans le dossier racine du projet en utilisant l’indicateur –save-dev au lieu de -g:

npm install parcel-bundler –save-dev

Avec l’installation globale (qui sera le cas d’utilisation le plus courant), vous pouvez lancer un projet donné à l’aide de la commande init. Utilisez le terminal pour accéder au dossier que vous souhaitez utiliser comme racine de votre application et exécutez:

npm init -y

L’indicateur -y empêche npm de poser des questions, en utilisant les valeurs par défaut pour la configuration. En supposant que mon projet s’appelle parcel-demo, cela crée un fichier package.json à la racine qui ressemble à ceci:

{
"Nom": "démo colis",
"version": "1.0.0",
"la description": "",
"principale": "index.js",
"scripts": {
"tester": "écho \"Erreur: aucun test spécifié \" && sortie 1"
},
"mots clés": [],
"auteur": "",
"Licence": "ISC"
}

Si vous trouvez l’un des éléments ci-dessus déroutant en raison de votre manque de familiarité avec npm, vous pouvez consulter mon tutoriel sur npm. Il vise à aider les développeurs Web frontaux à comprendre l’outil.

Création d’un point d’entrée de fichier

Pour une configuration de projet de base, je vais utiliser Parcel.js sur un fichier index.html qui pointe vers un fichier JavaScript principal appelé index.js (comme indiqué dans le fichier package.json). Ce fichier HTML servira de point d’entrée à mon colis. Mon fichier HTML aura un élément de script qui pointe vers mon fichier JavaScript, il ressemblera donc à ceci:

html>
<html>
<tête>
<Titre>Parcel Demotitle>
tête>
<corps>
<script src ="./js/index.js">scénario>
corps>
html>

Une fois que j’ai le bon fichier HTML et le bon fichier JavaScript en place, je peux démarrer le serveur de développement intégré de Parcel en exécutant ce qui suit dans mon terminal dans le dossier de mon projet:

parcel index.html

Cela démarre le serveur et lui indique le fichier à utiliser comme point d’entrée. Par conséquent, je reçois le message suivant dans ma session de terminal:

Serveur fonctionnant sur http: // localhost: 1234
√ Construit en 887ms.

Je peux maintenant ouvrir http: // localhost: 1234 / dans mon navigateur pour voir ce que j’ai construit jusqu’à présent. Le serveur en direct utilise le rechargement en direct et quelque chose appelé remplacement de module à chaud. Cela mettra automatiquement à jour les modules sur une page sans effectuer une actualisation complète de la page. De cette façon, je peux voir la progression de ma construction par incréments plus rapides, pendant que je travaille.

Une fois que Parcel.js est exécuté avec son serveur actif, toutes les modifications que j’apporte à un fichier reconstruisent automatiquement mon application à chaque fois que le fichier est enregistré. Pour voir cela en action, je vais ajouter une simple ligne de journal de console dans mon script. Cela déclenchera le message suivant dans mon terminal:

$ parcel index.html
Serveur fonctionnant sur http: // localhost: 1234
√ Construit en 1.08s.
√ Construit en 28 ms.

Chaque ligne «Built…» représente une génération, déclenchée par un changement de contenu et une sauvegarde.

Si je veux utiliser mon propre serveur, plutôt que le serveur de développement intégré de Parcel, je peux utiliser la commande watch:

parcel watch index.html

J’obtiens le même résultat dans ma session de terminal, avec Parcel.js qui construit mon application puis attend les modifications:

$ parcel watch index.html
√ Construit en 855 ms.

Le dossier dist /

Une fois que j’ai démarré Parcel.js en mode veille ou via le serveur intégré, si je regarde dans le dossier de mon projet, je vois une structure de dossiers et de fichiers comme celle-ci:

index.html
package.json
js /
└───── index.js
dist /
└───── index.html
└───── js.00a46daa.js
└───── js.00a46daa.js.map

Remarquez le dossier dist qui est créé automatiquement. C’est là que se trouvent mes fichiers de production; Je ne touche à aucun de ces fichiers. Notez que ma version Parcel a automatiquement converti mon fichier index.js en un fichier avec une version unique compatible avec le cache (avec un nom de fichier révisé ou «revved»). Il a également ajouté un fichier de carte source (vous pouvez en savoir plus sur les cartes source dans ce post).

Si je regarde dans mon fichier index.html à l’intérieur du dossier dist, je vois ce qui suit:

html>
<html>
<tête>
<Titre>Parcel Demotitle>
tête>
<corps>

<script src ="/js.00a46daa.js">scénario>
corps>
html>

Notez que la version dist de mon fichier index.html pointe correctement et commodément vers la version dist de mon fichier .js.

Si mon site Web comprend plusieurs fichiers qui pointent vers les mêmes scripts (par exemple, about.html, contact.html, etc.), je peux utiliser la commande suivante:

parcelle index.html about.html contact.html

Cela indique à Parcel que je souhaite utiliser plusieurs points d’entrée pour construire à partir de. Je peux également utiliser la commande suivante pour dire à Parcel.js d’utiliser tous mes fichiers HTML comme points d’entrée:

colis * .html

Utiliser Parcel.js avec Babel

Parcel.js a un support intégré pour différents transpilers de code, y compris Babel, l’outil populaire pour convertir le JavaScript moderne de nouvelle génération en code équivalent qui peut être compris par tous les navigateurs. Parce que Babel est intégré à Parcel.js, vous n’avez pas besoin d’un plug-in spécial pour l’utiliser, cela fonctionne. Regardons un exemple.

Je vais ajouter le code suivant à mon fichier index.js:

fonction getInfo (nom, année = 2018, couleur = ‘bleu’) {
console.log (nom, année, couleur);
}

getInfo («Chevy», 1957, «Green»);
getInfo («Benz», 1975);
getInfo («Honda»);

Ce code utilise une fonctionnalité ES6 appelée paramètres par défaut, que vous pouvez voir spécifiquement dans la tête de fonction. Les navigateurs plus anciens ne prennent pas en charge les paramètres par défaut des fonctions. Pour m’assurer que le code ne génère pas d’erreur, j’ai besoin que Babel transpile le code en un code équivalent qui fonctionne dans tous les navigateurs. Une fois que j’ai enregistré mon fichier index.js, Parcel.js reconstruira mon application et produira ce qui suit à la place du code ES6 que j’ai écrit:

fonction getInfo (nom) {
var année = arguments.longueur > 1 && arguments [1]! == indéfini? arguments [1]: 2018;
var color = arguments.length > 2 && arguments [2]! == indéfini? arguments [2]: ‘bleu’;
console.log (nom, année, couleur);
}

getInfo («Chevy», 1957, «Green»);
getInfo («Benz», 1975);
getInfo («Honda»);

Vous pouvez utiliser la réponse en ligne de Babel pour tester cela.

Et remarquez le facteur le plus important ici: je n’ai rien fait pour installer ou configurer Babel – cela fonctionne juste prêt à l’emploi dans le cadre de la configuration par défaut de Parcel! Bien sûr, vous voudrez peut-être ajouter des options de configuration pour modifier Babel pour faire ce que vous voulez. Si tel est le cas, vous pouvez ajouter un fichier .babelrc dans le dossier racine de votre projet, avec vos préférences de configuration incluses. Vous pouvez en savoir plus sur à l’aide d’un fichier .babelrc sur le site Parcel.js.

Utilisation de Parcel.js avec Sass

Semblable à Babel, Parcel compilera également par défaut automatiquement mes fichiers SCSS (Sass) en CSS valide. Pour illustrer cela, je vais ajouter un dossier appelé “css” à la racine de mon exemple de projet. Dans ce dossier, j’ajouterai un fichier style.scss avec le code Sass suivant:

corps {
la couleur noire;

.module {
La couleur rouge;
}
}

J’utilise la fonction d’imbrication du sélecteur de Sass. J’ajouterai la ligne suivante à la section de mes fichiers HTML:

<lien rel ="feuille de style" href ="./css/style.scss">

Une fois que tous mes fichiers sont enregistrés, Parcel produira une nouvelle construction dans mon dossier dist / avec un fichier CSS compilé qui a converti mon SCSS comme suit:

corps {
la couleur noire;
}
body .module {
La couleur rouge;
}

Tant que Sass est installé sur mon système dans le monde, Parcel le fera automatiquement, sans configuration requise. Si je n’ai pas d’installation globale de Sass, pas de problème. Je peux simplement écrire mon SCSS, puis démarrer Parcel et Parcel installera Sass automatiquement en tant que dépendance spécifique au projet. Très pratique! Et encore une fois, cela est particulièrement utile car il ne nécessite aucune configuration.

Et tout comme avec Babel, je peux choisir de choisir les options de configuration par défaut fournies avec Sass. Ou je peux créer un fichier .sassrc à la racine de mon projet et ajouter mes propres configurations.

Regrouper plusieurs scripts avec Parcel

Jusqu’à présent, les exemples que je vous ai montrés ne servent qu’à vous familiariser avec Parcel, afin que vous puissiez avoir une idée de base de son fonctionnement. Comme mentionné précédemment, la puissance de tout bundler est la possibilité de combiner automatiquement plusieurs fichiers en un seul fichier. Cela permet de réduire les demandes HTTP et d’améliorer la vitesse de votre site Web ou application.

Tout ce que j’ai démontré jusqu’à présent peut être fait à l’aide de plusieurs scripts extraits à l’aide de la fonctionnalité de module d’ES6. Cela me permet de créer et d’importer des scripts de manière modulaire. Cela maintient mon code facile à maintenir tout en ne servant qu’un seul script groupé en production.

Pour illustrer cela, je vais ajouter un fichier distinct appelé module.js qui contiendra le code JavaScript suivant:

exporter let color = ‘green’;

fonction d’exportation ajouter (n1, n2) {
retour n1 + n2;
}

Ce n’est qu’un code de base pour exporter deux objets: une variable et une fonction. Dans mon fichier index.js, je vais importer ces ressources avec le code suivant:

importer {color, add} depuis ‘../js/module.js’;

console.log (couleur); // "vert"
console.log (ajouter (20, 40)); // 60

Encore une fois, ce n’est que la syntaxe du module ES6 de base. Je n’entrerai pas dans les détails sur la façon dont cela fonctionne ici. La belle partie à ce sujet est le fait que je n’avais pas besoin de spécifier dans mon fichier HTML que j’utilisais un module. Normalement, ma balise de script ressemblera à ceci, avec l’attribut type défini sur module:

<script src ="./js/index.js" type ="module">scénario>

Mais ce n’est pas nécessaire. Parcel reconnaît le module importé et regroupe mes deux scripts dans une seule ressource conviviale pour les performances. Cela se produit sans configuration ou plugins spéciaux. Et tout comme les exemples précédents, le code est transposé en utilisant Babel en un code équivalent à ES5 qui me donnera le plus de support de navigateur.

Fractionnement de code avec Parcel.js

Une autre fonctionnalité de Parcel qui fonctionne sans aucune configuration est fractionnement de code. Dans certains cas, je veux que tous mes modules soient chargés sur toutes mes pages. Mais dans d’autres cas, il se peut que je veuille seulement charger certains modules sur certaines pages, dans certains contextes. C’est ce que le fractionnement de code me permet de faire.

Plus tôt, j’ai mentionné que mon exemple de projet comprend trois pages: index.html, about.html et contact.html. Supposons que je souhaite exécuter le même ensemble JavaScript sur les trois pages, mais sur la page about.html, j’ai un bouton qui déclenche quelque chose de spécifique. Mais je veux seulement que ce code se charge lorsque ce bouton est enfoncé.

Voici à quoi pourrait ressembler ce code en utilisant la fonction de fractionnement de code:

if (document.querySelector (‘. about’)) {
document.querySelector (‘. about’). addEventListener (‘click’, () => {
import (‘../ js / about.js’). puis (
document.body.innerHTML + = ‘À propos de la page mise à jour’;
);
});
}

Notez que cela incorpore une nouvelle fonctionnalité JavaScript, importations dynamiques en utilisant la fonction import (). Cela me permet de charger dynamiquement le code que je veux dans une instance spécifique. Dans ce cas, je le fais lorsqu’un bouton est enfoncé sur la page à propos. La fonction import () renvoie une promesse, donc je peux faire tout ce que je veux dans la clause .then (), qui se déclenche une fois le script importé chargé. Le script about.js est chargé à la demande et ce code sera transposé par Babel vers le navigateur croisé ES5, pour s’assurer qu’il fonctionne partout. Lorsque mon bundle est créé, la partie about.js est placée dans son propre fichier à l’intérieur du dossier dist /, pour permettre à ce fichier d’être chargé à la demande.

Comme les autres fonctionnalités dont j’ai parlé, la fonction import () fonctionne dans Parcel sans aucune configuration.

La production se construit avec Parcel.js

Jusqu’à présent, j’ai produit toutes mes versions de colis à la volée à l’aide du serveur intégré fourni avec Parcel et qui inclut le rechargement en direct. Chaque fois que j’enregistre mon projet, mon bundle est construit. Mais le code était toujours fourni pour un développement continu. De cette façon, je peux afficher ou inspecter la source selon les besoins pour effectuer un débogage.

Une fois mon projet terminé et prêt à être poussé vers un serveur en direct, je peux empêcher Parcel de regarder mon projet. CTRL-C dans le terminal le fait sur de nombreuses plates-formes. Ensuite, j’exécuterai la commande suivante pour dire à Parcel de produire une version finale:

parcel build index.html about.html contact.html

Dans ce cas, je crée à partir de mes trois fichiers d’entrée. Une fois cela fait, Parcel n’attend plus de modifications; le paquet final est construit et c’est tout. En plus de la finalisation de la construction, mon code est préparé pour la production par Parcel. Le HTML, CSS et JavaScript sont tous minifiés pour produire les plus petits fichiers possibles pour des performances optimisées.

Tout inconvénient de l’utilisation de Parcel?

Le colis devrait certainement être le choix de choix pour ceux qui ont peu ou pas d’expérience avec les outils de construction. Mais dans mes propres recherches, j’ai trouvé quelques choses que je peux mentionner qui devraient être améliorées à l’avenir.

Tout d’abord, vous remarquerez que Parcel place toujours vos scripts et feuilles de style groupés dans le même répertoire que les fichiers HTML du point d’entrée. Cela se produit même si vous avez vos fichiers CSS et JavaScript dans des dossiers séparés. Comme il s’agit de fichiers de production, cela peut ne pas avoir beaucoup d’importance. Mais c’est quelque chose à garder à l’esprit. La bonne nouvelle est la suivante semble avoir été corrigé dans la prochaine version de Parcel 2 (toujours en Alpha). Il devrait donc y avoir un moyen de remplacer ce comportement lorsque cette version de Parcel est stable (la version stable actuelle est 1.12.4).

Un autre inconvénient est que j’ai trouvé que la documentation de Parcel est assez minime en ce qui concerne les informations sur la personnalisation des options de configuration pour les différentes fonctionnalités. Il est vrai que l’un des énormes avantages de Parcel est son bon fonctionnement, prêt à l’emploi. Mais je pense qu’une documentation plus complète sur la personnalisation serait utile. Par exemple, comment désactiver la minification HTML sur mes builds, tout en conservant la minification CSS et JavaScript? Je ne vois pas de description de cela dans les documents. Quand j’ai regardé les problèmes fermés sur GitHub, il y a une solution de contournement (pensé que ce n’est pas très pratique).

Conclusion

Une dernière chose que je mentionnerai est un outil appelé Créer une appli, que vous pouvez utiliser pour produire automatiquement des fichiers de configuration pour Parcel. Il vous permet de sélectionner votre bibliothèque JavaScript, transpiler, linter, etc., et tous seront ajoutés à votre fichier package.json, prêts à être initialisés.

Créer une application dans Parcel.js

C’est tout pour ce didacticiel Parcel pour les débutants. J’espère que vous pourrez utiliser ces informations pour être rapidement opérationnel avec Parcel et l’utiliser sur de futurs projets. Et si vous êtes nouveau dans le regroupement d’applications, ou si vous ne l’avez jamais essayé sur aucun projet, cette introduction vous inspirera peut-être pour essayer Parcel.

N’oubliez pas de rejoindre notre cours accéléré sur l’accélération de votre site WordPress. Avec quelques correctifs simples, vous pouvez réduire votre temps de chargement de 50 à 80%:

Mise en page et présentation par Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector