目录
一、包管理工具 - npm
1. 概念
01 - npm
包管理工具npm :
- Node Package Manager,也就是Node包管理器
- 但是目前已经不仅仅是Node包管理器了,在前端项目中也在使用它来管理依赖的包
- 比如vue、vue-router、vuex、express、koa、react、react-dom、axios、babel、webpack等等
npm管理的包存放 :
- 我们发布自己的包其实是发布到registry上面的
- 当我们安装一个包时其实是从registry上面下载的包
02 - 下载
下载和安装npm : node管理工具 => Node.js,安装Node的过程会自动安装npm工具
03 - 查看
查看、搜索npm管理的包 : npm
2. npm的配置文件 package.json
npm通过配置文件来管理包 :
- 配置文件会记录项目的名称、版本号、项目描述等
- 也会记录项目所依赖的其他库的信息和依赖库的版本号
01 - 生成配置文件
方式一 : 手动从零创建项目,npm init + 填信息 + 回车 || npm init -y
方式二 : 通过 npm install 安装包,会自动生成
方式二 : 通过脚手架创建项目,脚手架会自动生成package.json,并且里面有相关的配置
02 - 配置文件的属性
基本属性
- name : 项目的名称,必填属性
- version : 当前项目的版本号,必填属性
- description : 描述信息,很多时候是作为项目的基本描述
- author : 作者相关信息(发布时用到)
- license : 开源协议(发布时用到)
- private : 记录当前的项目是否是私有的
- 当值为true时,npm是不能发布它的,这是防止私有项目或模块发布出去的方式
常见属性
main属性 : 设置程序的入口
- 比如使用dayjs模块 const axios = require('dayjs');
- 如果有main属性,实际上是找到对应的main属性查找文件
- 如果没有,默认会去找index.js,你懂得
scripts属性 : scripts属性用于配置一些脚本命令,以键值对的形式存在
- 配置后可以通过 npm run 命令的key来执行这个命令
- npm start和npm run start的区别是什么
- 是等价的
- 对于常用的 start、 test、stop、restart可以省略掉run直接通过 npm start等方式运行
- 对于自己编写的key,需要加上run,否则会报错
dependencies : 指无论开发环境还是生成环境都需要依赖的包
- 不管 本地 + 线上,都需要的包
- 例 : vue、vuex、vue-router、react、react-dom、axios等
- 安装 => npm install axios || npm install axios --save 指同一个意思
devDependencies : 只在开发阶段使用,线上(生产)环境不需要的包
- 在生成环境是不需要的,比如webpack、babel等
- 安装 => npm install webpack --save-dev || npm install webpack -D
peerDependencies : 安装的这个包,必须依赖另一个包时
- 比如element-plus是依赖于vue3的,ant design是依赖于react、react-dom
03 - 依赖的版本管理
npm的包通常需要遵从semver版本规范
- semver : 语义化版本 2.0.0 | Semantic Versioning
- npm semver : semver | npm Docs
semver版本规范是X.Y.Z :
- X主版本号 ( major ) : 当做了不兼容的 API 修改 ( 可能不兼容之前的版本 ) ,大版本更新
- Y次版本号 ( minor ) :当做了向下兼容的功能性新增 ( 新功能增加,但是兼容之前的版本)
- Z修订号 ( patch) :当做了向下兼容的问题修正(没有新功能,修复了之前版本的bug)
^ 和 ~ 区别 :
- x.y.z:表示一个明确的版本号
- ^ x.y.z:表示x是保持不变的,y和z永远安装最新的版本
- ~ x.y.z:表示x和y保持不变的,z永远安装最新的版本
3. npm install 命令
全局安装
全局安装(global install): npm install webpack -g
- 全局安装是直接将某个包安装到全局
- 会自动添加到环境变量中,可在任何地方使用命令
局部安装
项目(局部)安装(local install):npm install webpack
- 在当前目录下生成一个 node_modules 文件夹
- 局部安装分为开发时依赖和生产时依赖
ps : 安装指定版本 npm i webpack@3.6.0 -D
4. npm的配置文件 package-lock.json
- name : 项目的名称
- version : 项目的版本
- lockfileVersion : lock文件的版本
- requires : 使用requires来跟踪模块的依赖关系
- dependencies : 项目的依赖
- 当前项目依赖axios,但是axios依赖follow-redireacts
- axios中的属性如下
- version : 表示实际安装的axios的版本
- resolved : 用来记录下载的地址,registry仓库中的位置
- requires/dependencies : 记录当前模块的依赖
- integrity : 用来从缓存中获取索引,再通过索引去获取压缩包文件
5. npm其他常用命令
卸载某个依赖包 :
- npm uninstall package
- npm uninstall package --save-dev
- npm uninstall package -D
强制重新build :
- npm rebuild => 强制安装所有依赖
清除缓存
- npm cache clean
二、包管理工具 - yarn
整体来说和npm差不多,就是一些命令略有不同
- yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具
- yarn 是为了弥补 早期npm 的一些缺陷而出现的
- 早期的npm存在很多的缺陷,比如安装依赖速度很慢、版本依赖混乱等等一系列的问题
- 虽然从npm5版本开始,进行了很多的升级和改进,但是依然很多人喜欢使用yarn
三、包管理工具 - cnpm
由于一些特殊的原因,某些情况下我们没办法很好的从 https://registry.npmjs.org下载下来一些需要的包,有时候下载包的时候会很卡很慢
1. 不推荐
查看npm镜像 : npm config get registry # npm config get registry
直接设置npm的镜像 : npm config set registry https://registry.npm.taobao.org
2. 推荐
不希望将npm镜像修改了
可以使用cnpm,并且将cnpm设置为淘宝的镜像
安装的时候就改镜像地址 :
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装后修改镜像地址 :
1. 安装 => npm install cnpm -g
2. 修改 => cnpm config set registry=https://registry.npm.taobao.org
3. 查看 => cnpm config get registry
四、npx工具
npx是npm5.2之后自带的一个命令
npx的作用非常多,但是比较常见的是使用它来调用项目中的某个模块的指令
栗子 🌰
以webpack为例 :
- 全局安装的是webpack5.1.3
- 项目安装的是webpack3.6.0
如果在终端执行 webpack --version使用的是哪一个命令呢?
- 显示结果会是 webpack 5.1.3,事实上使用的是全局的,为什么呢
- 原因非常简单,在当前目录下找不到webpack时,就会去全局找,并且执行命令
解决
如何使用项目(局部)的webpack
方式一
明确查找到node_module下面的webpack
进入./node_modules/.bin/目录下,执行webpack命令
方式二
修改package.json中的scripts
// package.json中的scripts会自动去找 ./node_modules/.bin 目录下找webpack
"scripts": {
"webpack": "webpack --version"
}
/**
如果node_modules有,就使用局部的
如果node_modules没有,才使用全局的
*/
方式三
使用npx => npx webpack --version
npx的原理非常简单
- 会到当前目录的node_modules/.bin目录下查找对应的命令
- 如果找不到,才会去全局查找
五、在npm上发布自己的包
1. 创建上传的文件内容
01 - 创建index.js
export { format } from './src/format.js';
export { sum } from './src/sum.js';
02 - 创建 src目录下 format.js
export function format() {
return '哈哈哈哈哈';
}
03 - 创建 src目录下 sum.js
export function sum(num1, num2) {
return num1 + num2;
}
2. 注册npm账号
- 进入网站 => npm
- 选择 => sign up
3. 在命令行登录
npm login
ps : 输入账号 + 输入密码 + 输入邮箱 + 输入验证码 + 回车
4. 修改package.json
{
"name": "xuanyu_go", // 包名
"version": "1.0.0", // 版本号
"description": "a test package", // 描述
"main": "index.js", // 入口
"keywords": ["text"], // 关键字
"author": "xuanyu", // 作者名
"license": "MIT" // 开源协议
}
5. 发布到npm registry上
npm publish
6. 更新仓库
1. 修改好文件
2. 修改版本号 => 如果不修改,发布不成功,修改时最好符合semver规范
3. 重新发布 => npm publish
7. 删除发布的包
npm unpublish 包名 --force
npm unpublish 包名@版本号 --force
ps :
删除库包之后,24小时之内无法再次上传同名的库包到npm
需要更改包名,或者等过了24小时之后在上传
8. 让发布的包过期
npm deprecate 包名 '描述'
npm deprecate 包名@版本号 '描述'
六、包管理工具 - pnpm
pnpm : 可以理解成是 performant npm => 高性能的npm
包括Vue在内的很多公司或者开源项目的包管理工具都切换到了pnpm :
1. 硬链接和软连接的概念
01 - 硬链接(hard link)
-
是电脑文件系统中的多个文件平等地共享同一个文件存储单元
-
删除一个文件名字后,还可以用其它名字继续访问该文件
02 - 软链接(soft link)
- 符号链接(软链接、Symbolic link)是一类特殊的文件
- 其包含有一条以绝对路径或者相对路径的形式指向其它文件或者目录的引用
03 - 栗子 🌰
2. pnpm的优势
01 - 用之前
当使用 npm 或 Yarn 时,如果有 100 个项目,并且所有项目都有一个相同的依赖包,那么, 在硬盘上就需要保存 100 份该相同依赖包的副本
02 - 用之后
依赖包将被存放在一个统一的位置 :
- 如果对同一依赖包使用相同的版本,那么磁盘上只有这个依赖包的一份文件
- 如果对同一依赖包需要使用不同的版本,则仅有 版本之间 不同的文件会被存储起来
- 所有文件都保存在硬盘上的统一的位置
- 当安装软件包时, 其包含的所有文件都会硬链接到此位置,而不会占用额外的硬盘空间
- 使得可以在项目之间方便地共享相同版本的 依赖包
3. pnpm创建非扁平的 node_modules 目录
01 - 用之前
02 - 用之后
自己安装的包
直接在 node_modules 目录下,并且是一个软连接
例如安装个axios => pnpm add axios
安装的包依赖的包
03 - 官方
4. 总结
pnpm : 通过软连接和硬连接实现了优化
- 通过pnpm安装的包都存储在同一个位置
- 项目中直接在 node_modules 目录下显示的包其实是软连接
- 只会显示我们手动安装的包
- 依赖的包会存在于.pnpm中
- 这样我们在项目中使用require时,就只能拿到我们自己手动安装的包
- 拿不到依赖的包,更合理
- .pnpm中存储着的是包硬连接
- 不管是手动安装的包还是依赖的包,都存在于此
- 各个项目都是如此,这样文件实际上只存储着一份,但是可以通过硬连接拿到,相当于是同一个地址,会大大的节省空间
5. pnpm的存储store
01 - 位置
在pnpm7.0之后,统一的存储位置进行了更改:<pnpm home directory>/store
- 在 Linux 上,默认是 ~/.local/share/pnpm/store
- 在 Windows 上: %LOCALAPPDATA%/pnpm/store
- 在 macOS 上: ~/Library/pnpm/store
获取当前活跃的store目录 : pnpm store path
从store中删除当前未被引用的包来释放store的空间 : pnpm store prune
02 - 图解
6. pnpm的安装和使用
01 - 安装
网址 : 安装 | pnpm 中文文档 | pnpm 中文网
直接 : npm install -g pnpm
02 - 使用
具体命令 : 配置 | pnpm