一. 前言
1.npm是什么
官网:https://www.npmjs.cn/
npm是JavaScript的包管理器,也是世界上最大的软件注册中心。
NPM是随同NodeJS一起安装的包管理工具,包的结构使您能够轻松跟踪依赖项和版本。
NPM能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
2.为什么需要它
现代化前端开发中,需要用到很多别人写好的模块包。如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站,下载代码,解压,再使用的话非常繁琐。于是一个集中管理的工具应运而生。大家都把自己开发的模块打包后放到npm官网上,如果要使用,直接通过npm安装就可以直接用,不用管代码存在哪里,应该从哪里下载。
更重要的是,如果我们要使用模块A,而模块A又依赖于模块B,模块B又依赖于模块X和模块Y,npm可以根据依赖关系,把所有依赖的包都下载下来并管理起来。否则,靠我们自己手动管理,肯定既麻烦又容易出错。
3.怎么用
在安装了 node 之后,就可以使用 npm 命令了。
二.常用命令
1.初始化
在当前目录中生成package.json 文件(项目描述文件)
$ 没有别的意思,代表这些代码是终端运行的
$ npm init
$ npm init -y
二者都可以初始化生成package.json配置文件
npm init 会有很多提问让你输入当前配置项
npm init -y 直接跳过所有提问,生成默认的配置项
2.安装生产环境依赖包
生产依赖包指的是不管在开发时还是上线之后项目都需要使用到的。比如 jQuery、bootstrap、lodash 等。
//默认安装最新版本
$ npm install 包名
//安装指定版本 version版本,比如 npm install gulp@3.9.1
$ npm install 包名@ <version>
//安装指定的tag版本
$ npm install 包名@ <tag>
- npm install 可以简写成npm i
- 会写入到package.json 文件中的dependencies配置中.以前需要加 --save 或 -s参数.现在不需要了.
3.安装开发依赖包
开发依赖包指的是仅在开发过程中需要使用到的。比如 gulp、webpack、nodemon 等工具类型的依赖包。
//默认安装最新版本
$ npm install 包名 --save-dev
//安装指定的版本
$ npm install 包名@<version> --save-dev
//安装指定的tag版本
$ npm install 包名@<version> --save-dev
- –save-dev 可以简写成 -D
- 会写入到package.json文件中的devDependencies配置中
4.更新依赖包
//更新全部依赖包
$ npm update
//更新指定的依赖包
$ npm update 包名
来举个栗子.
$ npm i gulp@3.9.1 -D
注意:更新依赖包时会根据 package.json 文件中依赖包的前缀符号做不同处理**
这里我们安装了gulp@3.9.1的版本,然后使用npm update 更新依赖包,发现了一个问题,我们目前的gulp版本应该是4.0.2的版本,为什么没有升级呢?
先了解下版本号的小知识
x.y.z
- x - 主版本,如果代码有一些不向下兼容的更新时,就需要对 x 做 + 1
- y - 次版本,如果代码有一些向下兼容的新功能或修改功能的话,就需要对 y 做 + 1
- z - 修订版本,如果代码有一些bug修复之类的,就对 z 做 + 1
来个问题,当前gulp3.x的最新版本是3.9.1 ,如果我们安装的是3.8.x,然后npm update gulp 时,能更新吗?
答案是:能
还有个问题:package.json中的依赖包版本号前面有个^和~代表什么意思?
两者的相同点,都是为了处理如何更新的问题
区别是:
^ 锁定主版本,更新到最新的次版本+修订版
^ 3.8.11 => 3.9.1
~ 锁定主版本与次版本,更新到最新的修订版
~ 3.8.0 => 3.8.11
另外,除版本号之外还有些修饰的词,我们在使用软件中也经常见到
除了版本号之外还有一些修饰的词,比如:
- alpha:内部版本
- beta:测试版本
- rc:即将作为正式版发布
- lts:长期维护版本
通过版本号小知识,我们就可以知道,为什么上面gulp版本没有升级到4.0.2的版本了,因为更新版本是不会更新到主版本 的,因为4.x的版本之后,做了不向下兼容的更新,担心当前项目相关的gulp,跑不起来,npm也怕这种情况发生,就对我们的版本做了锁定,所以更新不了.
5.安装项目全部依赖
项目的依赖包是存放在项目的 node_modules 文件夹中的,项目依赖多的时候,这个文件夹会非常大。版本管理时都会忽略这个文件夹。
项目克隆下来之后,如果按照 package.json 中的依赖项一个一个手动去安装,将非常费时费力。
这时可以直接使用 npm install 命令。它会依据 package.json 将全部依赖都安装好。
$ npm install
6.全局安装
全局一般安装的是一些工具类型的。比如 nodemon、live-server、gulp、webpack、@vue/cli、create-react-app 等
$ npm install 包名 -global
可以缩写为 npm i 包名 -g
- 1.全局安装的工具包,存放在哪里?
C:\Users\xxx用户\AppData\Roaming\npm - 2.有些时候,可能会出现命令缺失的问题
比如报 "nodemon"不是内部或外部命令这类错误
可以这样解决:
- a.去全局安装的工具包目录下查找是否的确有 nodemon
- b.查看系统环境变量是否将 工具包目录 添加到了 path 配置中。(!不要随意去乱改 !)
- c.重新打开个终端,再试试。
7.卸载包
//卸载当前项目下的
$ npm uninstall 包名
//卸载全局的
$ npm uninstall 包名 -g
8.清除缓存数据
//如果报错-4048时使用
$ npm cache verify
三,npm换源
下载第三方依赖包时默认是从国外的服务器下载的。由于种种原因,下载的速度不尽如意。
这时可以采用淘宝的镜像源。
1.查询npm源地址
$ npm config get registry
2.修改npm 源地址
$ npm config set registry 源地址
*. 淘宝镜像源地址:https://registry.npm.taobao.org/
*. 默认源地址:https://registry.npmjs.org/
3.npm 源的配置文件地址在哪里
C:\Users\xx用户.npmrc
四. npm script(npm脚本)
有时候我们需要通过各种命令来启动项目或者做其他的事情,比如说:
- node index.js
- gulp
上面这两个命令还是比较简单容易记忆,但是如果是这个命令呢
nodemon index.js --hello --world --abc --ejg (随意写的长命令,举个栗子而已)
如果我们每次启动,去在终端写这样的命令,肯定是不明智的,这时就可以使用npm脚本
1.npm脚本,就是将一些命令写入到脚本中,后续运行脚本就好了,脚本记忆起来是非常简单的也是可以直接去找到的脚本代码
2.npm脚本是写在 package.json文件中的script字段中
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"hello":"node index.js"
}
}
script中每个键值对就是一个脚本命令,key是脚本名,value是这个脚本的操作
####0 运行脚本,使用npm run 脚本名 来运行即可
3.有个特殊的脚本 start,如果脚本名是start,那么可以不加run 直接npm start 即可
上面所有介绍的是npm包资源管理器的基础操作,下面总结下命令:
五.总结命令
生成 package.json 配置文件
$ npm init
$ npm init -y 跳过所有提问
安装包
本地安装(当前项目能访问到)
$ npm install 包名
全局安装(其他项目都能访问到)
$ npm install 包名 -global
缩写形式
$ npm i 包名 -g
项目依赖(添加到dependencies)
$ npm install 包名 -save
项目上线需要用到的包,缩写 $ npm install 包名 -S (大写)
开发依赖(添加到devDependencies)
$ npm install 包名 --save-dev
开发测试需要用到的包,缩写 $ npm install 包名 -D (大写)
移除依赖模块
$ npm uninstall 包名 -save
$ npm uninstall 包名 --save-dev
清除缓存数据
npm cache verify
如报错 -4048 时使用
淘宝 NPM 镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm install 包名 -D (大写)
移除依赖模块
$ npm uninstall 包名 -save
$ npm uninstall 包名 --save-dev