如何查找React应用特定文件夹内使用的第三方依赖包

你可以通过以下几种方式，找出React项目中某个特定文件夹内实际导入使用的第三方依赖包，区别于npm ls查看的全局已安装依赖：

1. 命令行快速搜索（无需额外工具） #

直接用系统自带命令递归扫描目标文件夹的代码，提取第三方导入：

grep -r "import.*from" ./src/your-target-folder \
  --include="*.js" --include="*.jsx" --include="*.ts" --include="*.tsx" \
  | grep -v "'./" | grep -v '"../' \
  | awk -F"from " '{print $2}' \
  | tr -d "'\"" \
  | sort | uniq

• 解释：递归搜索目标文件夹下的React/TS文件，排除本地相对路径的导入（./或../开头），提取并去重第三方包名。

2. 专用依赖分析工具 #

使用dependency-cruiser这类工具，支持更精准的依赖分析甚至可视化：

1. 全局安装工具：

npm install -g dependency-cruiser

2. 生成目标文件夹的第三方依赖列表：

depcruise --include-only "^src/your-target-folder" src/your-target-folder \
  --output-type json \
  | jq '.modules[].dependencies[].resolved' \
  | grep -v "^\\." \
  | sort | uniq

3. （可选）生成可视化依赖图：

depcruise --include-only "^src/your-target-folder" src/your-target-folder \
  --output-type html > folder-dependencies.html

打开生成的folder-dependencies.html，就能直观看到该文件夹的依赖关系，区分本地和第三方依赖。

3. IDE内置功能（适合小范围文件夹） #

如果用VS Code之类的IDE：

• 打开目标文件夹，使用查找全部功能（快捷键Ctrl+Shift+F），搜索import.*from，然后手动过滤掉包含.//../的本地导入结果；
• 安装插件如Dependency Viewer，可以直接查看单个文件或文件夹的依赖树，快速定位第三方包。

注意：以上方法都是静态代码分析，只会识别代码中实际写了import的第三方包，不会包含项目安装但未在该文件夹使用的依赖。

内容的提问来源于stack exchange，提问作者AspiringCanadian