阅读这篇文章可以了解到:
- npm list 命令
- npm run eject 命令
- npm dedupe 命令
- react-scripts
- 如何删去无用依赖
事情是这样的。
使用create-react-app(CRA)搭项目,没有选择项默认执行完,发现package-lock.json有一万多行,安装的node_modules包巨大。

但是我不需要那么多依赖呀。看了一下package.json

我一开始是把package.json里看起来多余的都去掉,重新npm install。


可以看到,重新npm i,看起来对应remove了一些,但很明显并没有起到决定性作用,node_modules文件看起来还有一堆不需要的包。
现在再来看看dependencies中幸存的三个,前两个不说了,第三个 react-scripts 不确定是什么。
删掉试试。
好了,就是它了。

总结:
react-scripts 是 create-react-app 的一个核心包,大部分脚本和工具的默认配置都集成在里面。
一开始@Hokori 建议看CRA源码,我把源码clone下来后全局搜索react-scripts,2042个结果?不知道从哪里看起。
放弃,还是google吧。
后续还了解到:
npm run eject 命令
- 命令执行后会将封装在 create-react-app 中的配置、所有依赖文件和相应的依赖(webpack、babel等)全部反编译到当前项目,这样用户就能完全取得 webpack 文件的控制权。所以,eject 命令存在的意义就是更改 webpack 配置。
- 这是单项操作,一旦 eject ,就回不去了。
- 如果想要回到正常的项目中去,只有重新 npm install create-react-app -g 了
什么情况下使用?
npm ls 命令
- 查看所有已安装 npm 包的版本,包括它们的依赖项

等等,deduped是什么意思?
- deduped是“去重”的缩写,删除重复数据。图中表示此依赖项在不同层级被重复依赖了,提示可以不需要重复安装。
- 在依赖关系图中的每个被标记 deduped的包,都可以在图中至少再找到一次,通常位于更高的级别。
- 可以执行npm dedupe,此命令会调整重复的依赖项的层级,避免重复安装导致包体积不必要的增大。
简化命令
- npm dedupe -> npm ddp
- npm list -> npm ls
想删掉多余的依赖包怎么办?
npm install -g npm-check 安装check工具
npm-check 可以看到提示NOTUSED未被使用的,和MISS的
npm uninstall xxx 删除无用的依赖

目前没找到自动批量删除的命令,有小伙伴知道的话欢迎讨论~
参考文档:
官方文档 npm run 命令:https://create-react-app.dev/docs/available-scripts/
npm dedupe:https://docs.npmjs.com/cli/v8/commands/npm-dedupe