怎么找到并删除无用依赖,CRA为何生成巨大node_modules

1,394 阅读2分钟

阅读这篇文章可以了解到:

  • npm list命令

  • npm run eject命令

  • npm dedupe命令

  • react-scripts

  • 怎么找到并删除 package.json 无用依赖

事情是这样的。

使用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 的一个核心包,大部分脚本和工具的默认配置都集成在里面。

后续了解到:

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 安装工具

  • npm-check 可以看到提示NOTUSED未被使用的,和MISS的

  • npm uninstall xxx 删除无用的依赖

目前没找到自动批量删除的命令,有小伙伴知道的话欢迎讨论~

参考文档:

官方文档 npm run 命令:create-react-app.dev/docs/availa…

npm dedupe:docs.npmjs.com/cli/v8/comm…