前端学习笔记004：Node.js + NPM

粽锁粥汁，JavaScript 是一门前端编程语言。但他具备了编程语言的所有特点。这时候就有人说：为什么我们学后端还要多学一门后端编程语言呢？为什么不能直接用 JavaScript 来写后端？于是，Node.js 出现了。它的作用就是把 JS 变成服务端语言，也就是用 JS 写后端。Node.js 的工作原理其实与 JDK 非常相似（没学过 Java 的同学也没事），JDK 是通过 JVM 来把 Java 代码转换成计算机可读的语言。而 Node.js 则是通过 Chrome V8 引擎来把 JS 代码转换成计算机可读的语言~

而 NPM 呢，其实就是 Node.js 的包管理器，其作用相当于 Python 里的 pip 和 Java 里的 Maven。我们通过 NPM 里的一个个包来快速地构建前端框架，并且使用 Node.js 里的服务端功能快速进行浏览器调试。NPM 说其为前端利器真的不为过~

2. Node.js 及 NPM 的安装

要使用 Node.js 及 NPM，必须要先安装它们。我们打开下载界面，然后选择 Windows msi x64 进行下载~ 打开可能稍微有点慢~ 如果你用的是 win7 请下载 Node.js 13 版本，后面的不支持~

下载完运行，点 next；

勾选同意然后下一步~

这个你可以改安装路径，点 Next；

点 next；

直接点 next 就可以~

点击 install；

等待其安装；

点击 Finish 结束安装；

win+r 输入 cmd 打开命令提示符，如果输入 node -v 和 npm -v 有输出版本信息就说明安装成功。怎么样，简不简单~ 由于 NPM 只是 Node.js 的包管理器，是 Node.js 的一部分，所以我们安装了 Node.js，也就顺带安装了 NPM 啦~

3. Node.js 简单使用

刚刚都说了 Node.js 能把 JS 脚本当作服务端使用，那怎么使用呢？下文就来简单演示一下。

3.1 Node.js 运行 JS 脚本

想要让 Node.js 运行服务端，那肯定要先了解 Node.js 怎么运行 JS 脚本。我们先写一个 JS 文件，里面写打印 Hello World 的语句（如下）

console.log("Hello World!");

保存为 hellonode.js，然后控制台进入该目录（这里介绍一个超好用的方法，在 VSCode 左边的文件栏里的空白位置右键，然后选择“在集成终端中打开”），输入：

node hellonode.js

你会看见控制台很从容地打印出了 Hello World~

Node.js 甚至提供了像浏览器控制台一样的 Shell 环境，在控制台里输入 node，然后就相当于是打开了浏览器的控制台，除了不能操作 DOM 与 BOM 之外其他功能全部正常~ 而且最恐怖的一个功能就是，你输入啥，它立马给你这个东西的提示，真的太强大了~ 想要退出控制台，只需要输入 .exit 即可~

3.2 Node.js 搭建服务器（原生）

有了上面的基础，我们就可以来开始搭建 Node.js 服务器了。再次创建一个 JS 然后输入以下代码：

// 第一步：引入 http 模块，这是 Node.js 里自带的
// 这是 CommonJS 里的模块化方法，我们使用 ES6 里的模块化，这里简单了解就可以
let http = require('http');

// 第二步：创建服务器
// 使用 http 模块里的 createServer 方法创建服务器
// 接收参数为一个函数
http.createServer((request, response) => { // 这个函数要接收的参数有两个：request 与 response

    // 发送 HTTP 头部 
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    // 不懂没关系，下一小节我们会把 HTTP 细细地抠出来讲
    response.writeHead(200, {'Content-Type': 'text/plain'});

    // 发送响应数据 "Hello World"
    response.end('Hello World\n');
}).listen(8888); // 调用创建出来服务器的 listen 方法监听端口，端口号为 8888

// 第三步：终端提示信息（可有可无，这个不影响服务器的运行）
console.log('服务器已运行在 http://127.0.0.1:8888/，请打开浏览器访问。');

使用 Node.js 运行这个 js，运行结果：

浏览器打开 http://127.0.0.1:8888 效果如下：

可以看到服务器创建成功了~ 这里由于我们不需要用到太深的 Node.js 所以知道一下就行~

3.3 Node.js 搭建服务器（Express.js）

这里我们还要介绍一种搭建服务器的方法，即使用 Node.js + Express.js 搭建~ 不要问我为什么没事要教这种搭建服务器的方法，因为后面要用到（T_T）但是 Express.js 有一个优点，就是可以特别方便地指定你的服务器搭建在网站的哪个路径，比如 127.0.0.1:8888/express/js 之类的。

先使用 NPM 安装 Express.js（可以先去预习以下后面 NPM 的内容）：

npm install express --save

然后把以下代码敲入 JS：

// 第一步：引入 express 模块
let express = require('express');
// 第二步：创建服务器
let app = express();

// 这一步比上面那个 createServer 多了一个参数，是访问网站的路径
// 比如 / 的真实路径是 http://127.0.0.1/，/express 的真实路径是 http://127.0.0.1/express
// 第二个参数与上面的一模一样
app.get('/', (request, response) => {
  response.send('Hello World!'); // 发送信息 Hello World
});

// 第三步：监听端口
// 前一个参数是端口，后一个参数是监听之后的回调函数，即监听之后需要做些什么都往这里写
app.listen(8888, () => {
  console.log("服务器已开始监听 8888 端口，请访问浏览器 http://127.0.0.1:8888/ 查看网页");
});

Node.js 执行，然后访问网站，一切正常~

4. NPM 的使用

NPM 是 Node.js 软件包的管理器。我们通过 NPM 里一个个软件，来构建我们的前端框架，并且用它快速在浏览器调试程序。

4.1 NPM 对软件的下载、更新及卸载

使用 NPM 下载软件，就跟使用 pip 安装软件包一样简单。我们先建立一个项目文件夹，比如取名 Project；

然后在 cmd 里进入该文件夹；

比如我们需要使用 NPM 下载 lodash 软件包，就可以使用下面代码：

npm install lodash

然后 NPM 就会开始辛勤工作：

安装完之后打开这个文件夹，你会发现下面多了很多文件。package.json 是软件包管理文件，node_modules 下面的东西是刚刚安装的软件。打开 node_modules 目录，你应该可以看到 lodash 目录，这是我们刚刚下载的~

那怎么更新软件呢？下面两行代码可以帮助你非常方便地更新全部的软件~

npm update
npm outdated

由于我们这边所有软件都是最新的，所以你应该看到下图的输出：

如果你不需要 lodash 这个软件，你可以把它卸载，卸载很简单，直接使用下面这行代码：

npm uninstall lodash

执行效果：

4.2 NPM 安装、更新及卸载全局软件

有的时候我们需要在很多个项目里都需要用到同一个 Node.js 软件包，这时候我们就可以把它当作全局软件包来安装，这样就不必在每一个项目里都安装这个包了

全局软件的安装很简单，就是比普通的软件多加一个 -g。比如我们需要全局安装 create-react-app 软件，就可以使用下面代码：

npm install -g create-react-app

运行效果：

全局软件的安装位置在 Node.js 的目录，所以我们看不到，但是使用是正常的~

更新软件也很简单，就是多加了一个 -g：

npm -g update
npm -g outdated

卸载软件，它也是多了一个 -g，当然我这里由于需要用到这个包所以不演示了~

npm uninstall -g create-react-app

4.3 NPM 的版本更新

如果你的 NPM 版本太老，很多功能都不支持，所以要定期版本更新~

输入下面的命令进行 NPM 的更新~

npm install npm@latest -g

4.4 安装指定版本的软件包

如果你想安装一个软件的指定版本，可以使用这种方法安装软件包。比如我们安装 jQuery 的 3.6.1 版本。如果你想安装全局包就加一个 -g。

npm install [email protected]

使用这种方法安装的软件包后期可能会被软件更新给更新到最新版本，解决办法也很简单，卸载（不需要加 --save）再重装就可以了。

4.5 查看自己安装了哪些软件包

如果你想查看在这个项目里你安装了哪些软件包，就可以用下面的代码。如果你想查看全局包就加一个 -g。@后面的是软件包的版本

npm list

4.6 NPM 警告

有的时候，我们在安装软件包时会看见一些警告：

里面以 npm 开头的语句我们要格外注意，比如这里面的 npm fund，npm audit fix --force 和 npm audit。我们可以根据警告来做出优化。我们应该怎么运行这些语句呢？

首先看语句后面有没有出现 details 这个词，它代表查看详细信息，没有什么实际作用，比如这里面的 npm fund 和 npm audit。其他的语句就全部运行，让 npm 自动修复。

4.7 安装及卸载项目依赖软件包

我们知道，我们在开发一个项目时，需要用到的包就是项目依赖的包，有了这些包，我们的项目才能跑起来。那怎么安装项目依赖的软件包呢？在普通的软件包安装后面加上 --save 就可以~

卸载也是一个道理，也是加上 --save，删除这个软件包的项目依赖~

其实加不加 --save 都没事，因为如果你的 NPM 版本大于等于 5.0（我们装的是 NPM 8 版本），NPM 会自动把软件包添加进依赖，所以我们现在没有那么强调~（但是如果你的 NPM 版本小于 5.0 那么一定要加 --save）

4.8 NPX 的简单使用

NPX，是 Node.js 里用于运行全局软件包的一个工具，比如你用 Node.js 写了一个应用程序，那怎么运行呢？靠的就是 NPX。

比如我们想要使用 create-react-app 全局软件包（确保你已经安装），然后可以使用 npx 运行它：

npx create-react-app --version

它应该会正常打印：

使用 NPX 之前，请确保这个软件包有写运行的功能。比如 jQuery 是一个功能性的包，你还使用 NPX 运行它，它就会报错。一般我们只根据指导使用 NPX。

4.9 使用 CNPM 镜像

由于 NPM 是国外的，下载软件的速度会有点慢，所以阿里巴巴（就是马爸爸的那家公司）搭建了一个 CNPM 镜像源，用于加速 NPM 软件的下载。我们先使用 NPM 下载 CNPM：

npm install -g cnpm --registry=https://registry.npmmirror.com/

上面的 registry 选项是选择 npm 下载库时使用哪个镜像源，因为官方源里没有 cnpm 这个软件包所以要使用国内源。然后你就可以使用 CNPM 满速下载 NPM 软件包啦~ 使用方法很简单，就是把 npm 换成 cnpm 即可~

CNPM 的镜像与官方镜像每 10 分钟同步一次，基本上可以说是没有误差~

4.10 Yarn

很多同学有见过很多次的 yarn 指令，实际上它和 CNPM 一样，是由 Meta 打造的 Node.js 软件管理器（Meta 其实就是 Facebook 公司，只不过最近改名了）。使用 yarn 下载软件速度也挺快的，虽然没有 CNPM 那样极致的速度，但是它比 CNPM 的兼容性要好得多。

首先还是先使用 NPM 安装 yarn：

npm install yarn -g

然后就可以用 yarn 对软件进行操作了。yarn 的使用方法与 npm 有些许不同，具体看下图：

我个人推荐在 React 项目中使用 yarn，因为它们出自同一家——Facebook，兼容性更好。

5. 小结

这篇只是简单的讲了 Node.js 的基本使用，想要了解更多可以点击这个链接：菜鸟教程

下期把 JSON XML HTTP，AJAX，Promise、axios 这些都讲一下，查缺补漏，然后就是 React 了~