八、npm
npm 概述
- npm (Node Package Manager)是 Node.js 的包管理工具。
- 包,就是一坨代码,就是 Node.js 的第三方模块。
比如 jQuery ,比如 BootStrap ,都是一坨代码。 - npm 是一个可以在命令行运行的命令,跟随 Node.js 一起安装。
也就是说,如果本地已经安装了 Node.js ,那么就安装了 npm ,可以通过命令 npm --version
测试一下,如果能看到版本号则说明 npm 安装成功,否则就需要重新安装 Node.js 。 - npm 的作用:
npm 可以下载(在 Node.js 中通常称为安装)包和包的依赖。
比如项目中需要使用 BootStrap ,那么就需要下载,除了要下载 BootStrap 以外,还需要下载 jQuery ,这个 jQuery 实际上就是 BootStrap 的依赖。或者说,BootStrap 中的一些功能是基于 jQuery 的语法来写的。这就是依赖。 - 手动下载和 npm下载对比:
手动下载:打开网站——找到资源——点击下载
npm 安装:npm install <package-name>
比如想要下载 BootStrap ,那要先去 BootStrap 官网,找到下载地址才能下载,而如果使用 npm 安装,只需要知道 BootStrap 的名字即可。并且,想要使用 BootStrap ,还必须要下载 jQuery ,因为是依赖关系,而 npm 安装方式,不需要关心依赖,直接下 BootStrap ,后面的 jQuery 会根据依赖关系自动地下载,因为 npm 不仅能安装包,还能安装包的依赖。 - 我们自己下载的时要找到下载地址,如果使用 npm 安装时 npm 去哪里下载呢?
npmjs.com,其实这个网址就是 npm 的镜像源。
npm 镜像源
- npm 镜像源是 npm 管理的 Node.js 包的资源地址,网址 npmjs.com 。
也就是说,当我们在命令行敲安装命令时,实际上是跑到 npmjs.com 这个网站上去下载。 - 那么,npmjs.com 上面的东西是怎么来的呢?
是 发布上去的。比如 jQuery 的作者将 jQuery 发布到了 npmjs.com 上, BootStrap 的作者将 BootStrap 发布到了 npmjs.com 上,Vue 的作者也发布上去,等等。将来如果有能力,自己也可以写,然后发布上去。
npmjs.com 就相当于手机端的应用商店,如果想在手机端下载 app 要去应用商店下载。
修改 npm 镜像源
为什么要修改 npm 镜像源?
因为 npm 默认的镜像源默认的资源地址是国外的,我们下载东西到国外去下就会舍近求远。所以,考虑到下载速度,下载效率的问题,一般来说,安装完 Node.js 后,还要把 npm 的镜像源改成国内的。国内的镜像源有很多,最常用的是淘宝的,即:
https://registry.npmjs.com ——> https://registry.npm.taobao.org
修改 npm 镜像源的命令行命令如下:
npm config set registry https://registry.npm.taobao.org
验证是否修改成功,可以通过获取来验证:
npm config get registry
使用 npm 安装包
安装命令:npm install <package-name>
安装可以分两种:
全局安装:多个项目都能用到这个包,那么就可以将包当做全局工具使用
项目安装(局部安装):只有当前项目用到这个包
全局安装
全局安装就是把包当成全局命令来使用
全局安装的命令就是在之前的命令后面加一个表示全局的参数,即 :
npm install <package-name> --global 或者简写为 npm i <package-name> -g
全局安装操作步骤:
- 明确需求,想让包实现什么样的功能
- 在 npmjs.com 网站找到合适的包
- 通过 npm 命令安装包
- 使用包
示例:
首先第一步明确需求:压缩文件;
第二步:在网站找
之前学习 fs 时压缩文件用的 minify ,所以在网站首页的搜索框输入关键词 minify ,得到 minify 这个包的介绍,安装命令以及使用代码等(https://www.npmjs.com/package/minify):
第三步通过 npm 命令安装:npm i minify -g
第四步代码演示:
VS Code 编辑器中:
可以安装包,也可以卸载包:npm uninstall minify -g ,卸载后再压缩文件就会报错:
项目(局部)安装
局部安装就是包只在当前项目中使用
局部安装步骤:
- 创建项目目录(mkdir project)
- 进入项目目录(cd project)
- 初始化项目(npm init)
初始化过程中 npm 命令会帮我们生成 package.json 文件,项目就相当于一个自定义模块,所以需要声明一个 package.json 文件 - 在项目中安装包
在项目中安装包与全局安装包是有区别的,全局安装用的是 --global 参数,而在项目安装用 --save 参数。
局部安装命令:npm install <package-name> --save ,简写为:npm i <package-name> -S
刚才演示全局安装时,安装了 minify 又卸载了,现在演示在项目中安装 minify :
第一步,创建目录 05.NPM
第二步,cd 进入项目目录
第三步,初始化目录:命令行输入 npm init 回车,得到一个交互式问答的页面,Package name 是项目名称,后面括号中的是默认的项目名称,当然也可以自己给项目命名,比如写 npm-local-install,这是自己起的项目名;然后后面问项目版本,默认是 1.0.0,也可以自己指定版本,如果想使用默认版本那么就直接回车;然后后面是 descriptions 项目描述,可以写一些项目的描述信息;然后就是 entry point 入口文件,默认的是 index.js ;后面是 text command 测试的命令,没有测试命令就直接回车;再后面是 git repository ,就是 git 的仓库地址,比如将自己的项目托管到 GitHub 等的话就有一个网址,就可以写在这里;再后面是 keywords ,关键字,将来把包发布出去时,别人可以通过关键字来找到这个包;再下一个是 author,作者;后面是 license 授权许可,默认 ISC ;最后,所有问题都问完了,会给一个 package,json 文件的最终效果;随后问 Is this OK? 默认 yes ,回车即可。生成的 package,json 文件中的内容就是刚才交互式窗口中填写的内容。
有了 package,json 文件后,才可以进行项目安装
npm install minify --save 安装,安装完成其实是安装到了 node_modules 中,里面包含 minify 以及一些依赖:
第四步,执行时注意:minify 不是在全局目录下,而是在 node_modules 中 的 .bin 目录下:
所以命令应该是 :
–save 与 --save-dev
在项目安装中,用到了参数 --save,除了这个参数,还有一个参数 --save-dev。
npm install <package-name> --save-dev ,简写为 npm i <package-name> -D
–save 与 --save-dev 对比:
- –save / -S 安装的包
开发和上线都需要,开发环境要用,上线之后也要用,例如 jQuery
安装好后,包的信息会写入 package.json 的 dependencies 中;
- –save-dev / -D 安装的包
只在开发环境使用,上线之后就不需要了,例如 minify ,开发时已经压缩了上线之后就不需要了,已经有了 style.min.css,就不需要再压缩了,上线后只需要运行 style.min.css 就可以了,压缩的过程在线上运行时是不需要的。
安装好后,包的信息会写入 package.json 的 devDependencies 中
所以,在以后的安装中,如果确定上线之后不会再使用,可以用 -D 安装;如果不确定上线之后是否还会使用,那就用 -S 安装。
为什么一定要区分这两种包?
因为开发环境和线上环境在大多数情况下需要的包是不一样的,后面打包时对这两种包的处理方式是不一样的,所以安装时先区分一下。
npm 安装包的方式总结
npm 安装包总结起来就是,两种方式,三条命令: