install dependency in create react app project lead to build-script uninstal

情景描述

• 首先在create-react-app的project执行npm start项目
• 然后在create-react-app的project中npm install react(只是一个例子，代表那些create-react-app中已经安装的dependency)
• 然后安装log中不仅会出现一堆warning还有removed *** packages
• 安装完毕之后执行npm start
• 报错：Cannot find module webpack

问题解决

• Q1:为什么webpack会找不到？
• A1:首先webpack在安装react之前一定存在。因为安装react之前可以被正常打包。说明安装react的时候remove的dependency中一定存在webpack。

---

• Q2:那么安装react为什么会导致webpack被remove？
• A2:不能理解为什么，我尝试先把webpack install回来，看不看能不能start服务器。发现安装过程中又remove了很多dependency，导致重启服务器又出现报错Cannot find module 'webpack-dev-server'

---

• Q3:那么到底为什么会导致在项目中安装一个dependency可能就remove了其他dependency？
• A3:发现安装webpack之后，和webpack相关的包就找不到module了,create react app提前已经帮助我们安装好了所需要的很多dependency了。发现项目中有一个文件package-lock.json发现里面规定了安装的所有dependency的版本号。

---

• Q4:这个文件是什么有什么作用，出现这样的问题是不是和这个文件有关？

• A4:发现这是新版本npm的特性。npm的特性如下:

  npm5.0版本功能：

  • npm使用install的时候不会再安装最新版本的dependency会根据package-lock.json的版本进行安装
  • npm install 在新的npm中等价于npm install --save
  • 默认新增 package-lock.json 来记录依赖树信息，进行依赖锁定.

  重新load一个creat react app项目发现他的版本锁定使用的是yarn，那么说明，由于我使用npm install 了react导致我产生了一个package-lock.json文件,这里面记录了安装的版本相应依赖树状结构,安装的版本是最新的。

---

• Q5:那么到底为什么使用新的npm安装之后导致其他dependency的移除?

• A5:找到了解决办法，移除package-lock.json然后npm install既可以启动。实在想不通原因但是又进一步发现：

  • 1.使用yarn add react不会出现问题，说明完全按照yarn.lock版本安装不会出现任何错误
  • 2.一旦使用npm 安装立刻就会出错，所以确定问题出现在新版本的npm上。
  • 3.移调了lock我们只能完全按照package.json版本安装不会出现问题，那么说明最后问题锁定在package-lock.json文件上。

  可是我找了很多资料依然无法找到原因，只能明天求救啦~

---

问题出现原因

• 由于yarn和package.json安装dependenvy的时候会构造不同的dependency树状结构，因此我们通常要求yarn和npm不可以混用。

反思

• 上次遇到这个问题描述的给老师的时候说，因为安装某个东西导致另一个东西没有了。这个描述太可笑，太表面，任何的问题，在没有确定到问题出现在哪里，光拿表面现象去问问题是一种不想动脑子的表现。

action

• 每个问题从表象到求教，必须经过每日总结完了之后才能问，要不都没有自己的思考过程，就算的到了答案也未必能记住。