Parcel, Module bundler

Voir la vidéo
Junior
Télécharger la vidéo

Parcel est un projet qui est encore tout récent (Décembre 2017) mais qui propose une approche intéressante. L'objectif est de proposer des temps de builds plus rapides et de minimiser la configuration en détectant automatique les outils à utiliser.

Installation

L'installation se fait simplement via npm :

npm init -y
npm i -g parcel-bundler

Une fois installé, parcel n'aura besoin que d'un fichier HTML pour commencer. Ce fichier devra référencer les fichiers sources que vous souhaitez utiliser.

<!DOCTYPE html>
<html>
<head>
  <title>Title</title>
  <link rel="stylesheet" href="./src/app.scss">
</head>
<body>
<div id="app"></div>
<script src="./src/app.js"></script>
</body>
</html>

Parcel va automatiquement détecter les types de fichiers utilisés et va télécharger les dépendances nécessaires à leurs traitements. Vous pourrez lancer le serveur de développement avec la commande :

parcel index.html

ou compiler les fichiers "en production" via la commande

parcel build index.html

Outils supplémentaires

Par défaut, parcel ne convertira pas votre code en ES5. Il va falloir pour cela utiliser babel :

npm install -D babel-preset-env

Et ensuite écrire le fichier de configuration .babelrc propre à babel

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

Et c'est tout ! Parcel va détecter la présence d'un fichier de configuration et "devinera" qu'il doit utiliser babel. De la même manière, Parcel peut détecter les fichiers de configuration pour d'autres outils comme postcss par exemple.

Publié
Technologies utilisées
Parcel
Auteur :
Grafikart
Partager