南昌it制作电商网站的公司,wordpress主题柚子皮,seo服务哪家好,百度企业信用前言
整理了最近的闲聊#xff0c;话题是前端各个包管理器#xff0c;如果分享的不对或者有异议的地方#xff0c;麻烦请及时告诉我~
耐心看完#xff0c;也许你会有所收获~
概述
本文阅读时间#xff1a;10-15分钟左右#xff1b;
难度#xff1a;初级#xff0c…前言
整理了最近的闲聊话题是前端各个包管理器如果分享的不对或者有异议的地方麻烦请及时告诉我~
耐心看完也许你会有所收获~
概述
本文阅读时间10-15分钟左右
难度初级最好对Node有一个基础认知
通过本文你能大致知道
npmpnpmyarn这些包管理工具的介绍及一些常用命令nrm
包管理器
再说npm之前相信你一定知道node了吧~npm是node自带的包管理器也就是说如果安装了node那么你本地就一定会被一起安装npm接下来我们再来聊聊npm
npm是node的一个 包管理器这里就出现了一个名词“包管理器”管理器我们能理解那么包是什么直接看一个图吧以Vue为例 现代化脚手架搭建的项目往往在根目录存在这么一个文件夹node_modules这个文件夹就是我们存储包的地方当我们的项目从npm上下载了一些插件、组件工具库等最终都会以包的形式存在于这个node_modules里举个例子吧比如我们通过安装命令
npm install typescript
安装了typescript那么在node_modules里一定会存在和typescript相关的包如下图 到这里相信你对“包管理工器”这个名词有一定的了解了那么接下来我们聊聊这几个不同的包管理工具
npm和cnpm
好了知道了“包管理器”我们就好聊这几款不同的包管理工具了首先是绝对的元老npm即 node package managernpm是node自带的也是最初的包管理器当然由于是node自带的因此对node的兼容性毫无疑问是最好的
npm在通过命令安装包的时候会将包单独的下载进项目的node_modules假如有两个项目都用到了typescript的1.0.0版本那么这两个项目下都会各自有完整的typescript1.0.0包好处是互不影响坏处是当项目多了之后浪费存储空间
当然国内由于众所周知的原因npm在国内使用很麻烦安装包的时候能不能安装安装速度完全看网络环境和天意为此阿里巴巴为国内的开发者推出了“淘宝镜像”也就是cnpm。
cnpm本质上就是npmcnpm是一个完整 npmjs.org 镜像同步频率目前为 10分钟
值得注意的是很多npm的缺点都是指的以前的npm但随着时间的流程npm也在更新迭代比如2015年发布的v3版本在这个版本中引入了扁平化依赖和并行安装的能力这使得npm和yarn等工具的差异性进一步缩小更不用说后面的V5版本了V5版本修改了几乎所有的常见问题显著的从架构上改善了其性能使其更稳定更好的容错性
常用命令
// 初始化npm
npm init
这个命令会在当前目录下初始化一个package.json的文件这个文件是记录所有包的地方想项目被别的用户/成员进行下载安装的时候npm就是根据这个文件记录的包进行逐一下载的 // 正常下载
npm install 包名 // 比如 npm install typescript// 简写
npm i 包名
// 安装指定版本1.0.0
npm i 包名1.0.0// 安装到正式环境
npm i 包名 -S
// 等同于
npm i 包名 --save// 安装到开发环境
npm i 包名 -D
// 等同于
npm i 包名 --save-dev// 卸载
npm uninstall 包名// 查看npm版本
npm -v
安装包的过程就是把包以及包相关的代码从npm库里下载到本地的过程下载安装的位置就是node_modules卸载后包相关文件会被删除并且该记录会被从package.json中移除
yarn
yarn是facebook发布的一款包管理工具其目的是为了解决一些npm上存在的问题比如最开始的时候npm没有package-lock.json这个锁版本的功能这个是由yarn推出的后续被npm借鉴吸纳
和npm相比yarn在以下几个地方有了明显的改进
执行效率npm是按包顺序执行下载而yarn则是多任务同时进行这就带来了一个质变在没有任何包缓存的情况下yarn的速度是远远超过npm的虽然npm在V3版本之后引入了并行能力但还是yarn更快一点安装版本统一具有确定性由于lock文件的存在不同机器安装项目的时候可以确定下载的包是同一个当然现在npm也具有这个功能了;安装机制更合理一些如遇到网络等问题单个包的安装请求失败并不会导致整个项目的安装失败
其实发展到今天随着npm v5的发布个人体感yarn和npm有差异但差异没那么明显
常用命令
// 查看版本
yarn -v// 安装包
yarn add 包名
// 安装指定版本1.0.0
yarn add 包名1.0.0// 安装到测试环境
yarn add 包名 --dev// 卸载包
yarn remove 包名
pnpm
pnpm和npm/yarn就有点不同了官网的意思是比npm更快更省空间的包管理工具原文如下 使用 npm 时依赖每次被不同的项目使用都会重复安装一次。 而在使用 pnpm 时依赖会被存储在内容可寻址的存储中所以 如果你用到了某依赖项的不同版本只会将不同版本间有差异的文件添加到仓库。 例如如果某个包有100个文件而它的新版本只改变了其中1个文件。那么 pnpm update 时只会向存储中心额外添加1个新文件而不会因为仅仅一个文件的改变复制整新版本包的内容。所有文件都会存储在硬盘上的某一位置。 当软件包被被安装时包里的文件会硬链接到这一位置而不会占用额外的磁盘空间。 这允许你跨项目地共享同一版本的依赖。 因此您在磁盘上节省了大量空间这与项目和依赖项的数量成正比并且安装速度要快得多 并且不止如此pnpm安装创建的node_modules并非npm那种扁平化的目录结构而是嵌套的 这有什么好处最明显的好处就是 非扁平化的结构极大的减少了包冲突以及包被覆盖的风险
常用命令
// 安装pnpm
npm install -g pnpm// 正常下载
pnpm install 包名 // 比如 npm install typescript// 简写
pnpm i 包名
// 安装指定版本1.0.0
pnpm i 包名1.0.0// 安装到正式环境
pnpm i 包名 -S
// 等同于
pnpm i 包名 --save// 安装到开发环境
pnpm i 包名 -D
// 等同于
pnpm i 包名 --save-dev// 卸载
pnpm uninstall 包名// 查看npm版本
pnpm -v
nrm
nrm是一块源管理工具通过nrm可以快速的管理各个包管理工具的源如下图 安装nrm
npm i -g nrm // 全局安装
使用nrm修改源为淘宝源
nrm use taobao
扩展知识-版本号说明
通常我们在package.json中看到的包的记录是这个样子的
dependencies: {lodash: ^4.17.21,pinia: ^2.0.36,uview-plus: ^3.1.36,vue: ^3.2.45,vue-i18n: ^9.1.9,},
以lodash为例
lodash: ^4.17.21
可以看到这是一组键值对其中
lodash代表着包的名字这个包就叫做lodash^4.17.21这个串代表着lodash的版本号我们通过版本号来区分不同的版本版本号不是随便起的我们通常约定如下主版本号 . 子版本号 [. 修正版本号[ build- 编译版本号 ]]
如果有兴趣的小伙伴可以看我的这两篇博文有详细解释
package.json版本说明及各类版本符号详解一
package.json必须掌握的字段知识二
小结
其实发展到今天个人体感没有说哪个包管理工具就一定好再好也只是一个协助我们开发的工具哪个用的顺手哪个对你而言用的方便就用哪个没必要纠结到底哪个好哪个不好
