[解決済み】Grunt、NPM、Bowerの違い( package.json vs bower.json )

質問

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の指示では ある機能を有効にする 2つの明示的なコマンドを与えるので、ここで完全に混乱しています。

直感的には次のように推測されます。

1. npm install --save-dev パッケージ名 は、package.jsonにpackage-nameを追加するのと同じことです。

2. bower install --save パッケージ名 は、そのパッケージを私の bower.json を実行し bowerインストール ?

その場合、依存関係を管理するファイルに追加することなく、このように明示的にパッケージをインストールするのはいつになるでしょうか (コマンドラインツールをグローバルにインストールする場合は別として)。

解決方法は？

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

• ウェブパック
• ビルドツールとしての NPM (Gulp、Grunt、Bower は不可)
• ReactとRedux
• 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はpackage.jsonを更新し、dependenciesにエントリを追加します)

その場合、依存関係を管理するファイルに追加することなく、このように明示的にパッケージをインストールすることは、（コマンドラインツールのグローバルインストールは別として）どのような場合に行うべきでしょうか？

常に . 気休め程度に。フラグを付けると( --save-dev または --save ) depsを管理するファイル(package.json)が自動的に更新されます。その中の依存関係を手動で編集して時間を浪費することはありません。のショートカット npm install --save-dev package-name は npm i -D package-name のショートカットです。 npm install --save package-name は npm i -S package-name