删除 React 中未使用的依赖项

Posted 2023-02-22

【中文标题】删除 React 中未使用的依赖项

【英文标题】：remove unused dependencies in React

【发布时间】：2015-10-20 02:03:53

【问题描述】：

如何检测 React 项目中未使用的依赖项？我知道有 npm 包可以做到这一点，但它们只适用于普通的 js 项目，而不适用于 Reacts jsx 文件。是否有类似的包可以与 React 一起使用？

【问题讨论】：

如果你通过 babel 而不是 jsx-loader 运行 webpack，则不需要 jsx 文件类型。

我想使用 jsx 文件，我认为这是做 React 的好处之一。

您仍然可以使用 jsx 标记。但是 babel 不需要“.jsx”扩展名。

【参考方案1】：

try about depcheck,Depcheck是一个分析项目中依赖的工具，可以查看：每个依赖是如何使用的，哪些依赖是无用的，package.json中缺少哪些依赖。

注意：Depcheck 需要安装节点版本 > NODE 10

【参考方案2】：

您可以使用npm-check 查找项目中过时、不正确和未使用的依赖项。 安装后，您只需在终端中运行 npm-check 命令，它将列出您项目中依赖项的状态

【讨论】：

使用 yarn-check 而不是 NPM-CHECK 因为 yarn 是我的包管理器，但这个答案让我找到了它。效果很好，但不提供卸载选项

【参考方案3】：

使用 depcheck 跟踪依赖项

npm install -g depcheck

这会在您的系统上全局安装 depcheck。

在您希望检查依赖项的文件夹inside 运行以下命令。

depcheck

确保此文件夹包含 package.json 文件，否则 depcheck 将无法跟踪您的依赖项。

假设您安装了 react-bootstrap 包并且没有从中导入任何内容。

运行depcheck 给出以下输出：

Unused dependencies
* ...
* react-bootstrap
* ... 
Missing dependencies
* ...  

通常，您可以通过运行以下命令卸载任何 npm 包或依赖项：

npm uninstall <package_name>
npm uninstall react-bootstrap

npm-uninstall docs

【讨论】：

depcheck 是否可以将实际需要的包列为“未使用”？我得到了一个简短的 4 个列表，但感觉有几个实际上被其他包使用了。