Parcel est mon constructeur de projet préféré

Aujourd'hui, nous allons parler des constructeurs de projets (bundlers), des outils qui facilitent la vie des développeurs. L'essence du travail des bundlers est qu'ils prennent le code JavaScript contenu dans de nombreux fichiers et le regroupent dans un ou plusieurs fichiers, en les commandant et en les préparant au travail dans les navigateurs d'une certaine manière. De plus, grâce à divers plug-ins (plug-ins) et chargeurs, le code peut être réduit, et d'autres ressources (telles que des fichiers CSS et des images) peuvent être packagées, en plus du code. Les bundlers vous permettent d'utiliser des préprocesseurs; ils peuvent diviser le code en fragments qui se chargent lorsqu'ils deviennent nécessaires. Mais leurs capacités ne se limitent pas à cela. En fait, nous parlons du fait qu'ils aident à organiser le processus de développement.



Il existe de nombreux bundlers. Par exemple - Browserify et webpack . Bien que ces constructeurs de projets soient d'excellents outils, je les ai personnellement trouvés difficiles à mettre en place. Par où commencer la configuration? Cette question est particulièrement pertinente pour les débutants, pour ceux qui peuvent être un peu effrayés par une chose telle qu'un «fichier de configuration».

C’est pourquoi j’utilise généralement le générateur de projet Parcel . Je suis tombé sur ce bundle par accident lorsque j'ai regardé une vidéo de formation sur YouTube. Il y avait des conseils pour accélérer le développement. L'environnement de travail montré dans cette vidéo était fortement lié à Parcel. Après cela, j'ai décidé d'essayer ce bundle.

Caractéristiques du colis

Ce que j'aime le plus de Parcel, c'est qu'il ne nécessite aucune configuration. C'est vrai: vous n'avez pas besoin de le configurer. À cet égard, Parcel surpasse le webpack , où les paramètres peuvent être dispersés sur plusieurs fichiers et représenter des «feuilles» de code entières. Le développeur, en configurant webpack, a peut-être pris quelque chose dans les fichiers de configuration d'autres programmeurs. Il est possible que les paramètres soient simplement copiés entièrement à partir d'autres projets. Il est clair que la complexité de la configuration dépend du développeur, mais même lors de la configuration du webpack pour un petit projet, vous devez utiliser un certain ensemble de plug-ins et installer certaines options.

C'est pourquoi l'utilisation de Parcel me semble un coup d'État. Par exemple, si un développeur prévoit de styliser son projet en utilisant SCSS ou LESS, il peut, sans mouvements inutiles, simplement écrire le code approprié. Vous souhaitez utiliser les dernières fonctionnalités JavaScript? Si c'est le cas, vous pouvez, sans penser à quoi que ce soit, écrire du code en utilisant ces fonctionnalités. Besoin d'un serveur pour le développement? Celui qui utilise Parcel dispose d'un tel serveur. En fait, ici, nous avons à peine touché la pointe de l'iceberg des vastes capacités de Parcel.

Parcel permet au programmeur, sans perdre de temps sur quoi que ce soit de secondaire, de simplement prendre et commencer à travailler sur le projet. C'est le principal avantage de l'utiliser comme bundler. Parcel, en outre, traite les fichiers et crée des projets très rapidement, en utilisant les capacités des processeurs multicœurs, tandis que d'autres bundlers, y compris webpack, effectuant des transformations de code plus lentes et plus complexes fonctionnent plus lentement.

Portée d'utilisation du colis

Le colis, comme tout autre outil, n'est pas un outil universel, qui est également bien applicable partout et toujours. Mais il y a des situations dans lesquelles Parcel est particulièrement efficace.

J'ai déjà parlé de la rapidité avec laquelle Parcel vous permet d'entrer dans un projet fonctionnel. Grâce à cela, il est idéal pour travailler dans des délais serrés et pour créer des prototypes. Nous parlons de situations où le temps coûte cher et où l'objectif des développeurs est de créer une application qui fonctionne le plus rapidement possible.

Cela ne signifie pas que Parcel ne convient pas aux applications complexes ou aux projets auxquels participent de grandes équipes de programmeurs. Le colis fonctionne bien dans ces conditions. Cependant, j'ai réalisé que les projets à grande échelle peuvent bénéficier d'un ajustement manuel des flux de travail.

Pour comparer un bundler qui n'a pas besoin de paramètres avec un bundler qui doit être configuré, c'est comment comparer les voitures avec une transmission automatique et manuelle. Parfois, le conducteur peut avoir besoin de contrôler plus de détails, et parfois moins.

Je travaillais sur un site de plusieurs pages, au fond duquel il y avait beaucoup de code JavaScript. Parcel a bien performé dans ce projet. Il m'a donné un serveur, il a compilé Sass en CSS, ajouté des préfixes de fabricants de navigateurs au code, si nécessaire, et autorisé, sans aucun paramètre, à utiliser les commandes d'exportation et d'importation dans les fichiers JavaScript. Tout cela a grandement facilité mon travail sur le projet.

Création d'un site Web simple à l'aide de Parcel

Organisons un essai de parcelle. Cela nous permettra de voir que créer quelque chose avec ce bundle est relativement simple. Voici la page sur laquelle nous allons travailler.


Page du projet pilote

Nous allons créer un site simple qui utilisera Sass et un peu de JavaScript. Nous afficherons des informations sur le jour de la semaine en cours et une image aléatoire téléchargée depuis Unsplash Source sur la page du site.

▍ Structure de base du projet

Le projet, qui devrait utiliser Parcel, n'a pas besoin d'une structure spéciale de fichiers et de dossiers. Il n'a pas besoin d'utiliser un certain cadre. La structure de base du projet consistera en trois fichiers dont les noms parlent d'eux-mêmes. Ce sont index.html , style.scss et index.js . Vous pouvez les créer comme vous le souhaitez. Par exemple, en utilisant la ligne de commande:

 mkdir simple-site cd simple-site touch index.html && touch style.scss && touch index.js 

Ajoutez un petit code de modèle et un balisage au fichier index.html sur lequel les fonctionnalités du projet seront basées:

 <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">  <link rel="stylesheet" href="style.scss">  <title>Parcel Tutorial</title> </head> <body>  <div class="container">    <h1>Today is:</h1>    <span class="today"></span>    <h2><font color="#3AC1EF">and the image of the day:</font></h2>    <img align="center" src="https://source.unsplash.com/random/600x400" alt="unsplash random image"> </div> <script src="index.js"></script> </body> </html> 

Vous avez peut-être remarqué que je télécharge ici la police Web ( Lato ) à partir de Google Fonts. L'utilisation de polices téléchargeables est volontaire. Ici, il convient de prêter attention à la connexion des fichiers CSS et JavaScript, et au code HTML du corps du document, qui fournit un endroit pour la sortie d'informations sur le jour de la semaine, et un endroit pour la sortie d'une image aléatoire à partir d'Unsplash. En fait, sur ce travail sur la structure de base du projet est terminée.

▍Miracle de préparation rapide du colis au travail

Maintenant, avant de passer au style et aux scripts, essayons d'exécuter notre projet à l'aide de Parcel. L'installation de Parcel n'a rien d'inhabituel:

 npm install -g parcel-bundler #  yarn global add parcel-bundler 

Maintenant, initialisez le projet en utilisant npm ou yarn, ce qui conduira à la création du fichier package.json :

 npm init -y #  yarn init -y 

C'est tout! Aucun autre réglage ne doit être effectué. Il ne nous reste plus qu'à dire à Parcel quel fichier est le point d'entrée du projet. Cela permettra au bundler de découvrir ce que son serveur doit donner aux clients.

Dans notre cas, un tel fichier serait index.html :

 parcel index.html 

Après le démarrage réussi du serveur, les éléments suivants s'affichent dans la console:

 Server running at http://localhost:1234 √ Built in 13ms. 

Le serveur Parcel prend en charge un démarrage à chaud. Le bundle reconstruit l'application chaque fois que les modifications apportées aux fichiers de projet sont enregistrées.

Revenons au dossier du projet. Ici, vous pouvez voir les nouveaux dossiers et fichiers créés par le bundler.


Nouveaux dossiers et fichiers créés par le bundler

Nous sommes particulièrement intéressés par le dossier dist . Il contient tout le code compilé, y compris les cartes de code pour CSS et JavaScript.

▍ Poursuite des travaux sur le projet

Passons style.scss fichier style.scss et familiarisons-nous avec la façon dont Parcel traite le code Sass. J'ai créé ici plusieurs variables utilisées pour stocker les couleurs et la largeur du conteneur dans lequel le contenu de la page est placé:

 $container-size: 768px; $bg: #000; $text: #fff; $primary-yellow: #f9f929; 

Maintenant, dans le même fichier, ajoutez des descriptions de style. Ici, vous pouvez créer ce que vous aimez. Par exemple, j'ai fait ceci:

 *, *::after, *::before {  box-sizing: border-box; } body {  background: $bg;  color: $text;  font-family: 'Lato', sans-serif;  margin: 0;  padding: 0; } .container {  margin: 0 auto;  max-width: $container-size;  text-align: center;  h1 {    display: inline-block;    font-size: 36px;  }  span {    color: $primary-yellow;    font-size: 36px;    margin-left: 10px;  } } 

Dès que ce fichier sera enregistré, Parcel se mettra au travail, compilera tout et rechargera la page dans le navigateur. Nous n'avons pas besoin de faire autre chose que d'enregistrer le fichier. Parcel, par défaut, surveille les modifications de fichiers.

Voici à quoi ressemblera la page après le style.


Page stylisée

Il ne reste plus qu'à afficher ici le nom du jour de la semaine en cours. Au cours de la résolution de ce problème, nous utiliserons les équipes d' importation et d' exportation . Cela testera la capacité de Parcel à travailler avec des mécanismes JavaScript modernes.

Créez un fichier today.js et exportez-en une fonction qui retourne, en utilisant un tableau avec les noms des jours de la semaine, le nom du jour courant:

 export function getDay() {  const today = new Date();  const daysArr = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];  return daysArr[today.getDay()]; } 

Notez que la fonction getDay premier jour de la semaine.

Nous avons exporté la fonction getDay partir d' getDay . Passons maintenant au fichier index.js et importons cette fonction à partir du fichier today.js . Cela entraînera le today.js fichier today.js lors de l'assemblage du projet.

 import { getDay } from './today'; 

Parcel, sans paramètres supplémentaires, prend en charge la syntaxe des modules ES6 , nous pouvons donc utiliser les commandes d'importation et d'exportation dans les fichiers JS.

Il ne nous reste plus qu'à sélectionner l'élément <span> correspondant et lui passer la valeur retournée par la fonction getDay . Ajoutez le code suivant à index.html :

 const day = document.querySelector('.today'); day.innerHTML = getDay(); 

Après avoir enregistré le fichier, le projet sera reconstruit, sa page dans le navigateur changera.


Projet terminé

▍Construire un projet de production

Nous avons créé l'application, et maintenant nous voulons la mettre quelque part. Il peut s'agir de notre propre serveur, ou de quelque chose comme Surge ou Now , ce qui rend la publication de projets Web aussi simple que possible. Dans le même temps, nous avons besoin que le code du projet soit compilé et réduit.

Pour mettre le projet sous une forme adaptée à la publication, nous n'avons besoin que d'une seule commande:

 parcel build index.html 

Après avoir exécuté cette commande, la console obtiendra quelque chose de similaire à celui illustré dans la figure suivante.


Montage du projet

Nous avons maintenant à notre disposition les ressources de l'application, prêtes à la déployer en production. Ici, vous pouvez en savoir plus sur la façon dont Parcel collecte les versions de production des projets et trouver des conseils qui amélioreront l'efficacité du travail avec ce bundler.

Résumé

Je l'ai déjà dit plusieurs fois, mais je le répète: le colis est un excellent outil. Il vous permet de collecter des projets, de compiler du code, de donner au serveur de développement un programmeur, de pré-traiter et de post-traiter des ressources, de minimiser le code. Et ses capacités ne se limitent pas à cela. Ici, nous avons examiné probablement un exemple extrêmement simple, mais j'espère qu'il vous a permis de ressentir les capacités de Parcel et a aidé à apprendre à utiliser ce bundler dans vos projets.

Chers lecteurs! Quel bundler utilisez-vous?