web-dev-qa-db-ja.com

npm WARNパッケージは、devとproductionの両方の依存関係として含まれています

npm install

私はこれらの警告を受けました：

npm WARN The package babel-core is included as both a dev and production dependency.
npm WARN The package babel-loader is included as both a dev and production dependency.
npm WARN The package babel-preset-react is included as both a dev and production dependency.
npm WARN The package redux-thunk is included as both a dev and production dependency.
npm WARN The package uglifyjs is included as both a dev and production dependency.

up to date in 7.183s
npm WARN The package babel-core is included as both a dev and production dependency.
npm WARN The package babel-loader is included as both a dev and production dependency.
npm WARN The package babel-preset-react is included as both a dev and production dependency.
npm WARN The package redux-thunk is included as both a dev and production dependency.
npm WARN The package uglifyjs is included as both a dev and production dependency.

package.jsonファイル：

{
 ...
  "dependencies": {
    "axios": "^0.15.3",
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.9.0",
    "bluebird": "^3.5.0",
    "bootstrap-sass": "^3.3.7",
    "classnames": "^2.2.5",
    "console-polyfill": "^0.2.3",
    "cross-env": "^1.0.8",
    "css-loader": "^0.23.1",
    "deepmerge": "^1.3.2",
    "dom-helpers": "^3.0.0",
    "expect": "^1.20.1",
    "fuzzy": "^0.1.3",
    "moment": "^2.18.1",
    "node-libs-browser": "^1.0.0",
    "node-sass": "^3.8.0",
    "react": "^15.1.0",
    "react-addons-shallow-compare": "15.4.0",
    "react-addons-test-utils": "^15.1.0",
    "react-axios": "0.0.9",
    "react-bootstrap-daterangepicker": "^3.2.2",
    "react-daterange-picker": "^1.1.0",
    "react-dom": "^15.1.0",
    "react-draggable": "^2.2.3",
    "react-redux": "^4.4.8",
    "react-router": "^3.0.2",
    "react-virtualized": "^8.5.2",
    "redux": "^3.6.0",
    "redux-logger": "^2.6.1",
    "redux-promise": "^0.5.3",
    "redux-promise-middleware": "^4.2.0",
    "redux-thunk": "^2.1.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "uglifyjs": "=2.4.10",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": "^2.11.0"
  },
  "devDependencies": {
    "assets-webpack-plugin": "^3.5.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",
    "didyoumean": "^1.2.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "glob": "^7.1.1",
    "postcss-loader": "^1.3.0",
    "purifycss-webpack-plugin": "^2.0.3",
    "react-transform-hmr": "^1.0.4",
    "redux-thunk": "^2.2.0",
    "uglifyjs": "=2.4.10",
    "webpack": "^1.15.0",
    "webpack-cleanup-plugin": "^0.5.1",
    "webpack-split-chunks": "^0.1.1"
  }
}

異なるバージョンがインストールされていることに注意してください。 devとprodに同じパッケージの2つのバージョンがインストールされている場合、正確にはどうなりますか？これは正常な動作ですか？ package.jsonファイル内の重複した参照を削除する必要がありますか？

node.jsnpmpackage.json
15
Philll_t

依存関係の両方のセクションで参照されているパッケージがあります。これは、実稼働インストールが開発インストールとは異なるバージョンになることを意味するため、まったく実行しないでください。

もしあなたがそうするなら npm installすべてのdependenciesおよびdevDependenciesがインストールされます。ただし、npm install --productiondependenciesのみがインストールされます。

アプリの実行に不要なものをdependenciesから削除し、devDependenciesに配置する必要があります。 dependenciesの内容は、アプリケーションを実行するための要件と見なされる必要があります（コード変換が行われた後）。

両方に依存関係が存在する場合はゼロです。

21
whitfin

私のユースケースは、受け入れられた回答のコメントで@Jimが指摘したとおりです。実稼働環境では、VCSのモジュールを使用しますが、package.jsonファイルを毎回手動で変更したくありません。

これは私がpackage.jsonを設定する方法です：

"dependencies": {
  "module-name": "git+ssh://[email protected]/XXX/XXX.git#master"
},
"devDependencies": {
  "module-name-dev": "file:../XXX"
}

この設定では、モジュール名が異なるため、npmはエラーを表示しません。今やるべきことは、メインパッケージではなく開発パッケージを開発に要求することです。

module-alias パッケージが見つかりました。これにより、必要なパスにエイリアス名を使用できます。

最初にapp.jsファイルに次のコードを追加する必要があります。

if (process.env.NODE_ENV === 'development') {
  const moduleAlias = require('module-alias');

  moduleAlias.addAlias('module-name', 'module-name-dev');
}

これから、module-nameモジュールが必要になるたびに、開発中にmodule-name-devを実際に取得します。

本番環境では、devDependenciesをインストールしないでください。エイリアスは機能しないため、2の間で変更するための追加手順は必要ありません。

Webpackの使用

Webpackを使用している場合、module-aliasは不要です。webpack-chainを使用して、次のようにwebpack設定にエイリアスを追加できます。

chainWebpack: (config) => {
    if (process.env.NODE_ENV === 'development') {
      config.resolve.alias
      .set('module-name', 'module-name-dev');
    }
  },
0
Art3mix