Bien build avec parcel

Introduction

Ce post peut et pourra vous servir lorsque vous souhaiterez publier votre site en ligne avec Parcel (StarterKit eikon).

C'est un petit tutoriel avec les étapes nécessaires pour bien configurer vos pages, liens etc. avant le "build".

Disclaimer : Ce post est surement incomplet ou mal exécuté par moment, alors il est fortement conseillé de faire vos propres recherches et si vous rencontrer des problèmes n'hésitez pas à demander à ChatGPT.

---

Mise en place

Avant de commencer, il nous faut préparer le terrain en installant et vérifiant quelques fichiers.

Étape 1: Installation

Pour la suite nous aurons besoin d'un plugin de parcel, il peut s'installer via le terminal en entrant cette commande :

npm install --save-dev parcel-plugin-static-files-copy

Normalement, si vous vous ouvrez votre fichier 'package.json' et vérifiez que dans la section 'devDependencies' la ligne "parcel-plugin-static-files-copy": "^2.6.0", s'est ajoutée. Ma version du plugin est surement différente mais ça ne devrait pas vous empèchez de poursuivre ce tuto.

Étape 2: Adapter le 'package.json'

Le plugin que nous venons d'ajouter va permettre à notre site de gérer beaucoup plus facilement les liens entre ses pages et de les simplifier.

Nous allons d'abord ajouter à notre fichier 'package.json' quelques lignes pour lui permettre de comprendre ce qu'on souhaite faire.

A la fin de votre fichier juste avant la dernière parenthèse ajouter ceci:

"staticFiles": {
    "staticPath": "./src",
    "outputPath": "./dist"
  },

Ça devrait ressembler à ceci:

{
  // le reste du code
  },
  "staticFiles": {
    "staticPath": "./src",
    "outputPath": "./dist"
  },
}

Cette règle va permettre à Parcel de diriger convenablement les fichier vers le './dist'

Puis l'on ajoute juste en dessous cette règle:

"parcel": {
    "transformers": {
      "*.{html,css,js}": [
        "@parcel/transformer-static-files-copy",
        "@parcel/transformer-html"
      ],
      "*": [
        "@parcel/transformer-raw"
      ]
    }
  }

Ici nous allons indiquer que dorénavant, parcel utilisera 'transformers' de façon légèrement différente, car il peut désormais interpreter des liens simplifier.

Votre fichier devrais ressembler à ceci:

{
  // le reste du code
  "staticFiles": {
    "staticPath": "./src",
    "outputPath": "./dist"
  },
  "parcel": {
    "transformers": {
      "*.{html,css,js}": [
        "@parcel/transformer-static-files-copy",
        "@parcel/transformer-html"
      ],
      "*": [
        "@parcel/transformer-raw"
      ]
    }
  }
}

Étape 3: Adapter le HTML

Maintenant que notre fichier de règles est prêt, nous pouvons nous attaquer au HTML.

Rien de plus simple, à chaque mentions d'une page dans un <a></a> nous allons supprimer l'extension .html.

Avant :

<header>
  <a href="about.html">À propos</a>
</header>

Après :

<header>
  <a href="about">À propos</a>
</header>

Normalement grâce à nos changements dans les règles, les liens sont maintenus et continuent de fonctionner convenablement.

Si vous possédez un lien qui redirige vers votre index.html nous allons un peu plus le modifier, car voir dans la barre de lien un site se terminant par .../index ne fait pas très pro.

Nous allons juste remplacer l'adresse index.html par ./ de la sorte, nous indiquons à parcel qu'il faut retourner à la racine de notre site et le reste est fait par le navigateur, qui lui va directement prendre le fichier index.html, l'afficher et ne rien ajouter dans la barre de lien.

Comme ceci:

<header>
  <a href="./">Home</a>
</header>

Étape 4: Vérifier

Si vous avez bien suivi chaque étape, vous êtes en mesure de pouvoir lancer la commande npm run dev et constater que l'adresse ne possède plus aucune terminaison de fichier.

Bien joué!

Si le build ne s'est pas fait correctement, verifier chaque étape si nécessaires réinstaller le plugin et si cela ne fonctionne toujours pas, demander à ChatGPT.

---

Voilà voilà normalement maintenant votre site est prêt à être publié comme un pro!