Bonsoir à tous et à toutes,

Je sollicite l'aide de ce forum pour m'aider à comprendre une notion qui me dépasse encore un peu.

J'ai fait quelques recherches sur le sujet, mais je n'ai pas encore trouvé de réponses claires pour m'aider a tout comprendre.

En gros cela fait quelques semaines qu’après avoir appris les bases de JavaScript et utilisé depuis plusieurs années Jquery je suis en train de basculer sur VUE JS.

Je pense comprendre les bases de ce Framework (composants, Data binding, etc...), mais j'avoue que je ne comprends pas tout encore a l'import de modules.

Grosso modo, pour ajouter un pakage ou une dépendance j'ai bien compris qu'il faut faire un IMPORT du module et j'ai appliqué a la lettre ce que j'ai pu voir sur certaines vidéos. Malheureusement je ne comprends pas tout ce qui se cache derriere cela. Est ce que vous m'aider à comprendre ce qui se cache derriere cela ?

Concrétement j'essaie d'utiliser le package nommé " vueNotification" et je ne comprends pas ce qui se passe derrière l'instruction

import VueNotification from "@kugatsu/vuenotification";

 Quelqu'un pourrait eclairer ma lanterne svp ?

 De plus j'ai suivi la docu a la lettre mais pourtant je n'arrive pas a faire fonctionner ce package dans le composant que j'ai crée. Aurais je loupé une étape ?

Je vous remercie par avance pour votre réponse.

Ca n'a aucun rapport avec VueJS. C'est probablement des imports via Webpack. Dans les dev JS modernes qui utilisent Node, on utilise souvent Webpack pour, entre autre, faire du découpage de code. Si tu es resté au dev JS front basique sans passer par Node...ça va ptet piquer de devoir voir tout ça, mais c'est une nécessité vu que tu le rencontres maintenant.

En très résumé, c'est ce qu'on utilise quand on ne dev pas comme un gros dégu*ulasse avec des variables globales qui se promènent partout (coucou Jquery, en espérant ton décès prochain, salut!) Tu découpes le code en "packages", qui sont juste des fichiers séparés dans lequel un mot-clef (export) permet de désigner ce qu'on expose. Dans un autre code, le mot-clef import permet d'importer certaines éléments exposés du package pour s'en servir.

https://webpack.js.org/concepts/modules/

A noter que import et export sont des mot-clefs standards depuis la version ES6 de JavaScript, qu'on peut utiliser sans Webpack. Donc c'est peut-être aussi utilisé juste comme ça, je ne connais pas la config de ton projet.

Si tu as un doute sur ce que tu as importé, fais juste un console.log de l'objet importé et tu verras ce que tu as bien/mal fait. Ca aide pas mal, des fois c'est pas toujours clair la manière dont l'auteur du package a organisé son truc.

-
Edité par Genroa 18 juillet 2019 à 12:36:05

Merci pour ces explications très claires je comprends mieux comment tout cela fonctionne.

En effet Jquery est un peu dépassé et je m'en suis apercu en découvrant VUE JS. Néanmoins je ne crache pas dans la soupe il m'a bien dépanné a mes débuts pour faire des applications WEB avec des animations sympa et surtout des appels AJAX ;-)

Autre question du coup, est il possible d'aller chercher un fichier en particulier dans un module si on spécifie son chemin relatif ?

Genre par exemple si j'ai besoin du fichier "blabla.js" issu du module "bidule", je peux écrire : import blabla from 'bidule/blabla.js" ?

J'imagine que Webpack sait par défaut qu'il faut aller chercher dans "node_modules" par défaut non ?

Merci pour ton astuce avec le console log je vais aller tester ca.

Pour Ajax (faire des appels HTTP synchrones ou asynchrones), l'API fetch est un standard qui la remplace totalement en plus simple, ne nécessite pas Jquery, et est présente depuis plusieurs années. Souvent c'est uniquement par ignorance que les gens se tournent automatiquement vers Ajax, rarement par nécessité. :/

Pour le fichier dans un module, c'est peut-être possible mais je n'ai jamais vu de cas où c'était nécessaire. C'est vraiment un système similaire aux packages Java, aux include C/C++, etc. Si tu veux le rendre accessible à l'extérieur tu le rends accessible, ce qui ne l'est pas ne l'est pas. En général on n'importe pas "un fichier" (ou alors pour exécuter/mettre en place des choses globales nécessaires plus tard, mais c'est assez rare et rarement bon signe quand on le fait soi-même), on importe des fonctions, classes, variables depuis un module.

Oui pour Webpack et node_modules, en théorie tu n'ajoutes pas un package à la main, tu utilises npm bien sûr. Si tu parles de choses que tu as écrites toi-même, import export suffisent pour ça, pas besoin de package. Les packages sont des bouts réutilisables partageables, si tu veux juste découper proprement ton code ils ne sont pas forcément utiles. Pour le reste Webpack trouvera le package installé.

J'ai bien fait de poser la question j'apprends des trucs ;-)

Depuis que j'ai appris les bases de vue JS j'ai surtout appris a utiliser AXIOS qui est ultra simple a utiliser et a comprendre.

Oui c'est exact je suis bien passé par NPM pour installer le package que j'évoquais.

Par contre ma difficulté était de comprendre le mécanisme qui se passait derrière la consigne IMPORT, grace à toi j'y vois plus clair maintenant.

Car tous les créateurs de packages npm ont fait des documentations plus ou moins bien réalisées en fonction des créateurs et je me sentais complètement démuni devant la consigne IMPORT si jamais je n'arrive pas a faire fonctionner un package en particulier. 

Merci encore pour m'avoir aidé avec tes explications