Librairies FrontEnd / NPM / WebPack

jeanMat
Javascript NodeJS

Bonjour à tous,

Quelques choses m'echappe avec l'utilisation de NPM pour certaines librairies.

De ce que j'avais compris, pour moi, NPM servait à gérer les dépendances pour des projets NodeJS coté serveur donc.
Je ne comprenais pas pourquoi on pouvait trouver des librairies orientées front, comme Jquery ou des DatePicker par exemple. A moins bien sur de mettre le dossier "node_modules" dans un dossier public pour ensuite inclure les librairies avec des balises "script" et "link" (ce que je ne trouve pas très propre personnellement).

Avec l'arrivé d'outils tels que Browserify ou WebPack (que j'ai découvert grace à notre professeur commun Grafikart), il est maintenant possible de "compiler" des fichiers JS et CSS en important directement des librairies que l'on installe via NPM. C'est plutôt pratique et cela permet de gérer correctement nos dépendances et d'avoir un fichier JS et un fichier CSS compilés pret à l'emploi coté front.

Ce que je ne comprend pas, en revanche, c'est de trouver sur www.npmjs.com des librairies, orientées front, pas du tout prévues pour être importées dans des projets WebPack. Exemple avec PNotify (c'est un système de notification). Même dans la doc, ils nous expliquent qu'il faut appeller les scripts directement dans le DOM.

Quel est l'intéret de mettre ce genre de librairies installables avec NPM si finalement on ne peut pas les "require" ?
Peut être que quelque chose m'échappe ou que je n'ai pas bien compris le fonctionnement de WebPack.

Si quelqu'un peut m'éclairer ou me renseigner ce serait cool.

Merci à vous.

1 réponse

jeanMat
Auteur
Réponse acceptée

Bon, j'ai trouvé une solution pour importer ce type de librairies

Dans le webpack.config.js :

module: {
        rules: [
            {
                test: /pnotify/i,
                loader: 'raw-loader'
            }

            ...

Dans mon script js

var PNotify = require('pnotify');