Diferencia entre Grunt, NPM y Bower (package.json vs bower.json)


612

Soy nuevo en el uso de npm y bower, construyendo mi primera aplicación en emberjs :).
Tengo un poco de experiencia con los rieles, así que estoy familiarizado con la idea de los archivos para enumerar dependencias (como el paquete Gemfile)

Pregunta: cuando quiero agregar un paquete (y registrar la dependencia en git), ¿a dónde pertenece: dentro package.jsono dentro bower.json?

Por lo que sé, la
ejecución bower installbuscará el paquete y lo colocará en el /vendordirectorio, la
ejecutará npm installlo buscará y lo colocará en el /node_modulesdirectorio.

Esta respuesta SO dice que bower es para front-end y npm es para cosas de backend.
Ember-app-kit parece adherirse a esta distinción desde el primer vistazo ... Pero las instrucciones en gruntfile para habilitar alguna funcionalidad dan dos comandos explícitos, así que estoy totalmente confundido aquí.

Intuitivamente supongo que

  1. npm install --save-dev nombre-paquete equivaldría a agregar el nombre-paquete a mi paquete.json

  2. bower install --save package-name podría ser lo mismo que agregar el paquete a mi bower.json y ejecutar bower install ?

Si ese es el caso, ¿cuándo debería instalar paquetes explícitamente así sin agregarlos al archivo que administra las dependencias (aparte de instalar herramientas de línea de comandos a nivel mundial)?


1

14
@SindreSorhus Esto no es un duplicado exacto. También hay una pregunta adicional asociada en esta publicación. Por cierto, ¿te importa explicar downvote?
sachinjain024

1
¿Cambiaste la respuesta aceptada? Parece que el altamente votado de 2014 dice algo bastante diferente al aceptado de 2016. También explica por qué sugiere otro enfoque, así que estoy bien con eso. Solo un poco sorprendido de que sea aceptado (o re-aceptado).

1
Sí, cambié la respuesta aceptada porque siento que la posterior es mucho más relevante. Supongo que en esta jungla de front-end muchas personas están tan confundidas como yo, por lo que esta pregunta ganó popularidad mucho más allá de mis expectativas ... Y aún obtiene puntos de vista 2 años después. Gracias a Pawel ahora hay una respuesta más actual para que la gente se refiera (ahora estoy usando webpack en mi trabajo actual).
apprenticeDev

Respuestas:


154

Actualización para mediados de 2016 :

¡Las cosas están cambiando tan rápido que si es a finales de 2017, esta respuesta podría no estar actualizada!

Los principiantes pueden perderse rápidamente en la elección de herramientas de creación y flujos de trabajo, ¡pero lo que está más actualizado en 2016 es no usar Bower, Grunt o Gulp en absoluto! ¡Con la ayuda de Webpack puedes hacer todo directamente en NPM!

No me malinterpreten, las personas usan otros flujos de trabajo y yo sigo usando GULP en mi proyecto heredado (pero poco a poco salgo de él), ¡pero así es como se hace en las mejores empresas y desarrolladores que trabajan en este flujo de trabajo y ganan MUCHO dinero!

Mire esta plantilla, es una configuración muy actualizada que consiste en una combinación de las mejores y las últimas tecnologías: https://github.com/coryhouse/react-slingshot

  • Paquete web
  • NPM como herramienta de construcción (sin Gulp, Grunt o Bower)
  • Reaccionar con Redux
  • ESLint
  • La lista es larga. ¡Ve y explora!

Tus preguntas:

Cuando quiero agregar un paquete (y registrar la dependencia en git), ¿a dónde pertenece? En package.json o en bower.json

  • Todo pertenece en package.json ahora

  • Las dependencias requeridas para la compilación están en "devDependencies", es decir npm install require-dir --save-dev(--save-dev actualiza su package.json agregando una entrada a devDependencies)

  • Las dependencias requeridas para su aplicación durante el tiempo de ejecución están en "dependencias", es decir npm install lodash --save(--save actualiza su package.json agregando una entrada a las dependencias)

Si ese es el caso, ¿cuándo debería instalar paquetes explícitamente así sin agregarlos al archivo que administra las dependencias (aparte de instalar herramientas de línea de comandos a nivel mundial)?

Siempre . Solo por comodidad. Cuando agrega un indicador ( --save-devo --save), el archivo que administra los deps (package.json) se actualiza automáticamente. No pierdas el tiempo editando dependencias en él manualmente. Atajo para npm install --save-dev package-nameis npm i -D package-namey atajo para npm install --save package-nameisnpm i -S package-name


66
Su respuesta es muy obvia:> With help of Webpack you can do everything directly in NPM! Eso no es cierto, uno ni siquiera necesita un paquete web en su flujo de trabajo
Augustin Riedinger

26
Esta respuesta parece estar haciendo muchas suposiciones. La pregunta es preguntar la diferencia entre npm y bower, y esta respuesta menciona webpack por alguna razón. Sí, webpack es una forma de hacerlo, pero esta respuesta hace que parezca que es la única y correcta forma de hacerlo. Por ejemplo, si alguien está trabajando con Polymer 1.x, el flujo de trabajo estándar usará Bower, y no hay mucho soporte para webpack.
John Powers

1
La respuesta es realmente relevante, pero el argumento dado no es realmente: "pero así es como se hace", bueno, nada se debe hacer solo porque se supone que se hace aparentemente (es decir, lo hacen otros). El dinero no tiene nada que ver con el razonamiento del flujo de trabajo.
forsberg

3
Mirando esta respuesta en 2017. Ir a la documentación: "webpack v1 está en desuso. Alentamos a todos los desarrolladores a actualizar a webpack 2. Siga nuestra guía de migración o consulte la documentación de webpack 2 para obtener más información". Jaja desarrollo web clásico.
user643011

1
@ user643011 Cuando observe la guía de migración, notará que la mayoría de la configuración permanece igual y el resto son solo cambios cosméticos en la estructura de configuración. Hice la migración en una tarde, incluyendo un PR
Pawel

576

Npm y Bower son herramientas de gestión de dependencias. Sin embargo, la principal diferencia entre ambos es la NGP se utiliza para la instalación de módulos de nodo js js pero Bower se utiliza para controlar los componentes de front-end como HTML, CSS, JS, etc .

Un hecho que hace que esto sea más confuso es que npm proporciona algunos paquetes que también se pueden usar en el desarrollo front-end, como grunty jshint.

Estas líneas agregan más significado

Bower, a diferencia de npm, puede tener múltiples archivos (por ejemplo .js, .css, .html, .png, .ttf) que se consideran los archivos principales. Bower considera semánticamente estos archivos principales, cuando se empaquetan juntos, como un componente.

Editar : Grunt es bastante diferente de Npm y Bower. Grunt es una herramienta de ejecución de tareas de JavaScript. Puedes hacer muchas cosas usando gruñido, que de lo contrario tenías que hacer manualmente. Destacando algunos de los usos de Grunt:

  1. Comprimir algunos archivos (por ejemplo, el complemento zipup)
  2. Revestimiento en archivos js (jshint)
  3. Compilación de menos archivos (grunt-contrib-less)

Hay grunt plugins para compilar sass, uglificar su javascript, copiar archivos / carpetas, minificar javascript, etc.

Tenga en cuenta que el complemento Grunt también es un paquete npm.

Pregunta 1

Cuando quiero agregar un paquete (y registrar la dependencia en git), ¿a dónde pertenece? En package.json o en bower.json

Realmente depende de a dónde pertenece este paquete. Si es un módulo de nodo (como gruñido, solicitud), irá en package.json de lo contrario a bower json.

Pregunta 2

¿Cuándo debería instalar paquetes explícitamente así sin agregarlos al archivo que administra las dependencias?

No importa si está instalando paquetes explícitamente o si menciona la dependencia en el archivo .json. Supongamos que está trabajando en un proyecto de nodo y necesita otro proyecto, por ejemplo request, tiene dos opciones:

  • Edite el archivo package.json y agregue una dependencia en 'request'
  • npm install

O

  • Usar línea de comando: npm install --save request

--saveopciones agrega la dependencia al archivo package.json también. Si no especifica la --saveopción, solo descargará el paquete, pero el archivo json no se verá afectado.

Puede hacerlo de cualquier manera, no habrá una diferencia sustancial.


3
Gracias por la aclaración, y por el artículo! Perspicaz, y aclara la diferencia (que debería ayudar a decidir dónde colocar las dependencias). Esperaré si tal vez alguien interviene en la última pregunta (re: cuándo querría instalar paquetes individualmente), y aceptaré tu respuesta más tarde :)
apprenticeDev

1
Con respecto a npm, puede ser un administrador de paquetes para módulos NodeJS, pero estamos perdiendo de vista que no es exclusivo de NodeJS. npm es igual de efectivo en la gestión de dependencias del lado del cliente. Por ejemplo
Matt Smith

15
¿Qué puede hacer Bower que npm no puede?
Adam Soffer

1
Tenga en cuenta que el repositorio de complementos jQuery ( plugins.jquery.com ) ha sido reemplazado por npm.
Thdoan

2
el último tutorial de inicio rápido angular 2 (RC) y git seed npmsolo usa , a diferencia del tutorial v1 que estaba usando npm y bower. Realmente me encantan los hechos de que (a) package.jsones lo único que se debe mantener, (b) que calcula las dependencias de forma recursiva en una línea npm install, y (c) cuando hay un problema, solo necesita eliminar la node_modulescarpeta y ejecutar npm install de nuevo.
Sebas
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.