如何在 reactjs 中管理供应商库

Question

在我的 react js 应用程序（使用 webpack）中，我使用了antd UI，它在我的项目中添加了 draft-js 包。但我不知道我在哪里使用 draft.js
我有两个问题。
1-我怎么知道我在哪里使用了 Draft-js。
2-draft.js 增加我的bundle 文件大小。我从我的node_modules 中删除了draft-js，它显示错误“draft-js”未找到。

package.json

"dependencies": {
    "antd": "^3.10.9",
    "axios": "^0.18.0",
    "bundle-loader": "^0.5.6",
    "express-static-gzip": "^1.1.3",
    "moment": "^2.22.1",
    "node-sass": "^4.7.2",
    "normalize.css": "7.0.0",
    "npm": "^6.1.0",
    "rc-time-picker": "^3.3.1",
    "react": "16.0.0",
    "react-dom": "16.0.0",
    "react-ga": "^2.5.3",
    "react-google-maps": "^9.4.5",
    "react-loadable": "^5.5.0",
    "react-redux": "^5.0.7",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "recompose": "^0.27.1",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },

和 immutable.js 安装两次另一件事是，在做了 gzip 之后，还有 antd 和 @ant-design 库增加了我的 捆绑大小。

那么我该如何解决这些烂摊子。

Answer 1

要回答您的主要问题，draft-js 是您的应用程序的传递依赖项。要确定它的使用位置，您需要查看依赖它的直接依赖项的代码（最好是源代码）。在这种情况下，那就是 antd@^3.10.9。

虽然有特定的例外，但通常不可能有直接依赖关系而不传递依赖于它的依赖关系。

为了解决在不同版本中多次安装 ImmutableJS 的感知问题，应用相同的逻辑。当您的两个或多个依赖项对同一包的非重叠版本具有传递依赖时，您最终会安装该包的多个版本。如果没有这种行为，您的依赖项将无法正常工作。

换句话说，将单个包的不兼容版本视为单独的逻辑包。

话虽如此，使用某些工具（如 RequireJS 和 SystemJS 等）覆盖传递依赖项是可能的，例如强制它们使用 ImmutableJS 的共享版本。然而，这种方法虽然强大，但必须非常小心地使用，因为它们可能确实依赖于特定于它们最初指定的版本的行为。