react/reduxフロントエンドプロジェクトにpackage.jsonのプロダクション依存関係が含まれているのはなぜですか？

Question

私はReact.js + Reduxの学習を始めました。多くのフロントエンドプロジェクトでは、パッケージマネージャーとしてnpmが使用されています。

このプロジェクトは、たとえばcounterとなります。

これは、package.json fileを含みます。このファイルの内容を見ると、devDependenciesとdependenciesのエントリがあることがわかります。

"dependencies": { 
    "react": "^0.14.7", 
    "react-dom": "^0.14.7", 
    "react-redux": "^4.2.1", 
    "redux": "^3.2.1" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.3.15", 
    "babel-loader": "^6.2.0", 
    "babel-preset-es2015": "^6.3.13", 
    "babel-preset-react": "^6.3.13", 
    "babel-preset-react-hmre": "^1.1.1", 
    "babel-register": "^6.3.13", 
    "cross-env": "^1.0.7", 
    "enzyme": "^2.0.0", 
    "expect": "^1.6.0", 
    "express": "^4.13.3", 
    "mocha": "^2.2.5", 
    "node-libs-browser": "^0.5.2", 
    "react-addons-test-utils": "^0.14.7", 
    "webpack": "^1.9.11", 
    "webpack-dev-middleware": "^1.2.0", 
    "webpack-hot-middleware": "^2.9.1" 
    } 

私はdevDependenciesとdependenciesの違いが何であるかを知っている一方で、プロジェクトがreact、react-dom、reduxdependencies下のセクションを示していますなぜ私は理解していません。私の理解からは、プロダクションで作業するためにサーバにインストールする必要のないフロントエンドプロジェクトです。

Answer 1

@aarosilが指摘しているように、npmはフロントエンドまたはバックエンドを気にしません。それは単なるパッケージマネージャーです。

これはすべてプロジェクトの構造になっています。あなたが与えた例（React counterの例）を見ると、これはブラウザで動作する非常に小さなデモです。 Webpackを使用してプロジェクトをビルドします。この場合、ブラウザで実行されるブラウザ&によって要求されるJSバンドルで構成されます。このバンドルには、ブラウザでも実行されるpackage.jsonファイルに表示される依存関係が含まれます。

npmを使用して、サーバー側で使用するための「バックエンド」パッケージを簡単に構築できます。その場合、依存関係にはおそらくreactなどは含まれません（もちろん、サーバー上でページをレンダリングしない限り）