Npm et ses packages

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par tabouet, 9 Août 2021.

  1. tabouet
    tabouet WRInaute discret
    Inscrit:
    2 Octobre 2008
    Messages:
    174
    J'aime reçus:
    1
    Bonjour à tous,

    J'utilise diverses librairies JS pour mes divers projets de sites web (par exemple Fancybox ou jQuery). Avant, je téléchargeais un zip sur différents sites, je décompressais en local, et je faisais des liens vers les fichiers JS et CSS avec des <link> et des <script>. Seulement, quand il faut mettre à jour, c'est long et fastidieux, surtout si on en utilise plusieurs. Il y a quelques semaines, je suis passé à npm. J'ai plus ou moins compris comment on peut installer la librairie, mais je sèche un peu avec la façon d'intégrer les librairies dans mes pages web. J'utilise des codes qui ressemblent à ça :
    HTML:
    <script type="text/javascript" src="/node_modules/machin/machin.min.js"></script>
    <link rel="stylesheet" href="/node_modules/truc/css/truc.min.css">

    Ça fonctionne parfaitement, mais je me dis qu'il existe sûrement une méthode plus propre qui serait liée à npmjs.
    J'ai parcouru quelques tutos, mais pour être honnête avec vous, je n'ai pas trop compris.

    Quelqu'un pour me donner une piste ou un avis ?
    Merci beaucoup.
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 180
    J'aime reçus:
    330
    Il ne faut surtout pas mettre node_modules dans le webroot, certains modules viennent avec des scripts divers (shell, PHP, etc...).
    D'ailleurs il ne faut carrément pas uploader node_modules sur ton serveur, ça doit rester en local, les modules sont comme son nom l'indique pour node.js.

    Tu dois passer par un "module bundler", les plus connus sont Webpack, Rollup, Parcel.
    Perso j'utilise Webpack.

    https://blog.logrocket.com/benchmarking-bundlers-2020-rollup-parcel-webpack/

    Pour la petite blague :
    [​IMG]
     
  3. tabouet
    tabouet WRInaute discret
    Inscrit:
    2 Octobre 2008
    Messages:
    174
    J'aime reçus:
    1
    Merci beaucoup pour la réponse.

    Quand j'ai vu qu'il y avait dans les dossiers tout un tas de fichier que je n'utilisais pas, je me suis bien douté qu'au niveau de la sécurité ce ne serait pas ce qu'il y a de plus optimisé, mais au fond de moi, je ne voulais pas y croire, npm est tellement pratique pour installer les librairies dont j'ai besoin.

    J'ai passé une partie de l'après-midi sur la documentation de Webpack, mais je suis un peu perdu, ça me semble être un poil compliqué et j'ai l'impression que ça dépasse mes compétences. Surtout que j'utilise npm sans avoir jeté le moindre coup d'œil à nodejs (je sais... ça fait sûrement de moi un développeur web boulet, mais j'assume complétement.). Je ne suis assez un pro de JS pour utiliser tout ça et à moins de trouver une autre solution, je pense que je vais reprendre ma vieille méthode : téléchargement des zips et installation à la main.
     
  4. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 180
    J'aime reçus:
    330
    Prend la peine de suivre le tuto de Webpack, ça s'est vraiment bien simplifié. Et ensuite le temps "perdu" tu vas le regagner très rapidement comparé au téléchargement mano.
     
  5. tabouet
    tabouet WRInaute discret
    Inscrit:
    2 Octobre 2008
    Messages:
    174
    J'aime reçus:
    1
    C'est justement ce que j'ai commencé hier et repris ce matin, mais d'abord je ne comprends pas ce que je fais, et surtout j'ai l'impression que je suis en train de sortir une arme atomique alors que juste besoin de me débarrasser d'un moustique. Et je n'ose même pas imaginer le moment où je vais devoir intégrer mon script PHP de 800 lignes à tout ça.

    Dans tous les cas, merci d'avoir essayé de m'aider.