npm WARN 该包同时包含在开发和生产依赖项中

Posted 2023-03-07

【中文标题】npm WARN 该包同时包含在开发和生产依赖项中

【英文标题】：npm WARN The package is included as both a dev and production dependency

【发布时间】：2018-01-26 07:12:50

【问题描述】：

运行时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 安装了同一个软件包的两个版本时，究竟会发生什么？这是正常行为吗？我应该摆脱 package.json 文件中的重复引用吗？

【问题讨论】：

警告试图告诉你，你不应该这样做。你应该弄清楚你想要哪个版本。

那它使用什么版本？

最后安装哪个。

所有这些模块（从babel、webpack开始）都是dev模块，从dependencies中删除它们。

【参考方案1】：

我的用例正是@Jim 在已接受答案的评论中指出的，在开发过程中，我想使用我的本地模块文件，因为我正在使用它来处理我的其他项目。 在生产中我会使用来自 VCS 的模块，我不想每次都手动更改 package.json 文件。

这就是我设置 package.json 的方式：

"dependencies": 
  "module-name": "git+ssh://[e-mail]/XXX/XXX.git#master"
,
"devDependencies": 
  "module-name-dev": "file:../XXX"

通过这个设置，npm 不会给我任何错误，因为模块名称不同，现在剩下要做的就是在开发中需要 dev 包而不是 main 包。

我找到了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，并且别名将不起作用，因此无需额外步骤即可在两者之间进行更改。

使用 webpack

如果您使用的是 webpack，则不需要 module-alias，您可以使用 webpack-chain 为 webpack 配置添加别名，如下所示：

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

【参考方案2】：

您的依赖项的两个部分都引用了该包；您完全不应该这样做，因为这意味着您的生产安装将具有与您的开发安装不同的版本。

如果您执行npm install，您将安装所有dependencies 和devDependencies；但是，如果您执行npm install --production，则只会安装dependencies。

您应该从dependencies 中删除运行应用程序不需要的内容，并将它们放在devDependencies 中。 dependencies 中的内容应视为运行应用程序的要求（在发生任何代码转换之后）。

两者都存在依赖项的情况为零。

【讨论】：

如果您想在开发中使用file:...，但在生产中使用repo 或git+ssh://...，情况如何？这似乎不受 npm 支持，但我认为它有一个有效的用例。