Javaweb - 14.2 - 前端工程化环境搭建

目录

Nodejs 的简介和安装

什么是 Nodejs

安装 Nodejs

npm 的配置和使用

npm 介绍

npm 的安装和配置

npm 的常用命令

完！

---

Nodejs 的简介和安装

什么是 Nodejs

Nodejs 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，可以使 JavaScript 运行在服务端。使用 Node.js，可以方便地开发服务端应用程序。Nodejs 有如下特点：

单线程，采用事件驱动，异步 I/O，可以处理高并发请求。轻量级，模块化，跨平台

在 Nodejs 中，我们可以使用 JavaScript 来编写服务器端程序，使得 JavaScript 成为了一种全栈语言。

安装 Nodejs

1. 官网：Node.js — Run JavaScript Everywhere，下载对应操作系统的 LTS 版本

2. 双击安装包进行安装。此处可参考：Node.js 安装配置 | 菜鸟教程

安装完成后，可以在命令行终端输入 node -v 和 npm -v 查看 Node.js 和 npm 的版本号

npm 的配置和使用

npm 介绍

首先要理解一个概念：框架。

框架是针对特定问题的一套解决方法，是软件的半成品，程序员可以在此之上，极大的提高开发效率。

后端框架：表现形式为 jar 文件。例如 jackson 的相关 jar 包就是针对 JSON 格式转换的一套固定解决方案。

前端框架：表现形式为很多的 css js ... 文件。

后端框架可以在 maven 仓库中下载，前端的常用框架，VUE3，jquery，axios，router ... 也有一个开源的仓库。

npm 软件，是前端框架的下载工具，也是前端项目的管理工具。

可以通过 npm 将仓库中的一些我们需要的开源框架下载到本地仓库的目录。下载到本地仓库中的框架，会自动应用在每一个用 npm 初始化的项目中，所以我们也可以给每一个项目创建一个自己的仓库。同时，这个中央仓库的服务器在国外，阿里公司创建了一个镜像仓库，可以加快下载速度~

npm 的安装和配置

1. 安装：在安装 Nodejs 的时候，自动已经安装了 npm 包管理工具

2. 配置依赖下载使用阿里镜像：

打开命令行终端：

这段命令行是用来查看当下下载依赖的网址，这次查询到的结果是中央仓库的地址，服务器在国外

将仓库的下载地址更改为阿里的镜像地址，然后再进行查询确认~

如果需要恢复默认的官方源，可以执行一下命令：

npm config set registry http://registry.npmjs.org/

3. 配置全局依赖下载后的存储位置：

前端依赖的内容是非常多的，强烈建议修改全局依赖的安装路径，操作如下：

        1. 创建一个新的全局依赖存储目录，例如：D:\GlobalNodeModules

        2. 打开命令行终端，执行命令来配置新的全局依赖存储路径：

                npm config set prefix "D;\GlobalNodeModules"

        3. 确认配置已经生效：

                npm config get prefix

4. 升级 npm 版本

控制台中输入 npm -v 查看版本，如果 node 中自带的 npm 版本过低，需要升级到 9.6.6

npm install -g npm@9.6.6

npm 的常用命令

我们可以在一个项目中测试 npm 相关命令

在之前存储前端代码的目录中，创建一个新的文件夹，demo-npm

1. 项目初始化：（注意要进入到项目所对应的文件目录中）

        npm init

                执行这段命令后，npm 会引导回答一些问题，最终生成一个 package.json 文件，该文件中会包含一些项目基本信息

执行完毕后，我们的 demo-npm 中就会出现一个 package.json 文件，用 notepad++ 打开后，里面是项目的一些基本信息，也就是我们刚刚输入的信息

        npm init -y

                也是初始化，-y 是 yes 的意思，即所有的信息都使用当前文件夹的默认值，不用挨个填写~

2. 安装依赖（查看所有依赖：http://www.npmjs.com）

        npm install 包名   或者   npm install 包名@版本号

        安装指包或指定版本的依赖包，如果未指定版本，则会自动安装最新版本的依赖包

        安装完成后，项目文件夹中会多出 node_modules 文件夹，这个就是项目的相关依赖存放的位置。下载完毕后，我们再打开 package.json 文件的话，会看到记录了我们下载的依赖

        npm install -g 包名

        安装全局依赖包（即安装到 d:/GlobalNodeModules），可以在任何项目中使用它~

3. 卸载依赖

        npm unstall 包名

4. 查看依赖：

        npm ls

        查看项目依赖

        npm list -g

        查看全局依赖

5. 运行命令

        npm run 命令是执行 npm 脚本时候的命令。npm 脚本是一组在package.json 文件中定义的可执行命令。可用于启动应用程序，运行测试，生成文档等。

在 package.json 中，scripts 字段是一个对象，其中包含一组键值对，键是要运行的脚本的名称，值是要执行的命令。

在 vs code 中使用 npm 命令：

可以再创建一个 demo2-npm 然后打开终端控制台，然后输入命令先进入对应的文件目录中

然后就可以执行 npm 命令了

补充：package.json 文件在那个目录中，我们运行的 npm 的相关命令就在那个目录下！

完！