关于npm和yarn在react项目中的应用
今天导入第一个已经搭好框架的react项目,在包管理工具方面踩了一些坑,现做一些总结。
由于我自己的电脑是用的npm工具,学姐的框架用的是yarn,所以我在拉取新的更新的时候出现了问题,最开始是无法拉取,因为本地的package.json文件和git上的内容有冲突所以拉取失败,我先是用git stash将本地的package.json文件储藏在堆栈中,再git pull拉取项目。拉取项目之后运行结果样式加载不出来,原因是有一个包react-loadable不存在。查询官网看到这个包只能通过yarn命令yarn add react-loadable下载。但我的环境不支持yarn,所以就先去下载了yarn,配置之后需要重启vscode才可以yarn --version显示版本号惹。
(yarn是Facebook在16年开源的一个替代npm的js包管理工具)
最后的解决方法总结来说就是用yarn替换npm管理项目。
yarn和npm不要混用,因为yarn install自动生成的yarn.lock而npm install自动生成的package-lock.json会互相影响冲突
yarn.lock文件包含yarn需要锁定整个依赖关系树中所有包的版本的所有内容
package-lock.json文件的作用就是锁定安装时的包的版本号,并且需要上传到git,以保证其他人在npm install时大家的依赖能保证一致。
(不管是yarn还是npm都需要在node.js环境下)
Yarn是一个快速可靠安全的依赖管理工具。
主要的三个特点:
极其快速,Yarn会缓存它下载的每个包,所以无需重复下载。它还能并行化操作以最大化资源利用率。
特别安全,Yarn会在每个安装包被执行前校验其完整性
超级可靠, Yarn使用格式详尽而又简洁的lockfile文件和确定性算法来安装依赖,能够保证在一个系统上的运行的安装过程也会以同样的方式运行在其他系统上
使用:
初始化项目 yarn init和npm init一样会创建package.json文件
安装依赖 yarn add react react-dom react-loadable 新建一个node_modules目录和yarn.lock文件
npm install xxx --save 新建一个node_modules目录