你应该把Babel和Webpack放在devDependencies还是Dependencies里面？

Question

我是 npm 的新手，不太明白应该将什么放在 dependencies 和 devDependencies 中。我知道测试库应该放在 devDependencies 中，但像 babel 和 webpack 这样的工具应该怎么办呢？它们也应该放在 devDependencies 中吗，因为它们只用于将 es6 和 JSX 转换为普通的 JS？我的理解是，当你部署到 Heroku 时，它会使用必要的库进行转换，所以在生产环境中不需要托管它们。

  "dependencies": {
    "babel-core": "^6.7.7",
    "babel-eslint": "^6.0.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-transform-object-rest-spread": "^6.6.5",
    "babel-plugin-transform-react-display-name": "^6.5.0",
    "babel-polyfill": "^6.7.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "bootstrap": "^3.3.7",
    "css-loader": "^0.23.1",
    "es6-promise": "^3.2.1",
    "eslint": "^2.9.0",
    "eslint-plugin-babel": "^3.2.0",
    "eslint-plugin-react": "^5.0.1",
    "express": "^4.13.4",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "lodash": "^4.15.0",
    "react": "^15.0.2",
    "react-addons-css-transition-group": "^15.0.2",
    "react-dom": "^15.0.2",
    "react-redux": "^4.4.5",
    "react-transform-catch-errors": "^1.0.2",
    "react-transform-hmr": "^1.0.4",
    "redbox-react": "^1.2.3",
    "redux": "^3.5.2",
    "redux-form": "^6.1.0",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-hot-middleware": "^2.10.0"
  },
  "devDependencies": {
    "babel-register": "^6.9.0",
    "chai": "^3.5.0",
    "mocha": "^2.5.3",
    "sinon": "^1.17.4",
    "webpack": "^1.13.2"
  }

- stackjlei

---

这篇文章会给你一些必要的澄清：https://dev59.com/VmMk5IYBdhLWcg3w5B3y。 - semuzaboi

Answer 1

babel和webpack包将放置在devDependencies部分，因为这些包在将您的代码转换和捆绑成纯JavaScript的bundle.js等文件时使用。

在生产中，您将从bundle.js中运行代码，生成的代码将不再需要这些依赖项。

- Zohaib Ijaz

---

在生产环境中，您的构建或部署文件夹将包含已通过 Babel 转译为 ES5 的内容。因此，您实际上不需要它们来运行应用程序。 - semuzaboi

一个例外是babel-polyfill，因为它在运行时需要polyfill：https://babeljs.io/docs/usage/polyfill/ - HaoCS

@HaoCS，我看到Babel的文档说要将babel-polyfill放在依赖项中，但我不明白为什么。一旦运行构建，捆绑包不会包含它吗？我认为它可以放在devDependencies中，没有理由不这样做。希望能得到更多的见解。 - The Qodesmith

针对 Harkirat 的问题（以及回答该问题的评论），有一些假设关于你如何部署。当人们说“Babel 是开发依赖项”时，他们希望你将编译后的 Babel 代码提交到 Git（或者你使用的其他工具）中，然后将编译后的代码部署到你的服务器上。在这种情况下，Babel 是开发依赖项，因为它从不在服务器上运行。但是，如果你提交普通的代码，并在服务器上运行 Babel，则可能不需要它作为开发依赖项，因为服务器需要它。 - machineghost

当涉及到前端项目时，这种做法完全适用于NodeJs环境，但人们可以有不同的想法。事实是，对于前端项目，你只需要打包文件而不需要任何包，无论是Webpack、Babel还是React都是如此。在我的项目中，我将构建生产打包所需的所有内容存储在“dependencies”中，而我在开发中使用的工具则存储在“devDependencies”中。这意味着Webpack最终会出现在“dependencies”中，Jest则会在“devDependencies”中。 - Aleksandr

Answer 2

虽然基本上每个人都这么说，但我提供一点理性的建议... 这实际上非常简单：

你的项目将被另一个项目npm install吗？即你是否正在编写npm模块？它最终会出现在另一个项目的package.json中吗？

没有？

那么把所有内容都放在dependencies里。

是的？

• dependencies: 您希望向下游消费者和项目开发人员安装您的项目的东西
• peerDependencies: 您的下游用户需要确保已经安装了的东西
• bundleDependencies: 您的下游用户将需要的东西，并且不需要单独安装，因为当您使用npm publish时，这些会与您的软件包一起“捆绑”。
• optionalDependencies: 可以有的东西，但缺少它不会造成致命错误。
• devDependencies: 只在开发项目时使用的内容。

简言之，模块并不会以神奇的方式被安装。它们要么被安装要么没有被安装。

- airtonix

---

对于一个普通的应用（不是npm库），将所有东西都放在dependencies中意味着你的开发工具将与你的应用一起部署到生产环境中。这是个坏主意。 - jfroy

@jfroy，请问您能否确认一下这个问题？提供一个来源链接。我记得我们的其中一位 JS 开发人员曾经提到，webpack 在构建和打包 JS 代码时，会检查某个包是否被导入，然后决定是否应该对其进行打包。不过，像 babel 这样的包可能不太可能被导入并在应用代码中使用，对吧？在这种情况下，即使 babel 被添加到依赖项中，它也不会被打包，对吧？谢谢。 - Jeff Chen

请查看npm文档中的定义：https://docs.npmjs.com/files/package.json#dependencies。他们明确警告不要将转译器放在依赖项中。Webpack和其他打包工具所使用的树摇技术确实会在生产构建中删除未使用的代码，从而删除任何错误分配的开发依赖项，但是此答案中没有明确说明他们依靠这一点来证明一个含糊不清的package.json的合理性。 - jfroy

我们使用Docker多阶段构建。因此，您提出的任何问题都不相关。实际上，唯一最终用于生产环境的是输出的js/css/png等捆绑包。事实上，您为了解决前端依赖关系而做的努力根本不值得这样做。 - airtonix

这样做将使仅针对生产模块进行漏洞审计变得不可能。 - OZZIE

Answer 3

开发依赖是仅用于开发服务器的依赖项，这些是devDependency： 所有未在源代码中使用或导入的软件包都是devDependencies

"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.8.3",
"optimize-css-assets-webpack-plugin": "^4.0.0",
"prop-types": "^15.6.1",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "^4.6.0",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.9"

- Shubham Laad

---

这些都是构建该应用程序所必需的。这完全取决于您构建应用程序的位置。 - earl3s

与开发服务器无关，devDependencies 用于开发环境。 - Saeed Hemmati