npm : Dans un même répertoire de projet initialement en dev, lancer npm install --production va-t-il désinstaller les packages devDependencies ?

Salut !

Actuellement je suis en train de travailler sur mon site perso Laravel 8 fourni avec Laravel Mix et donc Webpack.

Comme je suis en dev, je lance des npm install <package> qui permet d’écrire les modules Node.JS dans le répertoire node_modules de mon répertoire Laravel, quand ils sont renseignés dans le tableau devDependencies et dependencies du package.JSON de Laravel. A noter qu’apparemment, comme Webpack est utilisé, toutes les dépendances sont renseignées dans devDependencies. Pour compiler les assets, dont ces packages Node.JS, je lance le script suivant : npm run dev, fourni par Laravel Mix. La conséquence c’est que le fichier public/app.js contient donc les scripts des packages de devDependencies si je ne m’abuse, non-minimifiés.

Quand je passerai tout ça en prod, je compte :

1. Minimifier les assets : le fichier public/app.js contiendra donc les scripts minifiés des packages non-devDependencies mais uniquement dependencies

2. Et bien sûr faire en sorte que le répertoire de Laravel node_modules ne contienne que les packages renseignés dans le tableau dependencies et non ðevDependencies de package.JSON… c’est-à-dire aucun.

Ainsi dans l’idée il me faudrait lancer npm install --production (https://stackoverflow.com/questions/9268259/how-do-you-prevent-install-of-devdependencies-npm-modules-for-node-js-package) puis npm run prod pour minimifier.

Je voudrais savoir si des gens étaient eux aussi arrivés à ce workflow pour déployer leur site Laravel, dans le cas où j’aurais oublié ou mal compris au moins un truc. Notamment le fait que Webpack et Laravel Mix soient utilisés par Laravel ne pourraient-ils pas impacter ce workflow, en sus du script prod que Laravel Mix fournit à disposition de npm dans laravel 8 ?

Je vous remercie d’avance ! Et vous souhaite une bonne fin de journée.

PS : sur certains sites, certains semblent dire qu’à cause de l’utilisation de Webpack, il n’y aurait pas besoin de renseigner quoi que ce soit dans dependencies dans packages.JSON mais bien uniquement dans devDependencies… Oui mais pourtant lorsqu’on veut déployer un truc en prod, on ne veut justement PAS que les dépendences de développements soient installés et/ou minimifiées, n’est-ce pas ? (respectivement npm install (--production) et npm run prod(/dev).

PS 2 : je dois préciser une chose assez importante. N’ayant pas accès au terminal de mon hébergeur Web, je dois envoyer le site par SFTP directement avec les assets des dépendances de prods minimifiées.

Merci beaucoup @viki53 pour ta réponse  ! je vais compléter ça avec qlq recherches et essais.

L’idée est de préparer le terrain pour ma future mise en prod de la nouvelle version de mon site Laravel

Merci encore et bonne soirée à toi,

Edit : du coup pour l’instant je ne mets pas le topic en résolu et je reviendrai ici pour dire si ça marche ou pas

@viki54

après ça dépend. Typiquement voici ce que j’ai dans devDependencies :

    "devDependencies": {
        "autoprefixer": "^10.2.6",
        "axios": "^0.19",
        "browser-sync": "^2.26.14",
        "browser-sync-webpack-plugin": "^2.3.0",
        "cross-env": "^7.0.3",
        "laravel-mix": "^6.0.19",
        "less": "^3.13.1",
        "less-loader": "^7.3.0",
        "lodash": "^4.17.21",
        "resolve-url-loader": "^3.1.3",
        "vue-template-compiler": "^2.6.14"
    }

Ici on a beaucoup de dépendances qui ne servent pas à du front mais bien uniquement à faciliter le dev (browser-sync & cie, laravel-mix et même less).

Et quand je fais mon npm install bein ça les fout dans mon node_modules, du coup ça me "pourrit" ce répertoire pour quand je ferai le déploiement en prod vu que ça ne sera pas utilisé. A noter que browser-sync installe même un cookie dans le navigateur, c’est pas RGPD, et ça ne sert qu’au développement, donc vraiment : je n’en veux pas trop en prod (bon en réalité ce cookie n’est pas installé si je lance le script npm run prod qui compile les assets et les minimifie - je ne sais pas comment ça se fait mais ça m’arrange bien du coup).

Du coup si je comprends bien, selon toi :

1. Je devrais lancer un npm ci pour réinitialiser le répertoire node_modules

2. Ensuite je lance un npm install --production pour installer uniquement les dépendances non-dev (aucune actuellement car dependencies n’existe pas)

3. Enfin, je lance npm run prod pour compiler et surtout minimifier le JS, CSS etc.

C’est bien ça ?

Après y a quand même un petit truc que je ne comprends. Pourquoi Laravel n’est pas fourni avec au moins quelques dépendances dependencies (prod donc) ? Sur Internet ils disent que c’est parce que Webpack est utilisé (inclus dans Laravel Mix). Mais je ne vois pas le lien… A moins que ce soit cette raison ? :

L’usage de Laravel et différent puisque npm est utilisé uniquement pour construire les fichiers front : tu n’as donc pas vraiment besoin de séparer dev/prod puisqu’en prod tu as surtout besoin de déployer tes builds ou bundles, pas forcément d’utiliser des dépendances sur le serveur.

npm ci supprime le dossier et installe les dépendances comme npm install. Je t’invite à lire la doc pour plus d’infos.

Si tu veux juste nettoyer les dépendances qui auraient été installées mais ne servent pas/plus, tu peux utiliser npm prune.

Pour Laravel les dépendances qui n’ont pas à être sur le serveur de prod sont des devDependencies, c’est globalement assez simple : ton front est généralement construit/packagé en amont (via un process de CI/CD ou en local) donc tu n’en as plus besoin en prod.

Donc à moins que tu veuilles construire ton front sur ton serveur de prod ou que tu aies un front spécifique qui a besoin d’exposer des dépendances (par exemple si tu charges des modules JS natifs externes)… pas besoin des dependencies de prod.

Hello !

Je reviens ici avec des infos équivalentes et complémentaires à celles de @viki53.

Il s’avère que :

• npm install avec ou sans l’option --production référence quelque part (je ne sais pas où) les packages NPM et place leurs fichiers au sein du répertoire node_modules. Ces commandes trouvent les packages à installer dans devDependencies et dependencies.

• Dans une application Node.JS, les dépendances dependencies s’exécutent au runtime de l’utilisateur final ; les dépendances devDependencies, uniquement durant la phase de développement de l’appli.

• Dans une application Laravel avec Laravel-Mix (inclus dans Webpack), Laravel-Mix s’occupe de compiler les assets (fichiers images, JS, CSS, HTML avec les packages NPM). Cette compilation a lieu avec npm run dev et npm run prod. Les packages NPM utilisés pour la compilation sont ceux référencés et existant dans node_modules (il y a une totale indépendance entre npm run dev/prod et devDependencies/dependencies, ces dernières n’influencent donc pas la compilation au moment de l’exécution des commandes de compilation npm run dev/prod). C’est dans le cadre de cette compilation que sont utilisés les packages NPM et uniquement dans ce cadre. En d’autres termes : après que la compilation a été faite (que ce soit par npm run dev/prod), les packages NPM ne seront plus jamais utilisés, notamment au niveau du runtime de l’utilisateur final. C’est d’ailleurs pourquoi les dépendances à renseigner doivent l’être uniquement dans devDependencies (en d’autres termes : dependencies est à laisser vide) (contrairement à une application Node.JS). On pourra donc supprimer le répertoire node_modules en prod (vu qu’on ne va compiler - minimification comprise - qu’une seule fois et donc que les packages de node_modules auront déjà été utilisés pour cette compilation) (rappel : aucun package de node_modules ne sera utilisé au runtime utilisateur, qu’il soit à l’origine installé depuis de devDependencies ou dependencies).

En conséquence, la procédure à suivre pour un déploiement est :

• Renseigner les devDependencies (et laisser vides les dependencies)

• npm install

• Faire le dev

• Compiler les assets : les dépendances dans node_modules et référencées seront utilisées par la compilation : npm run dev

• Continuer le dev

• Compiler les assets et minimifier (les dépendances dans node_modules et référencées seront utilisées par la compilation) : npm run prod

• Supprimer le répertoire node_modules, qui ne sert plus à rien

• Déployer sur le serveur de prod