Diferença entre Grunt, NPM e Bower (package.json vs bower.json)

612

Eu sou novo em usar npm e bower, criando meu primeiro aplicativo em emberjs :).
Eu tenho um pouco de experiência com trilhos, por isso estou familiarizado com a idéia de arquivos para listar dependências (como o bundf Gemfile)

Pergunta: quando eu quero adicionar um pacote (e verificar a dependência no git), onde ele pertence - dentro package.jsonou dentro bower.json?

Pelo que pude perceber,
correndo bower installvai buscar o pacote e colocá-lo no /vendordiretório,
executando npm installele vai buscá-lo e colocá-lo em /node_modulesdiretório.

Essa resposta do SO diz que o bower é para front-end e npm é para material de back-end.
O Ember-app-kit parece aderir a essa distinção à primeira vista ... Mas as instruções no gruntfile para ativar algumas funcionalidades fornecem dois comandos explícitos, por isso estou totalmente confuso aqui.

Intuitivamente, eu acho que

  1. O npm install --save-dev package-name seria equivalente a adicionar o nome do pacote ao meu package.json

  2. instalação do bower --save package-name pode ser o mesmo que adicionar o pacote ao meu bower.json e executar a instalação do bower ?

Se for esse o caso, quando devo instalar pacotes explicitamente assim sem adicioná-los ao arquivo que gerencia dependências (além de instalar ferramentas de linha de comando globalmente)?

apprenticeDev
fonte
1
possível duplicata da diferença entre Bower e NPM?
Sindre Sorhus 23/03
14
@SindreSorhus Esta não é uma cópia exata. Também há perguntas adicionais associadas a este post. BTW Você se importa em explicar voto negativo?
precisa
1
Você mudou a resposta aceita? Parece que o altamente votado em 2014 diz algo bem diferente do aceito em 2016. Também explica por que sugere outra abordagem, então estou bem com isso. Um pouco surpreso por ter sido aceito (ou re-aceito).
1
Sim, mudei a resposta aceita porque considero a mais recente muito mais relevante. Suponho que nesta selva de front-end muitas pessoas estejam tão confusas quanto eu, então essa pergunta ganhou popularidade muito além das minhas expectativas ... E ainda é vista dois anos depois. Graças a Pawel, agora há uma resposta mais atual para as pessoas consultarem (fwiw, estou usando o webpack no meu trabalho atual).
apprenticeDev

Respostas:

154

Atualização para meados de 2016 :

As coisas estão mudando tão rápido que, se for final de 2017, essa resposta poderá não estar mais atualizada!

Os iniciantes podem se perder rapidamente na escolha de ferramentas de criação e fluxos de trabalho, mas o que há de mais atual em 2016 não é usar Bower, Grunt ou Gulp! Com a ajuda do Webpack, você pode fazer tudo diretamente no NPM!

Não me entenda mal, as pessoas usam outros fluxos de trabalho e eu ainda uso o GULP no meu projeto legado (mas lentamente saindo dele), mas é assim que é feito nas melhores empresas e desenvolvedores que trabalham nesse fluxo de trabalho e ganham MUITO dinheiro!

Veja este modelo: é uma configuração muito atualizada que consiste em uma mistura das melhores e das mais recentes tecnologias: https://github.com/coryhouse/react-slingshot

  • Webpack
  • NPM como uma ferramenta de construção (sem Gulp, Grunt ou Bower)
  • Reagir com Redux
  • ESLint
  • a lista é longa. Vá e explore!

Suas perguntas:

Quando eu quero adicionar um pacote (e verificar a dependência no git), onde ele pertence - no package.json ou no bower.json

  • Tudo pertence ao package.json agora

  • As dependências necessárias para a construção estão em "devDependencies", isto é npm install require-dir --save-dev(--save-dev atualiza seu package.json adicionando uma entrada ao devDependencies)

  • As dependências necessárias para seu aplicativo durante o tempo de execução estão em "dependências", isto é npm install lodash --save(--save atualiza seu package.json adicionando uma entrada às dependências)

Se for esse o caso, quando devo instalar pacotes explicitamente assim sem adicioná-los ao arquivo que gerencia dependências (além de instalar ferramentas de linha de comando globalmente)?

Sempre . Só por causa do conforto. Quando você adiciona um sinalizador ( --save-devou --save), o arquivo que gerencia o deps (package.json) é atualizado automaticamente. Não perca tempo editando dependências manualmente. Atalho para npm install --save-dev package-nameis npm i -D package-namee atalho para npm install --save package-nameisnpm i -S package-name

Pawel
fonte
6
A sua resposta é muito teimoso:> With help of Webpack you can do everything directly in NPM! Isso não é verdade, não precisa nem Webpack em seu fluxo de trabalho
Augustin Riedinger
26
Essa resposta parece estar fazendo muitas suposições. A pergunta está perguntando a diferença entre npm e bower, e esta resposta está mencionando o webpack por algum motivo. Sim, o webpack é uma maneira de fazê-lo, mas essa resposta está fazendo parecer que é a única e correta maneira de fazê-lo. Por exemplo, se alguém estiver trabalhando com o Polymer 1.x, o fluxo de trabalho padrão estará usando o bower e não há muito suporte para o webpack.
John Powers
1
A resposta é realmente relevante, mas o argumento não é realmente: "mas é assim que é feito" - bem, nada deve ser feito apenas porque deve ser aparentemente feito (ou seja, é feito por outros). O dinheiro não tem nada a ver com o raciocínio do fluxo de trabalho.
Forsberg #
3
Observando esta resposta em 2017. Indo para a documentação: "webpack v1 está obsoleto. Recomendamos que todos os desenvolvedores atualizem para o webpack 2. Siga nosso guia de migração ou consulte a documentação do webpack 2 para obter mais informações." Haha desenvolvimento web clássico.
user643011
1
@ user643011 Ao olhar para o guia de migração, você notará que a maioria da configuração permanece a mesma e o restante são apenas alterações cosméticas na estrutura da configuração. Eu fiz a migração em uma tarde incluindo um PR
Pawel
576

Npm e Bower são ferramentas de gerenciamento de dependências. Mas a principal diferença entre ambos é npm é usado para instalar módulos Nó js mas Bower js é utilizado para controlar componentes de front-end como html, css, js etc .

Um fato que torna isso mais confuso é que o npm fornece alguns pacotes que também podem ser usados ​​no desenvolvimento front-end, como grunte jshint.

Essas linhas acrescentam mais significado

O Bower, diferentemente do npm, pode ter vários arquivos (por exemplo, .js, .css, .html, .png, .ttf) que são considerados o (s) arquivo (s) principal (s). Bower considera semanticamente esses arquivos principais, quando empacotados juntos, um componente.

Edit : Grunt é bem diferente de Npm e Bower. Grunt é uma ferramenta de execução de tarefas javascript. Você pode fazer muitas coisas usando o grunhido, que precisaria fazer manualmente caso contrário. Destacando alguns dos usos do Grunt:

  1. Fechando alguns arquivos (por exemplo, plugin zipup)
  2. Linting em arquivos js (jshint)
  3. Compilando menos arquivos (menos grung-contrib)

Existem plugins grunhidos para compilação sass, uglificando seu javascript, copiando arquivos / pastas, minificando javascript etc.

Observe que o plugin grunt também é um pacote npm.

Questão 1

Quando eu quero adicionar um pacote (e verificar a dependência no git), onde ele pertence - no package.json ou no bower.json

Realmente depende de onde este pacote pertence. Se for um módulo de nó (como grunt, request), ele irá para o package.json, caso contrário, para o bower json.

Questão 2

Quando devo instalar pacotes explicitamente assim sem adicioná-los ao arquivo que gerencia dependências

Não importa se você está instalando pacotes explicitamente ou mencionando a dependência no arquivo .json. Suponha que você esteja trabalhando em um projeto de nó e precise de outro projeto, digamos request, então você tem duas opções:

  • Edite o arquivo package.json e adicione uma dependência em 'request'
  • instalação npm

OU

  • Use a linha de comando: npm install --save request

--saveoptions adiciona a dependência ao arquivo package.json também. Se você não especificar a --saveopção, ele fará o download apenas do pacote, mas o arquivo json não será afetado.

Você pode fazer isso de qualquer maneira, não haverá uma diferença substancial.

sachinjain024
fonte
3
Obrigado pelo esclarecimento e pelo artigo! Esclarecedor e esclarece a diferença (o que deve ajudar a decidir onde colocar dependências). Vou esperar se talvez alguém vai dialogar sobre a última pergunta (re: quando que eu iria querer instalar pacotes individualmente) e aceitar a sua resposta mais tarde :)
apprenticeDev
1
Em relação ao npm, pode ser um gerenciador de pacotes para os módulos NodeJS, mas estamos perdendo de vista que não é exclusivo apenas do NodeJS. O npm é tão eficaz no gerenciamento de dependências do lado do cliente. Ex: dontkry.com/posts/code/using-npm-on-the-client-side.html
Matt Smith
15
O que o cara que a NPM não pode fazer?
Adam Soffer
1
Observe que o repositório do plug-in jQuery ( plugins.jquery.com ) foi substituído pelo npm.
thdoan
2
o último tutorial angular 2 (RC) de início rápido e a semente do git usam npmapenas, em oposição ao tutorial da v1 que usava npm e bower. Eu realmente amo os fatos de que (a) package.jsoné a única coisa a ser mantida, (b) que calcula dependências recursivamente em um liner npm installe (c) quando há um problema, você só precisa excluir a node_modulespasta e executar o npm install novamente.
Sebas