javascript - Grunt、NPM 和 Bower 的差異（package.json 與 bower.json）

當我想要新增一個套件（並將依賴項提交到 git 時），它應該放在哪裡——package.json 還是 bower.json？

據我所知，
執行 bower install 會抓取套件並將其放入 /vendor 目錄，
執行 npm install 則會抓取它並放入 /node_modules 目錄。

這個 SO 答案說 bower 是用於前端，而 npm 是用於後端的東西。
從一開始看，Ember-app-kit 似乎遵守這個區分……但是 gruntfile 中啟用某些功能的指示給了兩個明確的命令，所以我完全困惑了。

直覺上我會猜想

npm install --save-dev package-name 相當於將 package-name 添加到我的 package.json
bower install --save package-name 可能就等同於將套件加入我的 bower.json 並執行 bower install？

如果是這種情況，我什麼時候才應該像那樣明確地安裝套件，而不將它們添加到管理依賴項的檔案中（除了在全域安裝命令行工具之外）？

答案＃1

Npm 和 Bower 都是依賴管理工具。但它們之間的主要區別是 npm 用於安裝 Node.js 模組，而 Bower.js 用於管理前端元件，如 HTML、CSS、JS 等。

使情況更混亂的一個事實是，npm 提供了一些也可以用於前端開發的套件，例如 grunt 和 jshint。

這些行增加了更多的意義

Bower 與 npm 不同，它可以有多個被視為主要文件的檔案（例如 .js、.css、.html、.png、.ttf）。Bower 從語意上將這些主要文件在打包在一起時視為一個元件。

編輯：Grunt 與 Npm 和 Bower 相當不同。Grunt 是一個 JavaScript 任務執行工具。使用 Grunt，你可以完成許多否則需要手動處理的工作。以下強調 Grunt 的一些用途：

壓縮一些檔案（例如 zipup 外掛）
對 js 檔案進行程式碼檢查（jshint）
編譯 less 檔案 (grunt-contrib-less)

有用於 sass 編譯、壓縮你的 javascript、複製檔案/資料夾、最小化 javascript 等的 grunt 插件。

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

問題-1

當我想要新增一個套件（並將依賴項提交到 git）時，它應該放在哪裡──在 package.json 還是 bower.json？

這真的取決於這個套件屬於哪裡。如果它是一個節點模組（像是 grunt、request），那麼它將會放在 package.json 裡，否則放入 bower.json。

問題-2

我什麼時候應該像那樣明確安裝套件，而不將它們添加到管理依賴的檔案中？

無論您是明確安裝套件，還是在 .json 文件中提及依賴，都沒有關係。假設您正在進行一個 node 專案的工作，並且您需要另一個專案，例如 request，那麼您有兩個選擇：

編輯 package.json 檔案並新增對 'request' 的依賴
npm 安裝

或

使用命令列：npm install --save request

--save 選項會將依賴項添加到 package.json 文件中。如果你不指定 --save 選項，它只會下載套件，但 json 文件不會受到影響。

你可以用任何一種方式做，差別不大。

答案＃2

2016年中更新：

事情變化得非常快，如果是2017年底，這個答案可能已經不再最新了！

初學者很容易在建置工具和工作流程的選擇中迷失，但在2016年最新的做法是完全不使用 Bower、Grunt 或 Gulp！借助 Webpack，你可以直接在 NPM 中完成所有操作！

Google 「npm 作為構建工具」結果: 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 的 React
ESLint
清單很長。去探索吧！

你的問題：

當我想要新增一個套件（並將依賴項提交到 git）時，它應該放在哪裡——放在 package.json 還是 bower.json？

現在所有東西都屬於 package.json
建置所需的依賴項在「devDependencies」中，即 npm install require-dir --save-dev（--save-dev 會透過在 devDependencies 中新增一個條目來更新你的 package.json）
在運行時，您的應用程式所需的依賴項位於「dependencies」中，即 npm install lodash --save（--save 會通過在 dependencies 中添加條目來更新您的 package.json）

如果是這種情況，我什麼時候才應該像那樣明確地安裝套件，而不將它們添加到管理依賴項的檔案中（除了在全域安裝命令行工具之外）？

總是。只是為了方便。當你加上標誌（--save-dev 或 --save）時，管理依賴的檔案（package.json）會自動更新。不要浪費時間手動編輯裡面的依賴。npm install --save-dev package-name 的快捷方式是 npm i -D package-name，而 npm install --save package-name 的快捷方式是 npm i -S package-name