Node.js
Node.js 介绍
什么是 Node.js?
- 定义：Node.jsNode.js 是一个跨平台JavaScript运行环境,使开发者可以搭建服务器端的JavaScript应用程序。
- 作用：使用Node.js编写服务器端程序
- 编写数据接口，提供网页资源浏览功能等等
- 前端工程化：为后续学习 Vue 和 React 等框架做铺垫
什么是前端工程化？
- 前端工程化：开发项目直到上线,过程中集成的所有工具和技术
- 压缩工具
- 格式化工具
- 转换工具
- 打包工具
- 脚手架工具
- …
- Node.js 是前端工程化的基础（因为 Node.js 可以主动读取前端代码内容）
Node.js 为何能执行JS?
- 首先：浏览器能执行JS 代码，依靠的是内核中的 V8 引擎（C++ 程序）
- 其次： Node.js 是基于 Chrome V8 引擎进行封装（运行环境）
- 区别：都支持 ECMAScript 标准语法，Node.js 有独立的 API
- 注意：Node.js 环境没有 DOM 和 BOM 等``
Node.js 下载与安装
- 要求：下载 node-v16.19.0.msi安装程序(指定版本:兼容 vue-admin-template 模板)
- 链接：https://nodejs.org/zh-cn
- 安装过程：默认下一步即可注释事项：
- 安装在非中文路径下
- 无需勾选自动安装其他配套软件
- 成功验证：
- 打开 cmd 终端，输入 node -v 命令查看版本号
- 如果有显示版本号，则代表安装成功
- ctrl + ` 可在vscode中打开终端，如显示 ‘node’ 不是内部或外部命令，也不是可运行的程序或批处理文件。 需用管理员权限重新打开vscode
模块化
什么是模块化？
- 定义：CommonJS模块是为Node.js打包JavaScript代码的原始方式。Node.js还支持浏览器和其他JavaScript运行时使用的ECMAScript模块标准。在 Node.js 中，每个文件都被视为一个单独的模块。
- 概念：项目是由很多个模块文件组成的
- 好处：提高代码复用性,按需加载,独立作用域
- 使用：需要标准语法导出和导入进行使用
CommonJS标准
- 需求：定义 utils.js 模块,封装基地址和求数组总和的函数
- 使用：
- 导出：
module.exports = {} - 导入：
require('模块名或路径')
- 导出：
- 模块名或路径：
- 内置模块：直接写名字(例如: fs, path, http)
- 自定义模块：写模块文件路径(例如: ./utils.js)4
ECMAScript标准 - 默认导出和导入
- 需求：封装并导出基地址和求数组元素和的函数
- 默认标准使用：
- 导出：
export default{} - 导入：
import 变量名 from '模块名或路径'
- 导出：
- 注意：Node.js默认支持CommonJS语法
- 如需使用ECMAScript标准语法,在运行模块所在文件夹新建package.json文件,并设置{“type” : “module” }
ECMAScript标准 - 命名导出和导入
- 需求：封装并导出基地址和求数组元素和的函数
- 命名标准使用：
- 导出:
export修饰定义语句 - 导入：
import{同名变量}from'模块名或路径'
- 导出:
- 如何选择：
- 按需加载，使用命名导出和导入
- 全部加载，使用默认导出和导入
fs模块 - 读写文件
- 模块：类似插件，封装了方法/属性
- fs 模块：封装了与本机文件系统进行交互的，方法/属性
- 语法：
- 加载 fs 模块对象
- 写入文件内容
- 读取文件内容
const fs = require('fs') // fs 是模块标识符：模块的名字
fs.writeFile('文件路径','写入内容',err => {
// 写入后的回调函数
})
fs.readFile('文件路径',(err, data) => {
// 读取后的回调函数
// data 是文件内容的 Buffer 数据流
})
path模块 - 路径处理
- 问题：Node.js 代码中,相对路径是根据终端所在路径来查找的,可能无法找到你想要的文件
- 建议：在Node.js代码中,使用绝对路径
- 补充：__dirname内置变量(获取当前模块目录-绝对路径)
- windows： 路径使用 \
- mac： 路径使用 /
- 注意: **path.join()**会使用特定于平台的分隔符,作为定界符,将所有给定的路径片段连接在一起
- 语法：
- 加载 path 模块
- 使用 path.join 方法，拼接路径
const path = require('path')
path.join('03','dist/js','index.js')
// windows: '03\dist\js\index.js'
// mac: '03/dist/js/index.js'
URL 中的端口号
- URL：统一资源定位符，简称网址，用于访问服务器里的资源
- 端口号:标记服务器里不同功能的服务程序
- 端口号范围: 0-65535之间的任意整数
- 注意：http 协议，默认访问 80 端口
- 常见的服务程序：
- Web 服务程序：用于提供网上信息浏览功能
- 注意：0-1023 和一些特定端口号被占用，我们自己编写服务程序请避开使用
- 数据库服务程序
- Web 服务程序：用于提供网上信息浏览功能
http模块 - 创建Web服务
- 需求：创建 Web 服务并响应内容给浏览器
- 步骤：
- 加载 http 模块，创建 Web 服务对象
- 监听 request 请求事件，设置响应头和响应体
- 配置端口号并启动 Web 服务
- 浏览器请求 http://localhost:3000 测试 （localhost：固定代表本机的域名）
包的概念
- 包：将模块,代码,其他资料聚合成一个文件夹
- 包分类：
- 项目包：主要用于编写项目和业务逻辑
- 软件包：封装工具和方法进行使用
- 要求：根目录中,必须有package.json文件(记录包的清单信息)
- 注意：导入软件包时，引入的默认是 index.js 模块文件/main 属性指定的模块文件
{
"name": "cz_utils", //软件包名称
"version": "1.0.0", //软件包当前版本
"description": "一个数组和字符串常用工具方法的包", //软件包简短描述
"main": "index.js", //软件包入口点
"author": "Zero", //软件包作者
"license": "MIT" //软件包许可证（商用后可以用作者名字宣传）
}
npm - 软件包管理器
-
定义：
- npm Node.js 标准的软件包管理器。
- 在2017年1月时, npm仓库中就已有超过350000个软件包,这使其成为世界上最大的单一语言代码仓库，并且可以确定几乎有可用于一切的软件包。
- 它起初是作为下载和管理Node.js包依赖的方式,但其现在也已成为前端JavaScript中使用的工具。
-
使用：
- 初始化清单文件：
npm init -y(得到 package.json 文件，有则略过此命令) - 下载软件包:
npm i 软件包名称 - 使用软件包
- 初始化清单文件：
-
npm - 安装所有依赖
- 下载package.json中记录的所有软件包：项目终端输入命令:
npm i
- 下载package.json中记录的所有软件包：项目终端输入命令:
npm - 全局软件包nodemon
-
软件包区别：
- 本地软件包：当前项目内使用,封装属性和方法,存在于 node_modules
- 全局软件包：本机所有项目使用，封装命令和工具，存在于系统设置的位置
-
nodemon作用：替代node命令，检测代码更改，自动重启程序
-
使用：
- 安装:
npm i nodemon -g(-g代表安装到全局环境中) - 运行：nodemon待执行的目标js文件
- 安装:
常用命令
| 功能 | 命令 |
|---|---|
| 执行 js 文件 | node xxx |
| 初始化 package.json | npm init -y |
| 下载本地软件包 | npm i 软件包名 |
| 下载全局软件包 | npm i 软件包名-g |
| 删除软件包 | npm uni 软件包名 |
Webpack
什么是Webpack
-
定义：本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个bundles,它们均为静态资源,用于展示你的内容。
-
静态模块：指的是编写代码过程中的,html,css,js,图片等固定内容的文件
-
打包：把静态模块内容，压缩，整合，转译等（前端工程化）
- 把 less / sass 转成 css 代码
- 把 ES6+ 降级成ES5
- 支持多种模块标准语法
-
问题：为何不学 vite?
- 因为：很多项目还是基于Webpack构建,并为VueReact 脚手架使用做铺垫！
-
使用Webpack
-
需求：封装 utils包,校验手机号长度和验证码长度,在 src/index.js 中使用并打包观察
-
步骤：
- 新建并初始化项目,编写业务源代码
- 下载 webpack webpack-cli 到当前项目中（版本独立），并配置局部自定义命令
- 运行打包命令，自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）
修改Webpack打包入口和出口
- Webpack 配置：影响 Webpack 打包过程和结果
- 步骤：
- 项目根目录，新建 webpack.config.js 配置文件
- 导出配置对象，配置入口，出口文件的路径
- 重新打包观察
- 注意：只有和入口产生直接/间接的引入关系，才会被打包
自动生成html文件
- 插件 html-webpack-plugin:_在 Webpack 打包时生成 html 文件
- 下载html-webpack-plugin本地软件包
npm install --save-dev html-webpack-plugin - 配置webpack.config.js让Webpack拥有插件功能
- 下载html-webpack-plugin本地软件包
打包css的代码
- 加载器 css-loader：解析 css 代码
- 加载器 style-loader：把解析后的 css 代码插入到 DOM
- 步骤：
- 准备 css 文件代码引入到 src/login/index.js 中（压缩转译处理等）
- 下载 css-loader 和 style-loader 本地软件包
- 配置 webpack.config.js 让 Webpack 拥有该加载器功能
- 打包后观察结果
优化 - 提取CSS代码
- 插件 mini-css-extract-plugin：提取 css 代码
- 步骤：
- 下载mini-css-extract-plugin本地软件包
- 配置webpack.config.js让Webpack拥有该插件功能
- 打包后观察效果
- 注意：不能和 style-loader 一起使用
- 好处：css 文件可以被浏览器缓存，减少 js 文件体积
优化 - 压缩
- 使用 插件 css-minmizer-webpack-plugin
- 步骤：
- 下载 css-minimizer-webpack-plugin 本地软件包
- 配置 webpack.config.js 让 webpack 拥有该功能
- 打包重新观察
打包less代码
- 加载器 less-loader：把 less 代码编译为 css 代码
- 步骤：
- 新建 less 代码（设置背景图）并引入到 src/login/index.js中
- 下载less和less-loader 本地软件包
- 配置webpack.config.js让Webpack拥有功能
- 打包后观察效果
- 注意：less-loader 需要配合 less 软件包使用
打包图片
- 资源模块: Webpack5内置资源模块(字体,图片等)打包,无需额外loader
- 步骤：
- 配置 webpack.config.js 让 Webpack 拥有打包图片功能
- 打包后观察效果
- 注意：判断临界值默认为 8KB
- 大于 8KB 文件：发送一个单独的文件并导出 URL 地址
- 小于 8KB 文件: 导出一个 data URI (base64字符串)
搭建开发环境
- 问题：之前改代码，需重新打包才能运行查看，效率很低
- 开发环境：配置 webpack-dev-server 快速开发应用程序
- 作用：启动 Web 服务，自动检测代码变化，热更新到网页
- 注意：dist 目录和打包内容是在内存里（更新快）
- 步骤:
- 下载 webpack-dev-server 软件包到当前项目
- 设置模式为开发模式，并配置自定义命令
打包模式
- 打包模式：告知Webpack使用相应模式的内置优化
- 分类：
| 模式名称 | 模式名字 | 特点 | 场景 |
| 开发模式 | development | 调试代码，实时加载，模块热替换等 | 本地开发 |
| 生产模式 | production | 压缩代码，资源优化，更轻量等 | 打包上线 | - 设置：
- 方式1： 在 webpack.config.js 配置文件设置 mode 选项方式
- 方式2： 在package.json命令行设置mode参数
- 注意：命令行设置的优先级高于配置文件中的，推荐用命令行设置
前端 - 注入环境变量
- 需求：前端项目中,开发模式下打印语句生效,生产模式下打印语句失效
- 问题：cross-env设置的只在Node.js环境生效,前端代码无法访问process.env.NODE_ENV
- 解决：使用Webpack内置的DefinePlugin插件
- 作用：在编译时，将前端代码中匹配的变量名，替换为值或表达式
开发环境调错 - source map
- 问题：代码被压缩和混淆，无法正确定位源代码位置（行数和列数）
- source map：可以准确追踪 error和warning在原始代码的位置
- 设置：webpack.config.js 配置 devtool 选项
- inline-source-map 选项：把源码的位置信息一起打包在 js 文件内
- 注意：source map仅适用于开发环境,不要在生产环境使用(防止被轻易查看源码位置)
解析别名 - alias
- 解析别名：配置模块如何解析，创建 import 引入路径的别名，来确保模块引入变得更简单
- 例如：原来路径如图,比较长而且相对路径不安全
- 解决：在webpack.config.js中配置解析别名@来代表src绝对路径
优化 - CDN使用
- CDN定义：内容分发网络，指的是一组分布在各个地区的服务器
- 作用：把静态资源文件/第三方库放在CDN网络中各个服务器中,供用户就近请求获取
- 好处：减轻自己服务器请求压力,就近请求物理延迟低,配套缓存策略
- 需求：开发模式使用本地第三方库,生产模式下使用CDN加载引入
- 步骤：
- 在 html 中引入第三方库的 CDN 地址 并用模板语法判断
- 配置webpack.config.js中externals外部扩展选项(防止某些import的包被打包)
多页面打包
- 单页面：单个 html 文件，切换 DOM 的方式实现不同业务逻辑展示，后续 Vue/React 会学到
- 多页面：多个 html 文件，切换页面实现不同业务逻辑展示
- 需求：把黑马头条-数据管理平台-内容页面一起引入打包使用
- 步骤：
- 准备源码(html, css, js)放入相应位置,并改用模块化语法导出
- 下载 form-serialize 包并导入到核心代码中使用
- 配置 webpack.config.js多入口和多页面的设置
优化 - 分割公共代码
- 需求：把2个以上页面引用的公共代码提取
- 步骤：
- 配置 webpack.config.js 的 splitChunks 分割功能
- 打包观察效果
HTML学习
Web移动端学习
JS基础学习
Web API学习
JS进阶学习
ajax学习
Node.js与Webpack学习
Git学习
vue学习—更新中
小程序学习—学习中
XML教学视频
508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
