Grunt，NPM和Bower之間的區別（package.json vs bower.json）

Question

我是新手使用npm和bower，在emberjs中構建我的第一個應用程序:)。
我對rails有一些經驗，所以我對列出依賴項的文件的想法很熟悉（例如bundler Gemfile）

問題：當我想添加一個包（並將依賴項檢入git），它屬於哪里 - 進入package.json或bower.json ？

從我收集的，
運行bower install將獲取包並將其放入/vendor目錄，
運行npm install它將獲取它並將其放入/node_modules目錄。

這個SO答案說bower用於前端，npm用於后端。
Ember-app-kit似乎從第一眼開始就堅持這種區別......但是gruntfile中用於啟用某些功能的指令給出了兩個顯式命令，所以我在這里完全糊塗了。

直覺我會猜到

1. npm install --save-dev package-name相當於將package-name添加到我的package.json中

2. bower install --save package-name可能與將包添加到我的bower.json並運行bower install相同 ？

如果是這種情況，我什么時候應該像這樣明確地安裝軟件包而不將它們添加到管理依賴項的文件中（除了全局安裝命令行工具）？

Answer 1

Npm和Bower都是依賴管理工具。 但兩者之間的主要區別是npm用於安裝Node js模塊，但是bower js用於管理前端組件，如html，css，js等 。

讓這更令人困惑的一個事實是，npm提供了一些可以用於前端開發的軟件包，比如grunt和jshint 。

這些行增加了更多含義

與npm不同，Bower可以有多個文件（例如.js，.css，.html，.png，.ttf），這些文件被認為是主文件。 Bower在語義上將這些主文件打包在一起時，它們是一個組件。

編輯 ： Grunt與Npm和Bower完全不同。 Grunt是一個javascript任務運行器工具。 你可以使用grunt做很多事情，否則你必須手動完成。 強調Grunt的一些用法：

1. 壓縮一些文件（例如zipup插件）
2. Lins on js files（jshint）
3. 編譯較少的文件（grunt-contrib-less）

有sass編譯的grunt插件，uglifying你的javascript，復制文件/文件夾，縮小javascript等。

請注意，grunt插件也是一個npm包。

問題1

當我想添加一個包（並將依賴項檢入git），它在哪里 - 屬於package.json或bower.json

這真的取決於這個包屬於哪里。 如果它是一個節點模塊（如grunt，request）那么它將在package.json中進入bower json。

問題2

什么時候我應該像這樣明確地安裝包而不將它們添加到管理依賴項的文件中

無論是顯式安裝包還是提及.json文件中的依賴項都無關緊要。 假設您正在處理節點項目，並且需要另一個項目，比如request ，那么您有兩個選擇：

• 編輯package.json文件並在'request'上添加依賴項
• npm安裝

要么

• 使用命令行： npm install --save request

--save選項也將依賴項添加到package.json文件中。 如果未指定--save選項，則只會下載程序包，但json文件不受影響。

你可以這樣做，不會有實質性的區別。

Answer 2

2016年中期更新 ：

事情變化如此之快，如果是2017年末，這個答案可能不再是最新的了！

初學者可以快速迷失在構建工具和工作流程的選擇上，但2016年最新的是不使用Bower，Grunt或Gulp！ 在Webpack的幫助下，您可以直接在NPM中完成所有工作！

• 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

不要誤會我的人使用其他工作流程，我仍然在我的遺留項目中使用GULP（但是慢慢地離開它），但這就是在最好的公司中完成的工作，在這個工作流程中工作的開發人員賺了很多錢！

看看這個模板，這是一個由最新技術和最新技術組合而成的最新設置： https ： //github.com/coryhouse/react-slingshot

• 的WebPack
• NPM作為構建工具（沒有Gulp，Grunt或Bower）
• 與Redux反應
• ESLint
• 清單很長。 去探索！

你的問題：

當我想添加一個包（並將依賴項檢入git），它在哪里 - 屬於package.json或bower.json

• 現在一切都屬於package.json

• 構建所需的依賴關系在“devDependencies”中，即npm install require-dir --save-dev （--save-dev通過向devDependencies添加條目來更新package.json）

• 運行時期間應用程序所需的依賴關系是“依賴關系”，即npm install lodash --save （-- npm install lodash --save通過向依賴項添加條目來更新package.json）

如果是這種情況，我什么時候應該像這樣明確地安裝軟件包而不將它們添加到管理依賴項的文件中（除了全局安裝命令行工具）？

永遠 。 只是因為舒適。 添加標志（ --save-dev或--save ）時，管理deps（package.json）的文件會自動更新。 不要通過手動編輯其中的依賴項來浪費時間。 npm install --save-dev package-name快捷方式npm install --save-dev package-name是npm i -D package-name和npm install --save package-name快捷方式npm install --save package-name是npm i -S package-name