在生产中 React 中的 devDependencies 应该有哪些依赖关系

Question

我遇到 node_modules 的大小问题，所以我试图尽可能地减少它，所以我现在的解决方案是在构建到 devDependencies 后将未使用的依赖项放在生产中。所以我想知道在 create-react-app 中 devDependencies 中可以放入哪些依赖？

现在我的 package.json 中的依赖项看起来像这样

"dependencies": {
   "@babel/runtime": "^7.13.10",
   "@pathofdev/react-tag-input": "^1.0.7",
   "@testing-library/jest-dom": "^5.11.4",
   "@testing-library/react": "^11.1.0",
   "@testing-library/user-event": "^12.1.10",
   "axios": "^0.21.1",
   "express": "^4.17.1",
   "generate-password": "^1.6.0",
   "jquery": "^3.6.0",
   "react": "^17.0.2",
   "react-dom": "^17.0.2",
   "react-icons": "^4.2.0",
   "react-router-dom": "^5.2.0",
   "react-scripts": "4.0.3",
   "react-select": "^4.3.1",
   "react-toastify": "^7.0.4",
   "recoil": "^0.3.1",
   "web-vitals": "^1.0.1"
 },
 "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/plugin-transform-runtime": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "@babel/preset-react": "^7.14.5",
    "autoprefixer": "^10.1.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.3.0",
    "html-webpack-plugin": "^5.3.2",
    "postcss": "^8.2.1",
    "postcss-loader": "^4.1.0",
    "style-loader": "^3.3.0",
    "webpack": "^5.57.1",
    "webpack-cli": "^4.9.0",
    "webpack-dev-server": "^4.3.1"
 },

Answer 1

所以在高级别 devDependencies 是您的测试/笑话/打字稿代码或@type 文件之类的东西 - 您的生产应用程序不需要的东西。我怀疑您的用户是否需要运行开玩笑 (@testing-library/jest-dom)。这些都是用于编译代码的节点包。

dependencies 是您的应用在生产环境中实际依赖的东西，因此生产应用程序将/应该可能不想安装 jest，也不会运行ning 打字稿 - 它只关心编译后的代码，即 javascript 和 JS 需要的那些包 - axios / express / react 等。您可以将所有包放在 dependencies 对象中，但它会减慢你的应用程序并可能打开漏洞因此 devDependencies。

如果您不标记，

node_modules 包含所有这些包。

当运行ning npm install 时，您的捆绑应用程序应该包含 --production 标志。

如有错误欢迎指正！

https://nodejs.dev/learn/npm-dependencies-and-devdependencies

在生产中 React 中的 devDependencies 应该有哪些依赖关系

What dependencies should be in to devDependencies in React on production

node-modules

reactjs