系列学习前端之第 9 章：一文搞懂 Node.js 和 nvm，掌握 npm

1、说说 Node.js

Node.js 本质上是一款应用软件（本质上与QQ、微信一样），它可以运行 JavaScript 代码，这样就使得 JavaScript 能够脱离浏览器运行。Node.js 是基于 Google 的 V8 引擎，V8引擎执行 Javascript 的速度非常快，性能非常好。Node.js 可以处理 HTTP 请求，可以操作数据库和缓存等等，它主要是运行在后台服务端。但是，后续的项目开发中，如果涉及到后台开发的，我们优先使用 Java。

2、说说 nvm

nvm（Node Version Manager 翻译：Node.js 版本管理工具），顾名思义它就是用来管理 Node.js 的版本的，方便切换不同版本的 Node.js。

问：为什么要切换 Node.js 的版本？

切换 Node.js 的版本是经常发生的事，特别是新加入一个公司或者团队，开发团队里使用的 Node.js 往往与自己平时使用的版本不同，所以需要切换不同的版本。

问：不能直接删掉自己的版本去迎合团队的版本吗？

可以的，只不过比较麻烦。而且使用 nvm 切换 Node.js 的版本也是 so easy 的事！

3、说说 npm

3.1 白话文理解 npm

npm（Node Package Manager 翻译：Node.js 包管理工具）是 JavaScript 的包管理工具，并且也是 Node.js 默认的包管理工具。如果把 Node.js 比作将军在外打仗，那么 npm 就是将军的妻子，负责相夫教子，管理家里的日常。

npm 中文网：https://npm.nodejs.cn/about-npm

3.2 npm 的组成

npm 由 3 个部分组成

1、网站：是开发者查找 js 包、设置参数以及管理 npm 使用体验的主要途径。

2、注册表（registry）：是一个巨大的数据库，保存了每个包（package）的信息。

3、命令行工具（CLI）：通过命令行或终端运行，开发者通过 CLI 与 npm 打交道。

3.3 npm 的作用

解决痛点：每当我们需要别人的代码时，根据名字搜索，然后下载、解压、再使用，会非常麻烦。

于是 npm 就做了这个包管理的工作来解决这些痛点，大神们把写好的代码免费上传到 npm 官网上，其他程序员想要使用，直接通过 npm 安装就行了。当然了，有一天你也变成大神，可以上传你的包到 npm 官网给其他人使用。另外，如果我们要使用模块A，而模块A又依赖模块B，模块B又依赖模块C和D，此时 npm 会根据依赖关系，把所有依赖的包都下载下来并且管理起来。这简直就是贤内助！

4、Node.js 和 npm 的关系

刚才提到了，npm 是 Node.js 默认的包管理工具，也就是他们俩是一对的、相辅相成的，很难分开来讨论他们。所以，安装了 Node.js 之后，npm会自动帮你安装上。总的来说：安装 Node.js 默认就会安装 npm，而安装 npm 最简单的方式就是安装 Node.js。

5、使用 Vue 必须要用 Node.js 吗？

5.1 理解 Vue 和 Node.js 这2个概念

1、Vue 是一种 JavaScript 前端框架，可以帮助我们构建前端网站，运行在客户端。

2、Node.js 则是一种在后端使用的 JavaScript 运行环境，运行在服务端，可以让我们像使用其他后端语言（例如 Java、PHP、Python 等）一样编写后端代码，也就是不用 Node.js 做后端开发也可以选其他语言来做后端开发。

所以，它们俩的侧重点其实是不同的，Vue 是开发前端的框架，Node.js 是运行 JavaScript 的应用程序。

5.2 Vue 的一些工具和插件配合 Node.js 会更好用

虽然 Node.js 和 Vue 之间没有必然的关系，但在使用 Vue 开发过程中，如果你希望使用一些 Vue 的工具或者插件，例如 Vue CLI、Vue Router、Vuex 等，那么你在项目中使用 Node.js 会事半功倍。

• Vue CLI 是一个 Vue 的命令行工具，可以帮助我们快速搭建 Vue 项目的基础框架。安装 Vue CLI 需要使用 npm 这一 node.js 的包管理器。
• Vue Router 是 Vue 官方提供的路由管理工具，尤其适合单页面应用开发。使用 Vue Router 需要在 Vue 项目中安装 vue-router 的依赖包，这也需要使用 Node.js 的 npm 包管理器来完成。
• Vuex 是一个针对 Vue 应用程序的状态管理模式，可以使组件之间的状态共享变得更加容易。使用 Vuex 时，你需要在 Vue 项目中安装 vuex 的依赖包，同样需要使用 Node.js 的 npm 包管理器。

总的来说：Vue 不需要依赖 node.js，但如果你需要使用 Vue 的相关工具和插件，那么在项目中使用 Node.js 可能会更加方便和高效。同时，使用什么后端技术栈并不会影响 Vue 的使用，只要你能提供后端 API，就能在前端使用 Vue 构建网站。

6、包管理工具的拓展内容

在很多语言中都有包管理工具，比如：

语言	包管理工具
JavaScript	npm、yarn、cnpm
Java	Maven、Gradle
PHP	composer
Python	pip
Go	go mod
Ruby	rubyGems

除了编程语言领域有包管理之外，操作系统也有包管理工具，比如：

操作系统	包管理工具	网址
CentOS	yum	https://packages.debian.org/stable
Windows	chocolatey	https://chocolatey.org
MacOS	homebrew	https://brew.sh
Ubuntu	apt	https://packages.ubuntu.com

7、安装 Node.js

7.1 Node.js 官网

官网：https://nodejs.org/en/download

中文网站：https://nodejs.cn/download/

说明：中文网站不是官网，是国内一些程序员自己搭建的

我们下载中文网站“长期支持版本” 18.20.0（2024年4月3日）也叫稳定版本或 LTS 版本。

如果想查看历史版本，点击中文网站的“全部安装包”。找到你需要的版本下载即可。

然后把下载好的 .msi 后缀文件进行安装。

7.2 验证 Node.js 是否安装完成

使用 cmd 命令行查看，输入命令

查看 Node.js 安装版本：node -v

查看 npm 安装版本： npm -v

至此，Node.js 安装成功，npm 也一同安装成功了。

8、安装 nvm

注意：Node.js 只是默认安装 npm，并不会默认安装 nvm，所以 nvm 需要我们单独安装。

github官网地址：https://github.com/coreybutler/nvm-windows/releases

这里提供百度网盘下载地址：https://pan.baidu.com/s/1A2vWZh6AM_ozvNd0gJqRpg?pwd=8hhi 提取码: 8hhi

往下拉，找到 Assets，下载 nvm-setup.exe 文件

然后傻瓜式安装。安装过程会检测我们已经安装的 Node 版本，加入到管理即可。

8.1 nvm 常用操作

使用 cmd 命令行工具操作，常用命令如下：

1、显示所有可以下载的 Node.js 版本： nvm list available

2、显示已安装的 Node.js 版本： nvm list

3、安装指定的 Node.js 版本： nvm install 18.20.1

4、安装最新的 Node.js 版本： nvm install latest

5、删除某个版本的 Node.js：  nvm uninstall 18.20.0

6、切换到某个版本的 Node.js： nvm use 18.20.1

8.2 环境变量

 有人会提出疑问：为什么安装好了 Node.js，能通过 cmd 命令行查询到它的版本号呢？

回答：

这个其实跟环境变量设置有关。环境变量可以设置一些文件夹的路径，在当前工作目录下找不到可执行文件时，就会在环境变量的目录中挨个的查找，如果找到则执行，如果没有找到就会报错。

因此，如果我们在环境变量里设置了某些软件，就可以通过 cmd 命令行来启动该软件。

我们可以查看一下，我们计算机的环境变量是否设置了 Node.js。新版的 Node.js 在安装的时候，自动帮我们设置好环境变量了。

9、npm 的使用（重点）

9.1 npm 配置淘宝镜像

npm 的服务器部署在国外，有时候访问的速度非常慢，甚至无法访问。所以配置淘宝镜像可以提高下载速度。配置淘宝镜像有 2 种方式：

9.1.1 直接执行命令配置

npm config set registry https://registry.npmmirror.com/

这种方式比较简单，适用于只下载依赖包的情况（绝大部分程序员首选这种方式）。但是这种方式也有2个问题：

1、修改镜像地址不方便。比如后期有另外的镜像地址，修改起来不方便。

2、淘宝镜像不支持上传自己的包，是只读的镜像。

9.1.2 通过工具配置

使用 nrm 配置 npm 的镜像地址，可以让 nrm 决定去哪个镜像去下载依赖包。

1、安装 nrm

npm i -g nrm

2、查看 nrm 支持的镜像

nrm ls

3、使用淘宝镜像

nrm use taobao

效果： 

4、检查是否配置成功

npm config list

效果：镜像地址指向了 taobao 的镜像地址： https://registry.npmmirror.com/  说明配置成功！

9.2 包初始化

9.2.1 在 Window 某个目录下初始化包

平时我们开发都是在 VSCode 工具下初始化包，也不排除有些时候需要在电脑上某个目录初始化包。步骤如下：

1、进入到具体的目录下，唤起 cmd 命令行。这里提供一个博客链接如何唤起 cmd 命令行

CMD 命令行进入到电脑硬盘的某个目录的几种方式-CSDN博客

2、在 cmd 中输入以下命令行，可以快速创建 package.json

npm init -y    或者  npm init --yes

说明：如果命令行不加 -y 或者 --yes，npm 则会采用“交互式”的方式带领我们去创建 package.json 文件。什么是交互式？就是一问一答的形式。比如：让你确认包的名字、版本号、描述、作者名字、证书等等。一般开发过程我们直接跳过这个交互式。

效果：

这时候 package.json 这个包管理配置文件就创建好了。

注意事项：

1、package name ( 包名 ) 不能使用中文、大写，默认值是 文件夹的名称 ，所以文件夹名称也不能使用中文和大写。

2、version ( 版本号 )要求 x.x.x 的形式定义， x 必须是数字，默认值是 1.0.0

3、ISC 证书与 MIT 证书功能上是相同的。

4、 package.json 可以手动创建与修改。

5、 使用 npm init - y 或者 npm init -- yes 极速创建 package.json

9.2.2 在 VSCode 工具的项目下初始化包

在 VSCode 的项目下，鼠标右键，找到【在集成终端中打开】

如果这时候会弹出一个终端的框（新版的 VSCode 会有这个问题），请按照以下博客的思路来解决问题：解决 VSCode 编辑器点击【在集成终端中打开】出现新的弹框-CSDN博客

输入命令行

npm init -y

这时候就在 code 的根目录下生成了 package.json 文件 

包初始化完成。下面是针对包初始化的内容做一些介绍。

{

"name": "code" , #包的名字

"version": "1.0.0", # 包的版本

"description": "", # 包的描述

"main": "index.js", # 包的入口文件

"scripts": { # 脚本配置

"test": "echo \"Error: no test specified\" && exit 1"

},

"author": "", # 作者

"license": "ISC" # 开源证书

}

9.3 搜索 npm 的包并引入项目

9.3.1 搜索包的方式有 2 种

1、网站搜索，官网地址是（经常无法访问）：https://www.npmjs.com/

所以推荐能搜索包的网址：https://npms.io/

也就是我们可以去这个网站搜索需要的包，让后通过淘宝镜像地址下载某个包。这跟 Java 开发一样，使用 https://mvnrepository.com/ 搜索包，然后通过阿里云镜像去下载包。

2、命令行搜索：npm s xxx   （这种方式比较少用，除非你对包名很了解）

比如我们搜索：uniq，第一个结果出现，二级标题写的是“Removes duplicates from a sorted array in place（从已排序的数组中原位删除重复项）” 

9.3.2 引入包

引入包的命令：

npm i xxx    或者   npm install xxx     i 是 install 的简写

执行结果：

会在项目下多出 2 个内容，一个是 package-lock.json 文件，这个文件里面的内容是固定了我们包的版本信息的，确保我们每次安装的版本是一样的。另一个是 node_modules 文件夹，是用来存放我们下载的包的目录。

9.3.3 使用包

我们在项目下新建 testArr.js 文件，内容如下：

//1、导入 uniq 包
let myUniq = require("uniq");
//2、使用函数（可以参考 uniq 包下的 test.js ）
let arr = [5,2,0,2,5,6];
const result = myUniq(arr);
console.log(result);

在控制台输出：

node testArr.js

效果： 

require 导入 npm 包基本流程说明：

默认在当前文件夹下 node_modules 中寻找同名的文件夹。如果在 node_modules 中找不到同名文件，则会在上级目录中下的 node_modules 中寻找同名的文件夹，以此类推，直至找到磁盘根目录。所以我们在导包的时候，要严格按照 require("uniq") 这种写法来，不要写相对路径。如果是自己开发的包，那就写相对路径。

9.4 npm 的生产环境与开发环境

1、开发环境是程序员专门用来写代码的环境，一般是指程序员的电脑，开发环境的项目一般只能程序员自己访问。
2、生产环境是项目代码正式运行的环境，一般是指正式的服务器电脑，生产环境的项目一般每个客户都可以访问。

9.4.1 生产依赖与开发依赖

我们可以在安装时设置选项来区分依赖的类型 ，目前分为两类：

类型	命令	补充
生产依赖	npm i -S xxx 或者 npm i --save xxx	-S 等效于 --save， -S 是默认选项，npm 会默认加上， 包信息保存在 package.json 中 dependencies 属性
开发依赖	npm i -D xxx 或者 npm i --save-dev xxx	-D 等效于 --save-dev 包信息保存在 package.json 中 devDependencies 属性

开发依赖是只在开发阶段使用的依赖包，而【生产依赖】是开发阶段和最终上线运行阶段都用到
的依赖包。

代码示例：我们在终端引入一个生产包 jQuery，一个开发包 less

npm i -S jQuery

npm i -D less

 效果：jQuery 放在了 dependencies 下，表示在开发阶段和生产阶段都可以使用。less 放在了 devDependencies 下，表示只有开发阶段才用。但是不管是生产依赖还是开发依赖，它们都是放在 node_modules 目录下的。

9.4.2 全局安装

全局安装的命令不受工作目录位置影响，全局安装完成之后就可以在命令行的任何位置运行 nodemon 命令。我们可以执行安装选项 -g 进行全局安装。

npm i -g nodemon

该命令的作用是：自动重启 node 应用程序。

查看全局安装包的位置命令：

 npm root -g

不是所有的包都适合全局安装，只有全局类的工具才适合，可以通过查看包的官方文档来确定
安装方式。

9.5 安装所有包的依赖

问：为什么要有“安装所有包的依赖”这个话题？

回答：

在大部分情况下，我们刚入职一个新团队，或者拿到别人写好的前端代码，此时代码里往往是不会包含 node_modules 这个目录的。实际开发过程，程序员也不会把 node_modules 这个文件夹往 SVN、Git 等代码仓库上传，因为这个文件夹会很大，几百兆或者更大，会导致提交代码或拉取代码非常慢。所以，这个时候就需要我们拉取代码后，一键安装项目所需的包依赖。

安装所有包的依赖命令如下（其实就是去掉之前我们安装指定包的名称）：

npm i      或者      npm install

通过该命令可以依据 package.json 和 package-lock.json 的依赖声明安装项目依赖。

注意：node_modules 文件夹大多数情况都不会存入版本库。

9.6 安装指定版本的包

项目中可能会遇到版本不匹配的情况，有时就需要安装指定版本的包，可以使用下面的命令：

npm i 包名@版本号

例如：安装 jquery 3.7.1 版本

npm i jquery@3.7.1

9.7 删除依赖包

项目中可能需要删除某些不需要的包，可以使用下面的命令删除：

1、局部删除

npm r xxx        或者      npm remove xxx

2、全局删除

npm r -g xxx     或者      npm remove -g xxx

9.8 配置命令别名

通过配置命令别名可以更简单的执行命令。主要是针对 package.json 文件中的 scripts 标签来配置。

比如我们配置了 server 和 start 标签，都是指向 testArr.js 文件：

  "scripts": {"test": "echo \"Error: no test specified\" && exit 1","server": "node testArr.js","start": "node testArr.js"},

配置完之后，我们就可以使用别名来执行命令：

npm run server

npm run start   或者   npm start    （start 别名比较特别，可以省略 run）

效果：

补充说明：

1、npm start 是项目中常用的一个命令，一般用来启动项目。

2、npm run 有自动向上级目录查找的特性，跟 require 函数也一样。向上级目录查找这个特性很重要，否则在多层级的目录下，要重复创建相同的包。有了向上查找特别，只需要在最外层创建一个包即可。

3、对于陌生的项目，我们可以通过查看 scripts 属性来参考项目的一些操作。

9.9 管理发布包

当有一天，你成为大神之后，写了很多厉害的 js 脚本，就可以往 npm 服务器上发布你的包，给其他人使用。

9.9.1 创建与发布

1. 创建文件夹，并创建文件 index.js， 在文件中声明函数，使用 module.exports 暴露
2. npm 初始化工具包，package.json 填写包的信息 (包的名字是唯一的)
3. 注册账号 https://www.npmjs.com/signup
4. 激活账号 （ 一定要激活账号 ）
5. 修改为官方的官方镜像 (命令行中运行 nrm use npm )
6. 命令行下 npm login 填写相关用户信息
7. 命令行下 npm publish 提交包

9.9.2 更新包

后续可以对自己发布的包进行更新，操作步骤如下：

1. 更新包中的代码
2. 测试代码是否可用
3. 修改 package.json 中的版本号
4. 发布更新。npm publish

9.9.3 删除包

执行如下命令删除包：

npm unpublish --force

删除包需要满足一定的条件：https://docs.npmjs.com/policies/unpublish

1. 你是包的作者
2. 发布小于 24 小时
3. 大于 24 小时后，没有其他包依赖，并且每周小于 300 下载量，并且只有一个维护者

— end  —