Node.js与Webpack笔记（一）

这里使用的是18.20.2版本

篇幅较大会卡，此篇幅不写Webpack部分，留着下一篇

初识 

1.什么是Node.js?

1. Node.js 是一个独立的 JavaScript 运行环境，能独立执行 JS 代码，因为这个特点，它可以用来编写服务器后端的应用程序

2. Node.js 作用除了编写后端应用程序，也可以对前端代码进行压缩，转译，整合等等，提高前端开发和运行效率

3. Node.js 基于Chrome V8 引擎封装，独立执行 JS 代码，但是语法和浏览器环境的 V8 有所不同，没有 document 和 window 但是都支持 ECMAScript 标准的代码语法

4. 想要得到 Node.js 需要把这个软件安装到电脑

5. Node.js没有图形化界面，使用CMD命令行工具

2.什么是前端工程化？

前端工程化：开发项目直到现在，过程中集成的所有工具和技术

Node.js是前端工程化的基础（因为Node.js可以主动读取前端代码内容）

对前端代码进行优化，集成各种提高前端开发效率的工具等

3.Node.js为什么能执行JS代码？

4.Node.js对V8引擎封装后 与 原浏览器内核有什么区别？

Node.js环境没有DOM和BOM

下载与安装

1.官网地址（LTS为长期支持版，CURRENT为刚发行版）：

Node.js — Previous Releases (nodejs.org)

2.github地址

GitHub - nodejs/Release: Node.js Release Working Group

---

3.安装 与 验证安装

---

也可以在VSCode集成cmd终端验证

可以配置默认终端

注意：选择cmd而不是powershell

powershell是win10新出的工具，默认不允许使用自定义的脚本命令

运行我的第一个Node.js脚本

1.Hello Node.js

2.默认位置

默认位置为当前项目根目录

三个模块

1.什么是模块？

1. 模块：类似插件，封装了方法和属性供我们使用

2.fs模块 -读写本机文件

• 找不到文件会自动创建，但不会创建文件夹
• 寻找路径的起点在开启cmd终端的文件夹
• 读取的内容封装在data属性中，是buffer缓冲流

仔细看，注意路径

---

3.path模块-路径处理

作用：获得绝对路径

问题引出：写相对路径有什么问题吗？

• 如上图，文件夹03开启的cmd命令行工具，执行文件夹03下的index.js脚本，读取文件夹03的父文件夹下（根目录）文件text.txt，此时没有任何问题
• 某一天根目录开启的cmd，执行03/index.js，此时的相对路径就出问题了，所以这里必须使用绝对路径

解决方法

path模块内置变量 __dirname 配合 Node.js的path.join()

• __dirname：动态获取当前项目根目录的绝对路径，而不是什么开启cmd的文件夹目录
• 
• 第二个参数写剩余文件路径
• path.join(): 按照所在本机系统的分隔符作为定界符来链接你传入的路径（例如：将\转化为//）

4.案例：简单压缩前端页面

需求：将原HTML文件内的回车符(\n)、换行符(\r)

运行测试页面是否能成功运行

5.URL统一资源定位符

1.URL是什么？有什么用？

（URL 是统一资源定位符，简称网址，用于访问网络上的资源）

2.端口号的作用？

标记区分服务器里不同的服务程序，值为（0-65535 之间的任意整数）

3.http默认端口号？

http 协议，默认访问的是 80 端口

注意：0-1023 和一些特定的端口号被占用，我们自己编写服务程序请避开使用

4.Web服务是什么？

一个程序，用于提供网上信息浏览功能

提供数据和网页资源等等功能，其他它的功能远不止于此

---

 6.http模块-创建Web服务

基于 Node.js 环境，使用内置 http 模块，创建 Web 服务程序

需求：引入 http 模块，使用相关语法，创建 Web 服务程序，响应返回给请求方一句提示 ‘hello，world’

1. 步骤：

   1. 引入 http 模块，创建 Web 服务对象

   2. 监听 request 请求事件，对本次请求，做一些响应处理

   3. 启动 Web 服务监听对应端口号

   4. 运行本服务在终端进程中，用浏览器发起请求

如何关闭Node.js的http模块创建web服务

关闭浏览器和关掉cmd都不会终止服务

第一种办法，cmd界面可以【Ctrl + C】关闭node

第二种办法，server.close()关闭

const http = require('http');
const server = http.createServer();

server.on('request', (req, res) =>{
    res.setHeader('Content-Type', 'text/plain;charset=utf-8');
    res.end('欢迎使用 Node.js 和 http 模块创建的Web服务');
});

server.listen(3000, () =>{
    console.log('Web 服务启动成功了');
});

function closeServer(){
    console.log('正在关闭服务...');
    server.close();
    console.log('关闭服务成功');
};

setTimeout(() =>{
    closeServer();
}, 20000);//20秒关闭web服务

Node.js 模块化

在 Node.js 中每个文件都被当做是一个独立的模块

模块内定义的变量和函数都是独立作用域的

因为 Node.js 在执行模块代码时，将使用如下所示的函数封装器对其进行封装

而且项目是由多个模块组成的，每个模块之间都是独立的，而且提高模块代码复用性，按需加载，独立作用域

但是因为模块内的属性和函数都是私有的，如果对外使用，需要使用标准语法导出和导入才可以，而这个标准叫 CommonJS 标准（CommonJS规范 -- JavaScript 标准参考教程（alpha） (ruanyifeng.com)），接下来我们在一个需求中，体验下模块化导出和导入语法的使用

CommonJS 标准：一般应用在 Node.js 项目环境中

ECMAScript 标准：一般应用在前端工程化项目

1.CommonJS导入导出语法

需求：定义 utils.js 模块，封装基地址和求数组总和的函数，导入到 test.js 使用查看效果

工具类utils.js

module.exports导出还必须写最下面

这是CommonJS语法

测试类test.js

补充：js代码可以省略.js后缀，其他不行

调用test.js

2.ECMAScript默认导入导出语法

吗的气死我了，搞那么多规范，还要一个个学

CommonJS 规范是 Node.js 环境中默认的，后来官方推出 ECMAScript 标准语法，我们接下来在一个需求中，体验下这个标准中默认导出和导入的语法要如何使用

需求：定义 utils.js 模块，封装基地址和求数组总和的函数，导入到 test.js 使用查看效果

Node.js默认不支持，新建package.json文件，添加一句代码开启ECMAScript规范

工具类utils.js

测试类test.js

3.ECMAScript命名导入导出语法

需求：定义 utils.js 模块，封装基地址和求数组总和的函数，导入到 test.js 使用查看效果

切记，别忘了package.json

一个一个导出，注意属性名

---

4.如何选择？

按需加载：使用命名导入导出

全部加载：使用默认导入导出

5.包

package.json的作用

调用 npm init 来初始化 package.json，它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件，包描述文件，就像产品的说明书一样

最有用的应该是dependencies选项，可以用来帮助我们保存第三方包的依赖信息。
如果node_modules删除了也不用担心，只需要在控制面板中npm install就会自动把package.json中的dependencies中所有的依赖项全部都下载回来。

建议每个项目的根目录下都有一个package.json文件
建议执行npm install 包名的时候都加上–save选项，目的是用来保存依赖信息

---

• 包：将模块、代码或者其他资料整合成一个文件夹，这个文件夹就叫包
• 包分类：
  • 项目包：主要用于编写项目和业务逻辑
  • 软件包：封装工具和方法进行使用
• 包要求：根目录中，必须有【package.json】文件（记录包的清单信息）

• 包使用：在引入一个包文件夹到代码中，默认引入的是包文件节下的 index.js 模块文件里导出的对象，如果没有 index.js 文件，则会引入 package.json 里 main 属性指定的文件模块导出的对象

arr.js

/**
 * 目标：封装数组常用的方法
 */
// 数组求和函数
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

module.exports = {
  getArraySum
}

str.js

/**
 * 目标：封装校验用户名和密码长度的函数
 * 要求：用户名最少 8 位，密码最少为 6 位
 */

const checkUserName = username => {
  return username.length >= 8
}

const checkPassWord = password => {
  return password.length >= 6
}

module.exports = {
  checkUser: checkUserName,
  checkPwd: checkPassWord
}

index.js

/**
 * 本文件是，utils 工具包的唯一出口
 * 作用：把所有工具模块方法集中起来，统一向外暴露
 */
const { getArraySum } = require('./lib/arr.js')
const { checkUser, checkPwd } = require('./lib/str.js')

// 统一导出所有函数
module.exports = {
  getArraySum,
  checkUser,
  checkPwd
}

 package.json

{
  "name": "cz_utils",
  "version": "1.0.0",
  "description": "一个数组和字符串常用工具方法的包",
  "main": "index.js",
  "author": "itheima",
  "license": "MIT"
}

server.js

/**
 * 目标：导入 utils 软件包，使用里面封装的工具函数
 */
const obj = require('./utils')
console.log(obj)
const result = obj.getArraySum([10, 20, 30])
console.log(result)

---

6.NPM包管理器

npm是什么？

• NPM的全称是Node Package Manager，是随同NodeJS一起安装的包管理和分发工具，它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。

npm 简介链接： 软件包管理器，用于下载和管理 Node.js 环境中的软件包

NPM 包管理器简介 (nodejs.cn)

使用步骤

1.初始化清单文件： npm init -y （得到 package.json 文件，有则跳过此命令）

注意 -y 就是所有选项用默认值，所在文件夹不要有中文/特殊符号，建议英文和数字组成，因为 npm 包名限制建议用英文和数字或者下划线中划线

2.下载软件包：npm i 软件包名称

当前项目下的 node_modules 中，并记录在 package.json 中

NPM安装项目中所有依赖

1.我们拿到了一个别人编写的项目，但是没有 node_modules，项目能否正确运行？

不能，因为缺少了项目需要的依赖软件包，比如要使用 dayjs 和 lodash 但是你项目里没有这个对应的源码，项目会报错的

2.拿别人的项目为何不给我 node_modules？

因为每个人在自己的本机使用 npm 下载，要比磁盘间传递要快（npm 有缓存在本机）

3.如何得到项目需要的所有依赖软件包呢？

直接在项目目录下，运行终端命令：npm i 即可安装 package.json 里记录的所有包和对应版本到本项目中的 node_modules

4.当前项目中只有 package.json 没有 node_modules 怎么办?

当前项目目录下，打开终端，执行 npm i 安装所有依赖软件包

---

NPM全局软件包 -nodemon

1. 软件包区别：

   • 本地软件包：当前项目内使用，封装属性和方法，存在于 node_modules

   • 全局软件包：本机所有项目使用，封装命令和工具，存在于系统设置的位置

2. nodemon 作用：替代 node 命令，检测代码更改，自动重启程序

3. 使用：

   1. 安装：npm i nodemon -g （-g 代表安装到全局环境中）

   2. 运行：nodemon 待执行的目标 js 文件

nodemon 是一个可以在修改文件时自动重启 node 的工具

nodemon是一个命令行工具,用以辅助项目开发,其作用是检查文件的保存操作,每次文件修改保存之时,都会在命令行中自动执行文件

当您使用Nodemon启动 node.js 应用程序时它将监视任何更改并自动重新启动服务器,从而提高您的工作效率。

使用方法

在控制台输入：

nodemon app.js

替代本来的启动方式：

node app.js

就可以使用 nodemon 启动文件，这样在修改文件的时候就会自动重启。

在NPM脚本使用

一般都是在npm脚本中使用，作为开发环境的配置

... 
 "scripts": {
    "dev":"nodemon app.js"
  },
...

NPM部分命令的缩写

 npm install 和 npm i 是一样
 --save 和 -S 是一样
 --save-dev 和 -D 是一样的

区别:

-S, --save 安装包信息将加入到dependencies（生产阶段的依赖,也就是项目运行时的依赖，就是程序上线后仍然需要依赖）

-D, --save-dev 安装包信息将加入到devDependencies（开发阶段的依赖，就是我们在开发过程中需要的依赖，只在开发阶段起作业的）

7.Node.js常用命令

下一篇： Node.js与Webpack笔记（二）-CSDN博客