Javascript Girl
  1. Javascript Girl
  3. Différence entre Grunt, NPM et Bower (package.json vs bower.json)
Intereting Posts
OOP JavaScript – Créez un objet Div personnalisé Comment adapter la caméra à l'objet Select2 multiselect double valeurs Le plugin d'informations réseau Cordova affiche régulièrement l'état hors ligne (UNKNOWN) Appliquer dynamiquement l'attribut de style CSS dans JL angulaire Html – Comment empêcher le navigateur d'ouvrir le lien spécifié dans href? Utilisation de "this" avec jQuery Selectors Pourquoi plusieurs AJAX simultanés appellent-ils à la même action ASP.NET MVC que le navigateur bloque? Solution de JavaScript pour le glisser-déplacer dans Selenium WebDriver Javascript: vérifiez si tous les éléments d'un tableau sont identiques à une variable, ou aucun d'eux n'est Comment faire la différence entre 2 dates par années, les mois et les jours à l'aide de moment.js 1.265 * 10000 = 126499.99999999999? Vignettes de meilleure qualité à partir de fichiers image plus grands La page du navigateur reste rafraîchissante lors du test des vues Backbone avec Jasmine Impossible d'appeler la fonction Javascript à partir d'un événement button onclick ASP.NET 4

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

Je suis nouveau à utiliser npm et bower, construire ma première application dans emberjs :).
J'ai un peu d'expérience avec les rails, donc je connais l'idée de fichiers pour la liste des dépendances (comme le Gemilot de bundler)

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

D'après ce que je crois,
L' bower install courant va chercher le paquet et le placer dans /vendor répertoire /vendor ,
En cours d'exécution, npm install il l' /node_modules répertoire /node_modules .

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

Intuitivement, je devine que

  1. Npm install –save-dev package-name équivaut à ajouter le nom du paquet à mon package.json

  2. Bower install –saver package-name peut-être être le même que l'ajout du package à mon bower.json et l' installation de bower en cours d'exécution?

Si tel est le cas, quand devrais-je installer des modules explicitement comme ça sans les ajouter au fichier qui gère les dépendances (en plus d'installer les outils de ligne de commande à l'échelle mondiale)?

    Mise à jour pour la mi-2016 :

    Les choses évoluent tellement 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 flux de travail, mais ce qui est le plus à jour en 2016, ne consiste pas à utiliser Bower, Grunt ou Gulp! Avec l'aide de Webpack, vous pouvez tout faire directement dans NPM!

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

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

    • Webpack
    • NPM comme outil de construction (sans Gulp, Grunt ou Bower)
    • Réagir avec Redux
    • ESLint
    • La liste est longue. Aller et 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 à 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 sont dans "dépendances", c'est-à-dire npm install lodash --save (- sauvegarder les mises à jour de votre package.json en ajoutant une entrée aux dépendances)

    Si tel est le cas, quand devrais-je installer des modules explicitement comme ça sans les ajouter au fichier qui gère les dépendances (en plus d'installer les outils de ligne de commande à l'échelle mondiale)?

    Toujours . Juste à cause du confort. Lorsque vous ajoutez un drapeau ( --save-dev ou --save ), le fichier qui gère deps (package.json) est automatiquement mis à jour. Ne gaspillez pas de temps en modifiant les dépendances manuellement. Raccourci pour l' npm install --save-dev package-name est npm i -D package-name et raccourci pour l' npm install --save package-name est npm i -S package-name

    Npm et Bower sont tous deux des outils de gestion de dépendance. Mais la principale différence entre les deux est npm est utilisé pour l'installation de modules Node js, mais bower js est utilisé pour la gestion de composants avant comme html, css, js etc.

    Un fait qui rend cela plus confus, c'est que npm fournit certains paquets qui peuvent également être utilisés dans le développement de front-end, comme grunt et jshint .

    Ces lignes ajoutent plus de sens

    Bower, contrairement à npm, peut avoir plusieurs fichiers (p. Ex. 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 emballés ensemble, un composant.

    Edit : Grunt est très différent de Npm et Bower. Grunt est un outil de coureur de tâches javascript. Vous pouvez faire beaucoup de choses en utilisant grunt que vous avez à faire manuellement autrement. Soulignant certaines des utilisations de Grunt:

    1. Coupure de certains fichiers (p. Ex. Plugin zipup)
    2. Linting sur les fichiers js (jshint)
    3. Compilation de fichiers moins (grunt-contrib-less)

    Il existe des plugins grunt pour la compilation sass, uglisant votre javascript, copiez des fichiers / dossiers, javascript mineur, etc.

    Veuillez noter que le plugin grunt est également un paquet de 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 d'où appartient ce paquet. S'il s'agit d'un module de noeud (comme grunt, demande), il ira dans package.json sinon dans bower json.

    Question 2

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

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

    • Modifiez le fichier package.json et ajoutez une dépendance sur 'request'
    • Npm installation

    OU

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

    --save options de --save ajoutent également la dépendance au fichier package.json. Si vous ne spécifiez pas l'option --save , elle ne téléchargera que le fichier, 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.