Technologies Web

VueJS : POI et boilerplate, la puissance de webpack et d’un projet bien rangé

Introduction

Afin de commencer son projet, il est bien d’en avoir un de structuré et de pouvoir l’initialiser/compiler facilement aux vues des choses à faire avant que son application soit utilisable sur les navigateurs.

Comme je vous l’ai indiqué et comme vous avez pu le voir, VueJS est codé en ES6. Hors, la plupart des navigateurs ne gèrent pas encore cette norme en totalité. Pour palier à ce problème, nous devons au préalable le transpiler pour que le code soit en ES5, et, selon ce que l’on utilise, rajouter automatiquement les polyfills pour les navigateurs trop anciens.

De plus, il se peut que certaines règles CSS que vous utilisez ne soient pas compatibles avec d’anciens navigateurs (par exemple les flexbox) et/ou qu’en plus, vos feuilles de style soient codées en LESS ou SASS. Dans ce cas il va falloir le compiler en CSS et passer par postCSS pour rendre votre design compatible avec d’anciens navigateurs.

Heureusement, pour faire tout ceci, il existe différents outils comme Webpack ou encore Browserify. Je vous conseille surtout Webpack qui est bien plus complet et rapide que Browserify. Par contre, aux vues de tout ce qu’il y a à configurer, je ne vous conseillerai que trop vous rabattre sur un outil tout en un simplifiant cette partie parmi ceux-ci :

  • NuxtJS : Donne une structure de base de son projet et utilise Webpack pour la partie compilation. La particularité de Nuxt réside dans le fait qu’il permet de réaliser facilement des composants qui peuvent être rendus soit par le navigateur, soit par le serveur. La partie configuration de webpack se limite à un fichier de configuration simple. Pour initialiser le projet, il faut passer par l’outil Vue-cli.
  • POI : Donne une structure de base de son projet et utilise Webpack pour la partie compilation. La particularité de POI est de ne nécessiter aucune dépendance pour votre projet en ce qui concerne VueJS, webpack, … De base il prend la version la plus récente correspondant à la version de POI utilisée. La partie configuration de webpack se limite à un fichier de configuration simple. Pour initialiser le projet, il faut passer par l’outil create-vue-app.

Il existe d’autres outils disponibles au sein de templates Vue-cli. Les deux plus connus et simples d’accès en terme de configuration restent ceux que je viens de vous présenter au moment d’écrire cet article.

J’ai choisi d’utiliser POI pour initialiser mon projet car je me sers de cet outil dans mon travail, et, aux vues de ce que nous allons faire, nous n’allons pas utiliser les particularités de NuxtJS pour le moment. Je ferai peut être un article sur NuxtJS dans le futur.

Initialisation de notre projet

Pour initialiser le projet, vous devrez tout d’abord installer create-vue-app sur votre ordinateur en package global :

npm i -g create-vue-app

Ensuite vous n’avez qu’à dire à SAO de créer votre projet POI de la manière suivante :

create-vue-app monprojet

Ceci va créer votre projet dans le répertoire monprojet à partir de votre répertoire courant. Normalement, vous devriez obtenir une suite de questions pour initialiser votre projet. Voici ce que j’ai mis :

Pour finir, vous n’avez qu’à vous rendre dans votre projet et à partir de là, deux commandes sont disponibles pour vous :

  • npm run dev : Permet de lancer le projet en mode dev et créer un serveur temporaire sur le port 4000 par défaut afin de tester l’application.
  • npm run build : Lance la compilation finale du projet pour distribution et utilisation finale en production.

Si vous avez un problème avec la library POI, sachez que son mainteneur @egoist répond assez vite sur les issues gitHub. Si vous voulez, il a aussi un channel Discord disponible ici.

Structure du projet

De base, le projet que vous avez est composé comme ceci :

Comme vous pouvez le voir, nous avons des fichiers principaux à la racine du projet. Ceux qui nous intéressent sont les suivants :

  • index.ejs : Fichier servant à la génération de votre index.html final. Si vous voulez rajouter des metadata, ou d’autres choses, c’est ici qu’il faut le faire.
  • poi.config.js : Fichier de configuration propre à POI. Nous reviendrons plus tard sur cette partie.
  • public : Dossier contenant toutes les ressources publiques de notre projet. Ce dossier contiendra surtout tout ce qui est images, polices d’écritures ou bien des SVG.
  • src : Voici le cœur du métier de votre application. Nous allons y regarder de plus près juste en dessous.

La partie SRC ne donne que les répertoires et fichiers de base pour commencer un nouveau projet avec POI. Néanmoins, je vais vous lister tous les dossiers/fichiers que j’ai pour un projet Vue bien structuré :

  • components : Dossier contenant tous vos composants VueJS
  • libs : Dossier contenant toutes les libraries internes de votre projets
  • mixins : Dossier des mixins de VueJS. Les mixins permettent de facilement importer des méthodes à vos vues VueJS.
  • pages : Dossier contenant les pages VueJS appelées par le vue-router. Nous aborderons cette partie dans l’un des prochains articles.
  • store : Dossier de déclaration de notre store Vuex ainsi que de ses différents modules
  • stylesheets : Dossier contenant nos feuilles de styles CSS/SASS/LESS
  • index.js : Point d’entrée de notre application
  • router.js : Fichier de configuration des différentes routes de Vue-Router
  • polyfills.js : Polyfills utilisés pour notre application afin de rendre certaines parties compatibles avec d’anciens navigateurs
  • pwa.js : Gestion des applications en mode offline (généré par create-vue-app si vous sélectionnez l’options Progress Web App support)

Voilà, maintenant vous savez comment structurer convenablement un projet VueJS. Avant de finir cet article, nous allons tester en réel notre projet via la commande npm run dev qui devrait vous donner ceci :

Maintenant rendez-vous sur le lien donné dans le résultat de la commande (il est automatiquement copié dans votre presse papier) pour voir la page s’afficher.

Si vous essayez de modifier un fichier, votre navigateur mettra automatiquement à jour ce qui est affiché à l’écran (il existe quelques exceptions à ceci que je vous indiquerai au moment importun).

La prochaine fois nous verrons comment créer nos prochains composants pour modifier la page de base.