Mais en voulant mieux découper et intégrer app vue en fonction de mes pages web et en cherchant à garder un scope commun entre vue et le reste de mon javascript cette manière de procéder n'est pas ce qui se fait de mieux. Aussi, ayant entendu parler depuis de nombreuses années de webpack et ayant vu dans la doc de vue l'intégration avec, je me suis dis franchissons le pas d'une pierre deux coups.

D'autant que sur mes premiers développements avec vue j'en suis trés content car il est facile de faire des interfaces web réactives et élégantes tout comme je peux le faire avec Angular mais avec l'avantage que c'est beaucoup plus souple et il y a bien moins de lourdeur, sans parler des problèmes de dépendances (du moins jusqu'à aujourd'hui) ou l'intégration avec webpack c'est révélé pas si simple que cela.

Parmi ces fonctionnalités, il y a le support natif de TypeScript, un langage qui étend JavaScript en y ajoutant des types statiques. TypeScript permet d'écrire du code plus sûr, plus lisible et plus maintenable. J'avais envie d'essayer TypeScript avec Vue 2 et de créer les bundle avec webpack, car je pense que cela peut améliorer la qualité de mes projets. Aussi, je me suis lancer dans cette aventure.

Pour compiler mon code TypeScript + Vue, j'utilise Webpack, un outil qui permet de bundler les fichiers JavaScript, CSS, HTML et autres ressources en un seul fichier optimisé pour le navigateur. Webpack est très populaire et offre de nombreuses possibilités de configuration et de personnalisation.

Tout semblait bien se passer jusqu'à ce que je lance la commande `npm run build` pour compiler mon code. J'ai eu alors des petits soucis mais rien de bien méchant du à mon code sous typescript pas si robuste que je ne l'avais imaginer. Une fois corriger, toute mon javascript "historique" a pu être généré et être fonctionnel sur l'application web. Je fus agréablement surpris que ce soit si simple alors d'intégrer Webpack dans mon process de développement. Je me suis même dis pourquoi je n'ai pas tenté l'opération plutôt, car c'est clairement plus simple que de maintenir gulp et les tâches associées...

Sans compter que je peux retirer requirejs dans la boucle avec cette démarche. Mais alors que j'ai continué mon processus en intégrant cette fois la partie Vue, là ce fut une autre histoire. j'ai rencontré une série d'erreurs qui m'ont empêché de terminer la compilation.

Je n'ai plus la liste de toutes les péripéties, mais je ne parvenais pas à faire fonctionner webpack, l'histoire du loader des composants vue, mon typescript. C'était une catastrophe.... Oui, c'est un peu théatrale, mais d'un truc qui fonctionne quasiment tout droit, à quelque chose ou il est difficile de savoir ce qui pose problème c'est assez frustrant d'autant que sur stackoverflow et consort, pas évident de savoir exactement ce qui pose problème.

La je me suis dis tentons avec ChatGPT. Pas convaincu, car jusqu'à maintenant même si cela facilite bien les recherches "classique" sur ce genre de sujet plus pointu je n'étais pas convaincu qu'il puisse m'aider. Et au final si à ma grande surprise, c'est lui qui m'a évoqué que ce genre d'erreur était lié à des problèmes de compatibilité avec les versions... Comme je suis parti sur vue 2, n'ayant pas vu beaucoup de resources sur la version 3... je ne sais pas encore c'est quoi exactement les différences, mais je sais à présent qu'il y a au moins la manière d'importer les modules...

Ayant déjà des composants adaptés avec la version 2, je n'avais pas envie de tout migrer. Aussi, en suivant ces recommendations pour réaligner les versions j'ai pu m'en sortir. A savoir commencer par réaligner la version de webpack, webcli, et du loader pour que ce soit compatible. 

Toutefois, suite à ce réalignement, j'ai eu bien sur d'autres erreurs comme sur le ts-loader, un loader Webpack qui permet de transpiler le code TypeScript en JavaScript. L'erreur disait que ERESOLVE ne pouvait pas résoudre une dépendance dans mon projet. Après avoir cherché sur Internet, j'ai compris que cela signifiait que npm n'avait pas pu trouver la version correcte de ts-oader sur le registre npm.

Puis, j'ai eu droit à un soucis avec le tsconfig.json, un fichier qui permet de configurer les options du compilateur TypeScript. L'erreur disait que certaines options étaient incompatibles avec ma version de vue. Par exemple, l'option `experimentalDecorators` devait être activée pour utiliser les décorateurs de classe avec Vue 3 et j'avais introduit cela en suivant certaines instructions sur le web. Mais ce n'était pas indiqué que c'était spécifiquement pour la version vue 3... donc impossible pour moi de savoir que cela aboutirait à plus d'erreurs.

Pour finir, j'ai eu droit au vue-loader, un loader Webpack qui permet de compiler les fichiers .vue en JavaScript. L'erreur disait que vue-loader ne reconnaissait pas le langage TypeScript dans les balises `<script>` des fichiers .vue. Il fallait donc ajouter un attribut `lang="ts"` pour indiquer le langage utilisé. Et j'ai eu d'autres joyeusetés de ce genre.

Mais à la fin j'ai pu obtenir un projet qui fonctionnait en utilisant l'aide que ChatGPT m'a fournir en m'aidant à diagnostiquer la source de chaque erreur et les manipulations à faire pour les corriger. De ce fait, je confirme qu'en tant que copilot ce fut une très bonne expérience car sans, je pense que je serai encore à tenter de trouver des solutions aux erreurs que je rencontrais. En ce sens, il m'a fait gagner un temps précieux.