这是我参与「第四届青训营 」笔记创作活动的第29天
1 Node是什么
- Node:是一个基于Chrome V8引擎的JavaScript代码运行环境
- 浏览器（软件）可以运行JavaScript，是JavaScript的代码运行环境
- Node（软件）也可以运行JavaScript，也是JavaScript的代码运行环境
2 Node.js运行环境搭建
- 安装：
- 官网下载：nodejs.org/en/
- 版本：
- 16 LST：较稳定 √
- 18：新 但不稳定
3 Node.js组成
- ECMAScript：基础语法都可以使用
- Node模块API: 文件、网络、路径等
4 Node.js模块化开发
4.1 JS开发弊端
- 文件依赖：关系不明
- 命名冲突：导致代码覆盖
4.2 模块化开发
多个模块组成完整应用，抽离一个模块不会影响其他功能的运行
4.3 Node.js中模块开发规范
-
一个js文件就是一个模块，模块内部定义的变量和函数外部无法访问。
-
模块内部声明模块依赖关系：
- 导出成员，使其可以在模块外部被访问
- exports.属性名（函数名） = 属性值（导出函数）
- module.exports.属性名（函数名）= 属性值（导出函数）
- 两种导出方式联系与区别：
- exports是module.exports的别名（地址引用关系），即两者指向同一内存空间。
- 当两者指向地址不同时（module.exports重新赋值一个新对象）导出对象最终以module.exports为准
- exports不能赋值一个新对象，该写法错误，因为以module.exports为准
- 导入其他模块
- require方法：
- A模块 = require(A模块)
- A模块.函数名()
- 导入模块时后缀(.js)可以省略
- require方法：
//module-a.js文件 const add = (n1,n2) => n1 + n2;//这里函数体只有一句，大括号需要省略，不省略报错 // 导出add函数 exports.add = add;// module-b.js文件 // const a = require('./02-module-a.js'); const a = require('./02-module-a'); console.log(a.add(10,20)); - 导出成员，使其可以在模块外部被访问
4.4 系统模块
- Node运行环境提供的API
4.4.1 文件操作模块fs：
- (1) 使用前先引入
- (2) 读取文件内容：
- 应用场景: 服务器硬盘读取内容，返回给客户端
- 语法：fs.redFile('文件路径/文件名称'[,'文件编码'],callback);
- callback(err,doc)——>Node.js的回调函数都是错误优先的回调函数
- 作用： 当API读取内容时，需要耗时，返回值不能直接拿到文件结果。因此，需要定义一个函数callback：当文件读取完成后，硬盘通知当前API文件读取已完成，可以调用回调函数，然后将文件读取的结果通过函数的参数的方式传递给API。
// 1. 引入fs模块 const fs = require('fs'); // 2. 读取文件内容 fs.redFile('./css/base.css','utf8',(err,doc)=> { // 如果文件读取错误 err的值为错误对象 否则err的值为null // doc参数为文件内容 if(err== null){ // 控制台中输出文件内容 console.log(doc); } }); - (3) 写入文件内容：
- 应用场景：当程序运行报错时，将错误写入错误日志中（一个文件）
- 语法：fs.writeFile('文件路径/文件名称','数据',callback);
- 没有对应文件时，会自动创建该文件。
- 需要耗时，使用callback(err)
// 1. 引入fs模块 const fs = require('fs'); // 2. 读取文件内容 const content = '<h3>正在使用fs.writeFile写入文件内容</h3>' fs.writeFile('./index.html',content, err => { if(err != null){ console.log(err); return; } console.log('文件写入成功'); });
4.4.2 路径操作模块path:
- 路径拼接：
- 为什么要进行路径拼接：不同操作系统的路径分割符不统一
- Windows中为 \ /
- Linux中为 /
- 应用场景：网站中的头像上传功能，需要拼接路径找到写入头像的文件
- 语法：path.join('路径（文件夹名称）','路径（文件名称）',...)
- path.join不是耗时操作，可以直接接收拼接结果
//1. 导入path模块 const path = require('path'); //2. 路径拼接 let finialPath = path.join('itocast','a','b','c.css'); //3. 输出结果 itocast\a\b\c.ss console.log(finialPath);- 相对路径VS绝对路径：
- 大多数情况下使用绝对路径，因为相对路径有时相对的是命令行工具的当前工作目录，而不是当前文件目录，因此不安全。
- __dirname：获取当前文件所在目录的绝对路径；
- 拼接路径：path.join(__dirname, 具体文件)
- 注意：require方法中，相对路径就是相对于当前文件目录，因此可以写相对路径
- 为什么要进行路径拼接：不同操作系统的路径分割符不统一
4.4.3 第三方模块：
- 别人写好的，用来快速实现某功能。大多由多个文件组成并且被放置在一个文件夹中，因此又名“包”。
- 存在形式：
- js文件，提供具体功能的API接口
- 命令行工具形式，辅助项目开发
- 获取方式：
- npmjs.com：第三方模块的存储和分发仓库
- nmp：(node package manager), node的第三方模块管理工具，使用其下载第三方模块
- 下载方法：命令行（在文件夹中shift+鼠标右键，进入Powershell窗口）中，输入npm install 模块名称
- 下载位置：默认下载到了命令行开启的那个文件夹下的node_modules中
- 卸载方法：npm uninstall 模块名称
- 本地安装和全局安装：
- 本地安装：将模块下载到当前目录，供当前项目使用
- 库文件
- 全局安装：将模块下载到公共目录，供所有项目使用
- 命令行工具
- 本地安装：将模块下载到当前目录，供当前项目使用
- nodemon：命令行工具，辅助项目开发
- 使用场景：在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，繁琐，使用nodemon优化
- 主要功能：监控文件的保存操作。当文件发生保存操作时，会重新执行该文件
- 使用步骤：
- a) 下载: npm install nodemon -g (-g表示golabel 全局安装)
- b) 替代：在命令行工具中用nodemon命令去替代node命令执行文件
- nodemon XXX.js
- c) 终止：在命令行中输入ctrl + c退出该模块
- nrm：(node registry manager), npm下载地址切换工具
- 使用场景：npm默认服务器在国外，国内下载速度慢；可以切换到国内服务器：npm.taobao.org, 提高下载速度
- 使用步骤：
- a) 下载: npm install nrm -g
- b) 查询国内可用下载地址列表：nrm ls
- c) 切换地址：nrm use 下载地址名称
- Gulp：基于node平台开发的前端构建工具
- 使用场景：将机械化操作编写成任务，执行命令行命令任务使得机械操作自动执行，以提高开发效率。
- 具体功能：
- 项目上线；HTML,CSS,JS文件压缩合并
- 语法转换（es6,less...）
- 公共文件抽离
- 修改文件浏览器自动刷新
- 使用步骤：
- a) 下载库文件: npm install gulp (本地安装)
- b) 创建文件：在项目根目录下建立gulpfile.js文件(文件名字不能写错！)
- c) 重构项目文件夹目录：
- src目录：放置源代码文件
- dist目录：放置构建后文件
- d) 编写任务：在gulpfile.js文件中编写任务
- gulp中提供的方法：
- gulp.src(): 获取任务要处理的文件
- gulp.dest(): 输出文件
- gulp.task(任务名，任务的回调函数): 建立gulp任务; 任务名区分不同任务
- gulp.watch(): 监控文件的变化
// 1.引用模块 const gulp = requires('gulp'); // 2. 建立任务 gulp.task('first',() => { // （1）使用gulp.src()获取任务要处理的文件：带名字的路径 gulp.src('./src/css/base.css') // （2）将处理后的文件输出到dist // pipe: 处理的意思 将文件放入pipe会自动执行 // 注意： 必须将要处理的内容放入.pipe()中，上一句末尾不能加; .pipe(gulp.dest('./dest/css')); - gulp中提供的方法：
- e) 执行任务：在命令行工具中执行gulp任务
- 安装gulp同名工具：npm install gulp-cli -g
- 执行任务：gulp 任务名称
- 错误记录1：
- 原因：任务的回调函数是匿名函数
- 解决办法1：使用done来进行回调。gulp会自动将这个回调函数作为一个参数返回到任务中，在完成的时候一定要调用这个函数。
gulp.task('first',(done) => { console.log('人生中第一个gulp执行了'); gulp.src('./src/css/base.css') .pipe(gulp.dest('./dist/css')); done();- 解决办法2：在异步请求机制中，是有一个Promise对象的，它包含了请求的过程中所有内容。(还不懂！！！)
gulp.task('first',() => { return new Promise(function (resolve,reject){ resolve(); console.log('人生中第一个gulp执行了'); gulp.src('./src/css/base.css') .pipe(gulp.dest('./dist/css')); }) });
- Gulp插件：
-
使用场景：gulp为轻内核第三方模块，自带的5个方法只能做基础操作，所有其他功能需要通过插件实现。
-
插件类型：
- gulp-htmlmin: html文件压缩
- gulp-csso: css文件压缩
- gulp-babel: ES6语法转化为ES5语法
- gulp-less: less语法转化
- gulp-uglify: 压缩混淆JavaScript
- gulp-file-include: 公共文件包含
- browsersync: 浏览器实时同步
- ...
-
插件使用：
- a) 下载：npm instll 插件名
- b) 引入插件：require('插件名')
- c) 调用插件：查询文档API和useage即可,不需要记住,因为太多了。 gulp插件查询：gulpjs.com/plugins/
-
错误记录2：
-
原因：Gulp 多任务执行报错：AssertionError [ERR_ASSERTION]: Task function must be specified
-
解决办法: Gulp 提供了两个强大的组合方法： series() 和 parallel()，允许将多个独立的任务组合为一个更大的操作。这两个方法都可以接受任意数目的任务（task）函数或已经组合的操作。series() 和 parallel() 可以互相嵌套至任意深度。如果需要让任务（task）按顺序执行，请使用 series() 方法。
// 构建任务: 在执行任务前，需要先依次执行后面的任务 // default任务 在命令行执行时 可以省略名称 只写gulp即可 gulp.task('default',gulp.series('htmlmin','cssmin','jsmin','copy'));
-
-
- package.json文件： 文件根目录下
- node_modules文件夹的问题：
- 文件夹以及文件过多，当我们将项目拷贝给别人时，影响传输速度
- 模块依赖关系复杂，版本需要和当前保持一致，否则会导致项目运行报错
- package.json文件的作用：
- 项目描述文件，记录当前项目的信息，比如项目名称，版本，作者，github地址，依赖了那些第三方模块等；传递项目时，不需要传递node_modules文件夹，只要有该文件即可自动安装依赖的文件
- 恢复node_module文件夹：
- 在项目目录文件命令行中安装依赖的第三方模块：npm install
- package.json文件生成：
- 使用命令 npm init -y(-y表示不填写任何值 都是用默认信息)
- 注意：json文件中不能写注释
- 项目依赖：项目开发和线上运营阶段都需要依赖的第三方包
- 使用npm install 包名 命令安装的包都会添加到package.json文件的dependencies中
- 开发依赖：项目开发阶段需要依赖，线上运营不依赖的第三方包
- 使用npm install 包名 --save-dev 命令将包添加到package.json文件的devDependencies中
- 区分两种依赖的好处：
- 在不同的运行环境下，安装不同的包
- 开发环境：npm install 安装全部依赖到node_modules文件夹
- 线上服务器环境：npm install --production 仅安装项目依赖到node_modules文件夹
- scripts: 存储命令的别名
- 使用方法：npm run 别名
- 好处：使用命令较长时，可以简略
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build":"nodemon app.js" }
- node_modules文件夹的问题：
- package-lock.json文件：
- 作用：记录模块与模块之间的关系，模块版本，下载地址等
- 好处：
- 锁定包的版本。防止其他人下载模块版本不一致而产生问题
- 加快下载速度。重新安装时只需要下载即可，不需要其他工作
