NPM，让依赖更简单。

什么叫npm

npm是nodejs的包管理工具，在现如今产品化前端工程师全过程中，npm包起着至关重要的功效。

安装npm

做为nodejs的包管理工具，npm伴随着nodejs一起安裝的。一般状况下，在我们安裝进行nodejs之后，npm也就随着安裝了。

假如要更新npm，能够采用以下指令：

npm install npm -g

npm镜像

npm给予了官方网的镜像系统管理仓库: 官方网库房，假如我们要应用某一元件库，能够 在这个平台里面开展搜索，随后应用npm开展安裝。

因为中国的网络空间，一般 人们会设定淘宝网的镜像系统，设定方式 ：

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

要查询设定了什么主要参数，应用指令：

npm config ls

从这当中还可以见到环境变量的详细地址：C:\Users\Administrator\.npmrc

应用npm安装包

复位环境变量

在应用npm以前，要先复位npm的环境变量，应用以下指令：

npm init

这个时候会发生一个复位的正确引导cmd，使你键入项目规划、版本信息、创作者、协议书等，如果你觉得这种键入起來不便，能够 加上主要参数来应用初始值：

npm init --yes

应用之上指令，会在文件列表转化成package.json。下边是这一默认设置 环境变量的注解：

{
  "name": "demo1",      //名字
  "version": "1.0.0",   //版本信息
  "description": "",    //叙述
  "main": "index.js",   //通道文档
  "scripts": {          //脚本制作，key-value文件格式，能够应用 npm run xxx
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],       //关键词
  "author": "",         //创作者
  "license": "ISC"      //协议书
}

包版本信息

npm包的版本号取名文件格式为: major.minor.patch

• major: 主版本信息，新的架构调整，兼容问题老版本

• minor: 次版本信息，增加作用，兼容老版本

• patch: 修复版本信息，修补bug，兼容老版本

在我们安裝一个包以后，能够 见到包名的前边有一些标记，比如 ^、~等，这种标记决策了当今新项目依靠的包的版本信息如何选择

• 沒有标记，比如1.2.5，表明务必依靠1.2.5版

• ~：大约配对某一版本号，假如minor版本信息特定了，那麼minor版本信息不会改变，而patch版本号随意，假如minor和patch版本号未找到，那麼minor和patch版本号随意。

比如：

如：~1.1.2，表明>=1.1.2 <1.2.0，能够 是1.1.2，1.1.3，1.1.4，.....，1.1.n 
如：~1.1，表明>=1.1.0 <1.2.0，能够是跟上面一样
如：~1，表明>=1.0.0 <2.0.0，能够 是1.0.0，1.0.1，1.0.2，.....，1.0.n，1.1.n，1.2.n，.....，1.n.n

• ^：兼容某一版本号，版本信息中最左侧的非0数据的右边能够 随意，假如缺乏某一版本信息，则这一版本信息的部位能够随意
  比如：

如：^1.1.2 ，表明>=1.1.2 <2.0.0，能够是1.1.2，1.1.3，.....，1.1.n，1.2.n，.....，1.n.n
如：^0.2.3 ，表明>=0.2.3 <0.3.0，能够是0.2.3，0.2.4，.....，0.2.n
如：^0.0，表明 >=0.0.0 <0.1.0，能够是0.0.0，0.0.1，.....，0.0.n

其他的一些书写：

• >：务必超过某一版本号，如：>1.1.2，表明务必超过1.1.2版

• >=：可大于或等于某一版本号，如：>=1.1.2，表明能够 相当于1.1.2，还可以超过1.1.2版本号

• <：务必低于某一版本号 ，如：<1.1.2，表明务必低于1.1.2版本号

• <=：能够 小于或等于某一版本号，如：<=1.1.2，表明能够 相当于1.1.2，还可以低于1.1.2版本号

• x-range：x的地方表明随意版本号，如：1.2.x，表明能够 1.2.0，1.2.1，…..，1.2.n

• *-range：随意版本号，””也表明随意版本号，如：*，表明>=0.0.0的随意版本号

• version1 - version2：高于或等于version1，不大于version2，如：1.1.2 – 1.3.1，表明包含1.1.2和1.3.1及其她们件的随意版本号

• range1 || range2：达到range1或是达到range2，能够 好几个范畴，如：<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 ❤️.0.0，表明达到这3个范畴的版本号都能够

scripts

scripts连接点下配备的是能够 运作的脚本制作。比如在默认设置 配备中的test脚本制作，我们可以借助下边的指令来启用：

npm run test

假如我们要加上其他脚本制作，能够在scripts连接点加上键值对：

"scripts": {          //脚本制作，key-value文件格式，能够应用 npm run xxx
    "test": "echo \"Error: no test specified\" && exit 1",
    "dir": "dir"    //Windows下表明文件列表文档目录
}

随后应用npm来运作该脚本制作：

npm run dir

这儿就是为了更好地演试scripts脚本制作的使用方法，它的效果是为了能缓解我们在研发时的相同工作中。再举个事例，比如应用webpack装包，能够应用指令npx webpack --mode=production，如果我们每一次都应用详细的指令，会变得很繁杂，这时我们可以界定一个脚本制作来简单化实际操作：

"scripts": {          //脚本制作，key-value文件格式，能够应用 npm run xxx
    "test": "echo \"Error: no test specified\" && exit 1",
    "dir": "dir",    //windows下表明文件列表文档目录
    "build": "npx webpack --mode=production"
}

在大家研发的情况下，立即应用npm run build指令就可以。

dependencies 和 devDependencies

说白了，dependencies 是依靠的包，devDependencies 是研发时依靠的包。比如大家工程中采用了jQuery，很显而易见这也是新项目运作时必须的，那麼在加上包时，应用以下指令完成安裝：

npm install jquery

而针对webpack等在开发设计时要于搭建工程的包，大家仅在研发时使用，新项目运作时不可能应用，因而必须把他们加上到开发设计依靠中，加上方式 以下：

npm install webpack --save-dev

# --save-dev 能够 缩写为 -D，简单化后的指令以下：
npm install webpack -D

package.lock.json

我们在安装文件时，能够 见到它的版本号依靠，默认设置 是兼容大版本号就可以。这时会发生一个难题，便是在不一样的客户计算机中，复位的包的新版本有可能会发生不一样的状况，进而导致未可知的bug。为了更好地彻底解决这个问题（这也是yarn问世的一个缘故），npm在5.0以后引进了package.lock.json文档，用于固定不动包的版本号、包的服务器ip等信息内容，确保在不一样的客户开发工具中载入的是一致的包。

当客户应用npm install指令来安裝大家的依靠项时，会从package.lock.json文档中实现安裝。官方网文本文档：package.lock.json

安装文件

在我们从他人的源码复位安裝全部依靠的包时，应用以下指令：

npm install

在我们为工程加上新的包时，应用以下指令：

# 安装文件
npm install webpack --save

# 上边指令的主要参数 --save 为默认设置 选择项，能够 忽视，因而能够简单化为：
npm install webpack

# 全局性安裝
npm install webpack -g

# 安裝到开发设计依靠
npm install webpack -g --save-dev

# 上边这行指令还能够缩写为下边这一行
npm i webpackage -g -D

安裝特殊版本号的包：

npm install webpack@5.50.0

从特定的源安装文件：

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