Node 之包管理工具

配置后可以通过 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

CLI Commands | npm Docs

二、包管理工具 - 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中存储着的是包硬连接
- 不管是手动安装的包还是依赖的包，都存在于此
各个项目都是如此，这样文件实际上只存储着一份，但是可以通过硬连接拿到，相当于是同一个地址，会大大的节省空间