install dependency in create rea
2017-08-31 本文已影响62人
张培_
情景描述
- 首先在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文件,这里面记录了安装的版本相应依赖树状结构,安装的版本是最新的。 - npm使用install的时候不会再安装最新版本的dependency会根据
-
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
- 每个问题从表象到求教，必须经过每日总结完了之后才能问，要不都没有自己的思考过程，就算的到了答案也未必能记住。
