npm简介

npm（Node Package Manager）Node包管理工具，用于管理一些工具包的下载，同时我们也可以上传自己的包供其他人下载使用。官网

我们发布的包都存在registry上面，当然我们也是从这里下载。

项目配置文件

我们每个项目都有一个项目配置文件一般为package.json，这个文件记录了项目的名称，版本号，描述等信息。

常见的前端脚手架工具如vue-cli，create-react-app都会自动创建配置文件，而我们自己要手动创建配置文件可以使用如下命令。注意：安装了node就会自动安装npm。

//初始化配置文件，后续需要自己选择初始化配置
npm init

//立马生成一个有默认配置的配置文件
npm init -y

配置文件中的常见属性

{
  "name": "npmdemo",//项目名称
  "version": "1.0.0",//版本号
  "description": "",//项目描述
  "main": "index.js",//入口文件
  "scripts": {//项目的执行脚本
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "heng": "npx webpack --version"
  },
  "author": "zhangheng",//作者
  "license": "ISC",//开源协议
  "dependencies": {//无论开发环境还是生成环境都需要依赖的包
    "axios": "^0.21.1",
    "npm": "^7.11.2"
  },
  "devDependencies": {//开发环境才需要的包
  
  }
}

版本管理的问题

我们会发现一些版本号是以下格式^2.0.3或~2.0.3.。

npm的包同窗需要遵守semver版本规范,语义化版本

npm install命令

安装npm包有两种情况，全局安装和局部安装。

全局安装方式：

npm install xxx -g

全局安装一般是安装一些全局工具，能够全局使用命令行工具执行，一般为webpack，vue-cli，yarn 等工具。

局部安装方式：

npm install xxx

局部安装还有另外两种情况，如果安装的包只在开发阶段使用可以在后面加上后缀 -D，如果开发和生产环境都使用就使用后缀-S。

npm install -D
npm install -S

npm install 原理

我们发现现在项目还多出来了package-lock.json文件。

这个文件主要作用是优化下载。npm包下载流程如下：

npm5之前是不支持缓存策略的，但是迫于yarn(对应yarn.lock)，现在npm也有了。

原理图解析：

没有lock文件

1. 首先分析依赖文件，有可能一个包会依赖其他的一些包，多个包可能会依赖相同的包。
2. 然后从仓库下载压缩文件并添加缓存然后解压到node_modules中去。

有lock文件

1. 检查lock文件版本和package.json中的版本是否一致，不一致就会重新分析构建依赖关系走顶层流程
2. 如果一致就查找本地缓存然后解压添加到node_modules中去。

npm其他命令

CLI commands

卸载某个包

npm uninstall package
npm uninstall package -S
npm uninstall package -D

强制重新build

npm rebuild

清除缓存

npm cache clean

yarn简介

yarn是另一个Node的包管理工具，由Facebook、Google、Exponent 和 Tilde联合出品。

yarn主要是为了弥补npm的一些缺点而产生的，其基本用法和npm相似。

yarn cli

cnpm简介

因为国内的一些特殊原因，导致我们通过npm原来的源下载包会很慢。我们可以设置镜像源来提升下载速度。

查看镜像：

npm config get registry

设置镜像：

npm config set registry https://registry.npm.taobao.org

但是有时候我不想修改npm的镜像，就可以使用另一个工具cnpm，并将cnpm设置为淘宝镜像。

cnpm下载和镜像设置：

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm config get registry

之后我们使用npm就可以用cnpm代替了

npx工具

这个工具作用主要是用来掉要那个项目中的某个模块命令。

比如我全局安装的是webpack5，如果我在控制台直接执行如下命令：

webpack --version

打印出来的版本号就是5，因为当前目录找不到webpack所以就去全局找。

而如果我在当前目录下局部安装了webpack4，我在使用时候想使用局部安装的webpack4，就有两种方式：

第一种

明确查找到node_modules下面的webpack，然后再执行，或者在scripts定义脚本然后执行。

直接执行：

./node_modules/.bin/webpack --version

修改scripts中的脚本再执行：

"scripts": {
  "webpack": "webpack --version"
}

npm run webpack

第二种

使用npx

npx webpack --version

npx的原理非常简单，它会到当前目录的node_modules/.bin目录下查找对应的命令。