Différence entre Grunt, NPM et Bower (package.json vs bower.json)

612

Je suis novice dans l'utilisation de npm et de bower, en créant ma première application dans emberjs :).
J'ai un peu d'expérience avec les rails, donc je connais bien l'idée des fichiers pour lister les dépendances (comme le bundle Gemfile)

Question: quand je veux ajouter un paquet (et archiver la dépendance dans git), où appartient-il - dans package.jsonou dans bower.json?

D'après ce que je comprends , l'
exécution bower installrécupérera le paquet et le placera dans le /vendorrépertoire, l'
exécutera npm installle récupérera et le mettra dans le /node_modulesrépertoire.

Cette réponse SO dit que bower est pour le front-end et que npm est pour le backend.
Ember-app-kit semble adhérer à cette distinction dès le premier coup d'œil ... Mais les instructions dans gruntfile pour activer certaines fonctionnalités donnent deux commandes explicites, donc je suis totalement confus ici.

Intuitivement, je suppose que

npm install --save-dev nom-package équivaudrait à ajouter le nom-package à mon package.json
bower install --save package-name peut être la même chose que d'ajouter le package à mon bower.json et d'exécuter bower install ?

Si tel est le cas, quand devrais-je jamais installer des packages explicitement comme ça sans les ajouter au fichier qui gère les dépendances (à part installer les outils de ligne de commande globalement)?

javascript gruntjs bower

— apprenticeDev
source

doublon possible de la différence entre Bower et NPM?

— Sindre Sorhus

@SindreSorhus Ce n'est pas un double exact. Il y a aussi une question supplémentaire associée à ce message. BTW Cela vous dérange d'expliquer le vote négatif?

— sachinjain024

Avez-vous changé la réponse acceptée? Il semble que celui très voté de 2014 raconte quelque chose de tout à fait différent de celui accepté de 2016. Cela explique également pourquoi il suggère une autre approche, donc je suis cool avec ça. Juste un peu surpris qu'il soit accepté (ou ré-accepté).

Oui, j'ai changé la réponse acceptée parce que je pense que la dernière est beaucoup plus pertinente. Je suppose que dans cette jungle frontale, beaucoup de gens sont aussi confus que moi, donc cette question a gagné en popularité bien au-delà de mes attentes ... Et obtient toujours des vues 2 ans plus tard. Grâce à Pawel, il y a maintenant une réponse plus récente à laquelle les gens peuvent se référer (fwiw j'utilise webpack dans mon travail actuel).

— apprenticeDev

Réponses:

154

Mise à jour mi-2016 :

Les choses changent si vite que si c'est fin 2017, cette réponse pourrait ne plus être à jour!

Les débutants peuvent rapidement se perdre dans le choix des outils de construction et des workflows, mais ce qui est le plus à jour en 2016, ce n'est pas du tout d'utiliser Bower, Grunt ou Gulp! Avec l'aide de Webpack, vous pouvez tout faire directement dans NPM!

Résultat Google "npm as build tool": https://medium.com/@dabit3/introduction-to-using-npm-as-a-build-tool-b41076f488b0#.c33e74tsa
Webpack: https://webpack.github.io/docs/installation.html

Ne vous méprenez pas, les gens utilisent d'autres flux de travail et j'utilise toujours GULP dans mon projet hérité (mais en sortant lentement), mais c'est ainsi que cela se fait dans les meilleures entreprises et les développeurs travaillant dans ce flux de travail font beaucoup d'argent!

Regardez ce modèle, c'est une configuration très à jour composée d'un mélange des meilleures et des dernières technologies: https://github.com/coryhouse/react-slingshot

Webpack
NPM comme outil de construction (pas de Gulp, Grunt ou Bower)
Réagissez avec Redux
ESLint
la liste est longue. Allez explorer!

Vos questions:

Quand je veux ajouter un paquet (et vérifier la dépendance dans git), où appartient-il - dans package.json ou dans bower.json

Tout appartient maintenant à package.json
Les dépendances requises pour la construction sont dans "devDependencies" ie npm install require-dir --save-dev(--save-dev met à jour votre package.json en ajoutant une entrée à devDependencies)
Les dépendances requises pour votre application pendant l'exécution sont dans des "dépendances" c'est-à-dire npm install lodash --save(--save met à jour votre package.json en ajoutant une entrée aux dépendances)

Si tel est le cas, quand devrais-je jamais installer des packages explicitement comme ça sans les ajouter au fichier qui gère les dépendances (à part installer les outils de ligne de commande globalement)?

Toujours . Juste à cause du confort. Lorsque vous ajoutez un indicateur ( --save-devou --save), le fichier qui gère deps (package.json) est mis à jour automatiquement. Ne perdez pas de temps en y éditant manuellement les dépendances. Raccourci pour npm install --save-dev package-nameis npm i -D package-nameet raccourci pour npm install --save package-nameisnpm i -S package-name

— Pawel
source

Votre réponse est très réfléchie:> With help of Webpack you can do everything directly in NPM! Ce n'est pas vrai, on n'a même pas besoin de webpack dans son workflow

— Augustin Riedinger

Cette réponse semble faire beaucoup d'hypothèses. La question demande la différence entre npm et bower, et cette réponse mentionne webpack pour une raison quelconque. Oui, webpack est une façon de le faire, mais cette réponse donne l'impression que c'est la seule et bonne façon de le faire. Par exemple, si quelqu'un travaille avec Polymer 1.x, le flux de travail standard utilisera bower et il n'y a pas beaucoup de support pour webpack.

— John Powers

La réponse est en fait pertinente, mais l'argument avancé n'est pas vraiment: "mais c'est comme ça que ça se passe" - eh bien, rien ne devrait être fait simplement parce que c'est censé être fait apparemment (c'est-à-dire qu'il est fait par d'autres). L'argent n'a rien à voir avec le raisonnement du flux de travail.

— forsberg

En regardant cette réponse en 2017. Aller à la documentation: "webpack v1 est obsolète. Nous encourageons tous les développeurs à mettre à niveau vers webpack 2. Suivez notre guide de migration ou consultez la documentation de webpack 2 pour plus d'informations." Développement Web classique Haha.

— user643011

@ user643011 Lorsque vous regardez le guide de migration, vous remarquerez que la plupart des configurations restent les mêmes et les autres ne sont que des changements cosmétiques dans la structure des configurations. J'ai fait la migration en un après-midi, y compris un PR

— Pawel

576

Npm et Bower sont tous deux des outils de gestion des dépendances. Mais la principale différence entre les deux est NPM est utilisé pour l' installation des modules de nœud , mais Bower js est utilisé pour gérer les éléments d'avant comme html, css, js etc .

Un fait qui rend cela plus confus est que npm fournit des packages qui peuvent également être utilisés dans le développement frontal, comme gruntet jshint.

Ces lignes ajoutent plus de sens

Bower, contrairement à npm, peut avoir plusieurs fichiers (par exemple .js, .css, .html, .png, .ttf) qui sont considérés comme les fichiers principaux. Bower considère sémantiquement ces fichiers principaux, lorsqu'ils sont regroupés, comme un composant.

Edit : Grunt est assez différent de Npm et Bower. Grunt est un outil d'exécution de tâches javascript. Vous pouvez faire beaucoup de choses en utilisant grunt que vous deviez faire manuellement sinon. Soulignant certaines des utilisations de Grunt:

Zipper certains fichiers (par exemple un plugin zipup)
Linting sur des fichiers js (jshint)
Compiler moins de fichiers (grunt-contrib-less)

Il existe des plugins grunt pour la compilation sass, uglifiant votre javascript, copiant des fichiers / dossiers, minifiant javascript, etc.

Veuillez noter que le plugin grunt est également un package npm.

Question 1

Quand je veux ajouter un paquet (et vérifier la dépendance dans git), où appartient-il - dans package.json ou dans bower.json

Cela dépend vraiment de l'appartenance de ce paquet. S'il s'agit d'un module de noeud (comme grunt, request), il ira dans package.json sinon dans bower json.

Question 2

Quand dois-je jamais installer des packages comme ça sans les ajouter au fichier qui gère les dépendances

Peu importe que vous installiez explicitement des packages ou mentionniez la dépendance dans le fichier .json. Supposons que vous êtes en train de travailler sur un projet de noeud et que vous ayez besoin d'un autre projet, disons request, alors vous avez deux options:

Modifiez le fichier package.json et ajoutez une dépendance à la «demande»
installation de npm

Utilisez la ligne de commande: npm install --save request

--saveoptions ajoute également la dépendance au fichier package.json. Si vous ne spécifiez pas d' --saveoption, il téléchargera uniquement le package mais le fichier json ne sera pas affecté.

Vous pouvez le faire de toute façon, il n'y aura pas de différence substantielle.

— sachinjain024
source

Merci pour la clarification et pour l'article! Perspicace et clarifie la différence (ce qui devrait aider à décider où mettre les dépendances). J'attendrai si peut-être quelqu'un répondra à la dernière question (re: quand aurais-je envie d'installer des packages individuellement), et accepterai votre réponse plus tard :)

— apprenticeDev

En ce qui concerne npm, il peut s'agir d'un gestionnaire de packages pour les modules NodeJS, mais nous perdons de vue qu'il n'est pas exclusif à NodeJS uniquement. npm est tout aussi efficace pour gérer les dépendances côté client. Ex: dontkry.com/posts/code/using-npm-on-the-client-side.html

— Matt Smith

Que peut faire bower que npm ne peut pas faire?

— Adam Soffer

Notez que le référentiel du plugin jQuery ( plugins.jquery.com ) a été remplacé par npm.

— thdoan

le dernier didacticiel Quickstart angular 2 (RC) et git seed utilise npmuniquement, contrairement au didacticiel v1 qui utilisait à la fois npm et bower. J'aime vraiment, vraiment le fait que (a) package.jsonest la seule chose à maintenir, (b) qu'il calcule les dépendances de manière récursive dans une seule ligne npm install, et (c) quand il y a un problème, il suffit de supprimer le node_modulesdossier et d'exécuter npm install encore.

— Sebas