Différence entre Grunt, NPM et Bower (package.json vs bower.json)
Je commence à utiliser npm et bower pour créer ma première application dans emberjs :).
J'ai une petite expérience de Rails, je connais donc bien l'idée de fichiers pour les dépendances de listage (comme bundler Gemfile).
Question: quand je veux ajouter un paquet (et archiver la dépendance dans git), à quel endroit appartient-il - dans package.json ou dans bower.json?
À partir de ce que je rassemble,
lancer bower install va récupérer le paquet et le mettre dans le répertoire /vendor,
exécutant npm install, il le récupèrera et le placera dans le répertoire /node_modules.
Cette SO réponse indique que bower est destiné à l'interface front-end et npm à des tâches d'arrière-plan.
Ember-app-kit semble adhérer à cette distinction dès le premier regard ... Mais les instructions dans le fichier grunt pour activant certaines fonctionnalités donnent deux commandes explicites, donc je suis totalement confus ici.
Intuitivement je suppose que
npm installer --save-dev nom-paquet équivaudrait à ajouter le nom-paquet à mon paquet.json
bower install --save nom-paquet peut être identique à l'ajout du paquet à mon bower.json et en cours d’exécution bower install ?
Si tel est le cas, quand devrais-je installer explicitement des packages de cette manière sans les ajouter au fichier qui gère les dépendances (hormis l'installation globale d'outils de ligne de commande)?
Mise à jour pour la mi-2016 :
Les choses changent si vite que s'il est fin 2017, cette réponse risque de 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 n’utilise pas du tout Bower, Grunt ou Gulp! Avec 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
Ne vous méprenez pas, les gens utilisent d'autres flux de travail et j'utilise toujours GULP dans mon projet hérité (mais je m'en éloigne lentement), mais c'est ainsi que les meilleures entreprises qui travaillent dans ce flux de travail gagnent BEAUCOUP d'argent!
Regardez ce modèle, il s’agit d’une configuration très récente comprenant un mélange des meilleures technologies et des dernières technologies: https://github.com/coryhouse/react-slingshot
- Webpack
- NPM en tant qu'outil de construction (pas de Gulp, Grunt ou Bower)
- Réagir avec Redux
- ESLint
- la liste est longue. Allez explorer!
Vos questions:
Quand je veux ajouter un paquet (et archiver la dépendance dans git), à quel endroit appartient-il - dans package.json ou dans bower.json
Tout appartient à package.json maintenant
Les dépendances requises pour la construction sont dans "devDependencies", c'est-à-dire
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 se trouvent dans les "dépendances", à savoir
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 installer explicitement des packages de cette manière sans les ajouter au fichier qui gère les dépendances (hormis l'installation globale d'outils de ligne de commande)?
Toujours . Juste pour le confort. Lorsque vous ajoutez un indicateur (--save-dev ou --save), le fichier qui gère les dépôts (package.json) est automatiquement mis à jour. Ne perdez pas de temps en modifiant manuellement les dépendances. Le raccourci pour npm install --save-dev package-name est npm i -D package-name et le raccourci pour npm install --save package-name est npm i -S package-name.
Npm et Bower sont tous deux des outils de gestion de la dépendance. Mais la principale différence entre les deux est npm est utilisé pour installer les modules Node js mais bower js est utilisé pour gérer les composants frontaux tels que html, css, js, etc..
Cela rend encore plus confus le fait que npm fournit des packages utilisables également dans le développement front-end, tels que grunt et jshint.
Ces lignes ajoutent plus de sens
Contrairement à npm, Bower peut avoir plusieurs fichiers (par exemple, .js, .css, .html, .png, .ttf), qui sont considérés comme le ou les fichiers principaux. Bower considère sémantiquement que ces fichiers principaux, lorsqu'ils sont empaquetés ensemble, constituent un composant.
Edit: Grunt est assez différent de Npm et Bower. Grunt est un outil de gestion de tâches javascript. Vous pouvez faire beaucoup de choses en utilisant grunt, ce que vous deviez faire manuellement autrement. Soulignant certaines des utilisations de Grunt:
- Compression de certains fichiers (par exemple, plug-in zipup)
- Linting on js files (jshint)
- Compiler moins de fichiers (grunt-contrib-less)
Il y a des plugins grunt pour la compilation sass, uglify votre javascript, copier des fichiers/dossiers, minifying javascript etc.
Veuillez noter que le plugin grunt est aussi un paquet npm.
Question-1
Quand je veux ajouter un paquet (et archiver la dépendance dans git), à quel endroit appartient-il - dans package.json ou dans bower.json
Cela dépend vraiment de l'endroit où ce paquet appartient. S'il s'agit d'un module de nœud (comme grunt, request), il ira dans package.json sinon dans bower json.
Question-2
Quand devrais-je installer explicitement des paquets comme ça sans les ajouter au fichier qui gère les dépendances
Peu importe que vous installiez des packages explicitement ou que vous mentionniez la dépendance dans un fichier .json. Supposons que vous êtes en train de travailler sur un projet de noeud et que vous avez besoin d'un autre projet, disons request, vous avez alors deux options:
- Editez le fichier package.json et ajoutez une dépendance à 'request'
- npm installer
OR
- Utilisez la ligne de commande:
npm install --save request
--save options ajoute également la dépendance au fichier package.json. Si vous ne spécifiez pas l'option --save, le package ne sera téléchargé que si le fichier json n'est pas affecté.
Vous pouvez le faire de toute façon, il n'y aura pas de différence substantielle.
Bower
Bower est créé uniquement pour le développement frontal et est optimisé dans cet esprit. Il utilise un arbre de dépendance plat, ne nécessitant qu'une version par paquet, ce qui réduit le chargement de la page. Il vise principalement une charge de ressources minimale.
Bower a un fichier de configuration appelé bower.json. Dans ce fichier, nous pouvons gérer la configuration de Bower, notamment les dépendances dont nous avons besoin, les détails de la licence, la description, le nom, etc.
Bower convient aux paquets front-end tels que jquery, angular, react, braise, knock-out, colonne vertébrale, etc.
Npm (gestionnaire de paquet de noeud)
Npm est le plus souvent utilisé pour gérer les modules Node.js, mais il fonctionne aussi pour le frontal. Il utilise un arbre de dépendance imbriqué, ce qui signifie que vos dépendances peuvent avoir leurs propres dépendances, qui peuvent avoir les leurs, etc. Un arbre de dépendance imbriqué signifie que vos dépendances peuvent avoir leurs propres dépendances, qui peuvent avoir les leurs, etc. C'est vraiment génial sur le serveur où vous n'avez pas à vous soucier de l'espace et de la latence.
Cela ne fonctionne évidemment pas très bien au départ car nous avons besoin de jQuery dans nos projets. Nous n'avons besoin que d'une copie de jQuery, mais lorsqu'un autre paquet nécessite jQuery, il téléchargera une nouvelle copie de jQuery. C’est l’un des principaux inconvénients de Npm.
Npm a un fichier de configuration appelé package.json. Dans ce fichier, nous pouvons gérer la configuration de Npm, notamment les dépendances dont nous avons besoin, les détails de la licence, la description, le nom, etc. Npm fournit Dépendances et DevDependencies. Les dépendances téléchargeront et maintiendront les fichiers frontaux tels que Jquery, Angular et ainsi de suite. DevDependencies téléchargera et maintiendra des outils de développement tels que Grunt, Gulp, JSHint, etc.
La raison pour laquelle de nombreux projets utilisent ces deux technologies est qu’elles utilisent Bower pour les packages front-end et Npm pour les outils de développement tels que Grunt, Gulp, JSHint, etc.
Grunt
Grunt est un outil de ligne de commande pour les développeurs front-end pour exécuter des tâches répétitives prédéfinies. Tandis que les tâches sont définies de manière déclarative avec des objets de configuration, qui sont gérés par des plug-ins pour maintenir le package principal à une taille suffisante. Il est utilisé pour automatiser les flux de travail JavaScript tels que concaténer et minifier les fichiers JS, effectuer des tests, actualiser le navigateur pour télécharger les modifications de script, etc.. Un de ses avantages est qu’il exécute différentes tâches en même temps (plus de 6010 éléments dans le registre des plug-ins Grunt) pour un immense écosystème de plug-ins. Son inconvénient est que cela peut devenir compliqué à mesure que la configuration se développe et tend à devenir obsolète.