一、为什么要学习 NPM?(NPM 的作用)

我们后续需要用它去下载安装相应 js 库与各种插件(模块)等,比如 vue.js、vue-router.js、axios.min.js、vuex,并且使用频繁。npm 是各种 包管理器,用来下载安装、卸载各种依赖文件(第三方插件)。

二、NPM 是什么?与 Node 的关系

NPM 的全称是 Node Package Manager,即 Node 包管理工具,那么 Node 又是什么?即指 Node.js,Node.js 是一个能够在服务器端运行 JavaScript 的开放源代码、跨平台 JavaScript 运行环境。
解释两点:
(1)跨平台:Node.js 的程序可以在 Microsoft Windows、
Linux、Unix、Mac OS X 等服务器上运行。
(2)通俗说这个环境可以使 JavaScript 用于服务端的编程,原先 JavaScript 只能用于前端编程,服务端需要用 PHP、Python、JAVA、C#等。Node.js 使前后端更加一体了,十分方便。

Node.js 主要模块是用 JavaScript 编写的,因此 npm 也就是JavaScript 的包管理工具,而且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。目前的 Node.js 安装包中已经包含了 npm。

三、本地安装模块(js 库)

安装的主要模块就是相关 js 库,有本地安装和全局安装两种方式。这节学习本地安装。把 js 库安装到当前执行安装命令时所在的目录下,也就是说本地安装的 js 库,只有本项目有用。

语法:npm install <module name>[@版本号]

vue3 yarn npm 区别_json

四、安装指定版本的 js 库

如下图所示,安装指定版本号的 bootstrap,通过@指定版本号为 3.3.7。注意:指定的版本号一定要存在的,否则会报错,安装不成功的。

vue3 yarn npm 区别_vue.js_02

五、全局安装模块(js 库)及查看已安装的 js 库

5.1、如何通过命令查看全局安装位置

如果多个项目要共同使用/引用某一个 js 库,就要使用全局安装,也就是安装在一个公共位置(全局安装位置)。那么公共位置在哪呢?这就是在 1.3 节中配置的全局安装路径。我们也可以通过命令查看。

语法:npm root –g

vue3 yarn npm 区别_npm_03

5.2、 npm 全局安装 js 库

语法:npm install <module_name> -g

g 代表 global 全局安装的意思。

如 下 表 示 全 局 安 装 vue , 此 时D:\Program\Files\nodejs\node_global\node_modules 文件夹下就会看到 vue文件夹,vue 文件夹下就会有 vue.js 等相关文件。

vue3 yarn npm 区别_npm_04

5.3、 如何查看全局安装了哪些 js 库

语法:npm list -g 或 npm ls -g

vue3 yarn npm 区别_json_05

六、 生产环境和开发环境依赖模块的安装

6.1、 生产环境依赖模块的安装

如果项目中用到的 js 库(例如 vue、axios、element ui、echarts)在项目最后打包上线后需要用到,就要使用生产环境依赖的安装。

语法:npm install <module name> [--save|-S] 
-S 为--save 的简写,同样 install 可简写为 i

就是在后面增加了–s 或-S 参数【前面是英文的两个-,后面是一个-】,安装后会自动把模块和版本号添加到 package.json 中的 dependencies 对象中,简称 dep,就是指生产环境依赖。

6.2、 开发环境依赖模块的安装

如果项目中用到的 js 库(例如 eslint 语法格式检查的需要,课程后续都会用到)在项目最后打包上线后不需要用到,就使用开发环境依赖的安装。

语法:npm install <module name> [--save-dev|-D] 
(|后面的简写)

就是在后面增加了–save-dev 或-D 参数,安装后会自动把模块和版本号添加到 package.json 中的 devDependencies 对象中,简称 dev,就是指开发环境依赖。
说明:参数--save-dev 或-D 放在<module name>前面也行。

七、cnpm 命令的安装及批量下载模块

7.1、cnpm的安装

cnpm 命令作用就是加快模块的下载速度。通过 npm 命令安装模块是从国外服务器下载,速度往往比较慢。
国内服务器有没有下载呢?乐于分享的淘宝团队干了这事。来自官网:“这是一个完整npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为10 分钟一次以保证尽量与官方服务同步。”
注意,没有安装直接输入 cnpm 命令会报错的哦。 怎么安装 cnpm 命令呢?
前提也需要先安装 node.js,当然我们 npm 命令有用,那么node.js 肯定安装了。接下来只要在 cmd 窗口中输入如下命令:(一般都全局安装)

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

等待一会就会显示安装成功,再输入 cnpm 命令就不会报错了。

vue3 yarn npm 区别_vue.js_06


cnpm 跟 npm 用法基本一致,只是在执行命令时将 npm 改为cnpm。以后一般可采用 cnpm 命令代替 npm。

7.2、 批量下载模块

我们从网上去下载一些 vue 的相关项目源码,你会发现一般没有 node_modules 文件夹,也就是说所有相关依赖的文件都没有的,但 是 会 有 package.json 文 件 , 这 个 时 候 我 们 就 需 要 根 据package.json 文件去安装所有相关依赖。然而在上面的 npm-demo1 项目中我们下载安装的 vue、bootstrap、jquery、eslint 等是一个个去下载安装的。如果还一个个去安装太累了(实际项目会有更多的依赖模块),那么如何批量下载安装呢?只需要进入 package.json 文件所在目录,也就是项目的根目录,打开 cmd 窗口,输入 npm install 或 cnpm install,当然建议选择后面的。

例:现在把npm-demo1项目中的node_modules文件夹删除,先需要根据 package.json 文件去安装所有相关依赖。package.json文件中的 4 个相关依赖如下图所示。

vue3 yarn npm 区别_json_07


vue3 yarn npm 区别_json_08


说明:此时你到项目根目录有可以看到 node_modules 文件夹及其下面一大堆的文件夹。

八、package.json 文件初步认识

打开 package.json 文件(尚没有安装 VS Code,可以用
Notepad 工具打开)后,内容如下,发现就是我们基本为我们自己设置的参数信息(在上面的 cmd 窗口中也有)。但是下面红色参数Scripts 在初始化时我们没有设置。它的含义是:表示项目运行的脚本信息,是一个对象,本身里面又可以包含很多对象,即,键值对信息,默认有一个对象,键为”test”,表示测试开发环境,后面的值表示运行的脚本。后续课程开发中我们一般会设置 “dev”或“serve”去启动项目的。

{ "name": "npm-demo1",
 "version": "1.0.0",
"description": "firstproj", 
"main": "index.js", 
"scripts": { "test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [ "npm" ],
"author": "xuzhaoxing", "license": "ISC"
}

说明:后面我们开发项目中生成的 package.json 文件不会这么简单,还会有文件"dependencies" 、"devDependencies"的值(表示生产环境、开发环境的依赖),表示相关依赖。有了 package.json文件文件,直接使用 npm install 命令自动安装和维护当前项目所需的所有依赖模块。

九、几个常用的npm命令

1. npm uninstall –g <module> # 卸载全局模块 
2. npm list | ls # 查看本地安装的所有模块
3. npm list | ls <module name> # 查看本地安装的指定模块,
4. npm/cnpm view <module name> vers # 查看模块的最新版本
5. npm -rf node_modules/ # 删除已安装的模块
6. npm cache clean # 清除 npm 内部缓存
7. npm install # 重新安装
8. cnpm view <module name> versions # 查看模块的所有版本
9. cnpm uninstall <module nam> # 卸载本地模块