前后端交互——Node基础

1. Node开发概述

Node是一个基于Chrome V8引擎的JavaScript代码运行环境。

---

2. Node运行环境搭建

Node.js运行环境安装

官网：https://nodejs.org/en/

LTS：长期支持版，稳定版
Current：拥有最新特性，实验版

---

3. Node.js快速入门

3.1 Node.js的组成

• JavaScript由三部分组成：ECMAScript，DOM，BOM。
• Node.js是由ECMAScript及Node环境提供的一些附加API组成的，包括文件、网络、路径等一些更强大的API。

3.2 Node.js基础语法

所有ECMAScript语法在Node环境中都可以使用。

---

4. Node.js模块化开发

4.1 JavaScript开发弊端

存在两大问题：文件依赖和命名冲突。

4.2 软件中的模块化开发

一个功能就是一个模块，多个模块可以组成完整应用，抽离一个模块也不会影响其他功能的运行。

4.2 Node.js中模块化开发规范

• Node.js规定一个JavaScript文件就是一个模块，模块内部定义的变量和函数默认情况下在外部无法得到。
• 模块内部可以使用exports对象进行成员导出，使用require方法导入其他模块。

4.3 模块成员导出

// a.js
//在模块内部定义变量
let version = 1.0;
//在模块内部定义方法
const sayHi = name => '您好, ${name}';
//向模块外部导出数据
exports.version = version;
exports.sayHi = sayHi;

4.4 模块成员的导入

//b.js
//在b.js模块中导入模块a
let a = require('.b/.js');
//输出b模块中的version变量
console.log(a.version);
//调用b模块中的sayHi方法，并输出其返回值
console.log(a.sayHi('张三'));

模块导入时后缀可以省略。

4.5 模块成员导出的另一种方式

module.exports.version = version;
module.exports.sayHi = sayHi;

exports 是 modile.exports 的别名（地址引用关系），导出对象最终以module.exports为准。

---

5. 系统模块

Node运行环境提供的API，因为这些API都是以模块化的方式进行开发的，所以我们又称Node运行环境提供的API为系统模块。

5.1 系统模块fs 文件操作

f：file文件
s：system
文件操作系统

const fs = require('fs');

• 读取文件内容

fs.readFile('文件路径/文件名称'[,'文件编码'], callback);

读取文件内容示例：

//读取上一级css目录下的bace.css
fs.readFile('../css/bace.css', 'utf-8' (err, doc) => {
	//如果文件读取发生错误，参数err的值为错误对象，否则err的值为null
	//doc参数为文件内容
	if(err == null) {
	//在控制台中输出文件内容
	console.log(doc);
	}
});

• 写入文件内容

fs.writeFile('文件路径/文件名称', '数据', callback);

示例：

const content = '<h3>正在使用fs.writeFile写入文件内容</h3>';
fs.writeFile('../index.html', content, err => {
	if(err != null){
	console.log(err);
	return;
	}
	console.log('文件写入成功');
});

5.2 系统模块path 路径操作

路径拼接：

• 不同的操作系统的路径分隔符不统一
• Windows上是 \ /
• Linux上是 /

路径拼接语法：

path.join('路径', '路径', ...)

示例：

//导入path模块
const path = require('path');
//路径拼接
let finialPath = path.join('itcast', 'a', 'b', 'c.css');
//输出结果itcast\a\b\c.css
console.log(finialPath);

5.3 相对路径VS绝对路径

• 大多数情况下使用绝对路径，因为相对路径有时候相对的是命令行工具当前工作目录
• 在读取文件或者设置文件路径时都会选择绝对路径
• 使用__dirname获取当前文件所在的绝对路径

6. 第三方模块

6.1 第三方模块

别人写好的、具有特定功能的、能直接使用的模块。

通常由多个文件组成并且被放置在一个文件夹中，所以又名包。

两种存在形式：

• 以JS文件的形式存在，提供实现项目具体功能的API接口。
• 以命令行工具形式存在，辅助项目开发。

6.2 获取第三方模块

npmjs.com: 第三方模块的存储和分发仓库。

• 下载：npm install 模块
  （无红色报错信息则下载成功）
  
• 卸载：npm unintall package 模块名称

全局安装与本地安装：

• 命令行工具：全局安装
• 库文件：本地安装

6.3 第三方模块 nodemon

nodemon是一个命令行工具，用以辅助项目开发。

避免在每次修改文件后都要在命令行工具中重新执行该文件。

使用步骤：

1. 使用npm install nodemon -g 下载
2. 在命令行工具中用nodemon命令替代node命令执行文件

CTRL+C可以终止操作。

6.4 第三方模块 nrm

nrm (npm registry manager): npm 下载地址切换工具

使用步骤：

1. 使用 npm install nrm -g下载
2. 查询可用下载地址列表 nrm ls
3. 切换npm下载地址nrm use下载地址名称

6.5 第三方模块 Gulp

基于node平台开发的前端构建工具。

将机械化操作编写成任务，想要执行机械化操作时执行一个命令行命令任务就能自动执行了。

用机器替代手工，提高开发效率。

6.6 Gulp能做什么

• 项目上线，HTML、CSS、JS文件压缩合并
• 语法转换（ES6、less…）
• 公共文件抽离
• 修改文件浏览器自动刷新

6.7 Gulp使用

1. 使用npm install gulp 下载gulp库文件
2. 在项目根目录下建立gulpfile.js文件
3. 重构项目的文件夹结构src目录放置源代码文件 dist目录放置构建后文件
4. 在gulpfile.js文件中编写任务
5. 在命令行工具中执行gulp任务

6.8 Gulp中提供的方法

• gulp.src()：获取任务要处理的文件
• gulp.dest()：输出文件
• gulp.task()：建立gulp任务
• gulp.watch()：监控文件的变化

// 引用gulp模块
const gulp = require('gulp');
const { src } = require('vinyl-fs');
// 使用gulp.task建立任务
// 1. 任务的名称
// 2. 任务的回调函数
gulp.task('first', () => {
    console.log('hello world');
    // 1. 使用gulp.src获取要处理的文件
    gulp.src('src/css/base.css')
        .pipe(gulp.dest('dist/css'));
});

6.9 Gulp插件

• gulp-htmlmin：html文件压缩
• gulp-csso：压缩css
• gulp-babel：JavaScript语法转化
• gulp-less：less语法转化
• gulp-uglify：压缩混淆JavaScript
• gulp-file-include：公共文件包含
• browsersunc：浏览器实时同步

下载插件：
npm install gulp-htmlmin
…

// html任务
// 1. html文件中代码的压缩操作
// 2. 抽取html文件中的公共代码
const htmlmin = require('gulp-htmlmin');
gulp.task('htmlmin', () => {
    gulp.src('src/*.html')
        //  压缩html文件中的代码
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist'));
});

// css任务
// 1. less语法转换
// 2. css代码压缩
const less = require('gulp-less');
const csso = require('gulp-csso');
gulp.task('cssmin', () => {
    gulp.src(['src/css/*.less', 'src/css/*.css'])
        .pipe(less())
        .pipe(csso())
        .pipe(gulp.dest('dist/css'))
});

// js任务
// 1. es6代码转换
// 2. 代码压缩
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
gulp.task('jsmin', () => {
    gulp.src('src/js/*.js')
        .pipe(babel({
            // 判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
});

// 复制文件夹
gulp.task('copy', () => {
    gulp.src('src/images/*')
        .pipe(gulp.dest('dist/images'));
    gulp.src('src/lib/*')
        .pipe(gulp.dest('dist/lib'))
});

// 构建任务，直接执行所有任务
gulp.task('defult', ['htmlmin', 'cssmin', 'jsmin', 'copy'])

7. node_modules文件

gulp本身及其依赖的模块。

7.1 node_modules文件夹的问题

1. 文件及文件夹过多过碎，将项目拷贝给他人时传输速度会很慢
2. 复杂的模块依赖关系需要被记录，确保模块版本和当前一致，否则会导致当前项目运行报错

7.2 package.json文件的作用

项目描述文件，记录了当前项目信息，如项目名称、版本、作者、GitHub地址、当前项目依赖了哪些第三方模块等。

使用 npm init -y 命令生成

7.3 项目依赖

• 在项目的开发阶段和线上运营阶段，都需要依赖第三方包，称为项目依赖
• 使用 npm install 包含命令下载的文件会默认添加到 package.json文件的dependencies字段中

{
	"dependencies": {
	"jquery": "^3.3.1"
	}
}

7.4 开发依赖

• 在i项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包，称为开发依赖
• 使用 npm install 包名 --save-dev 命令将包添加到package.json 文件的 devDependencies 字段中

{
	"devDependencies": {
		"gulp": "^3.9.1"
	}
}

7.5 package-lock.json文件的作用

• 锁定包的版本，确保再次下载时不会因为包版本不同而产生问题
• 加快下载速度，因为该文件中已经记录了项目所依赖的第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作

8. Node.js中模块加载机制

8.1 模块查找规则-当模块拥有路径但没有后缀时

require('./find.js');

1. require方法根据模块路径查找模块，如果是完整路径，直接引入模块

require('./find');

2. 如果模块后缀省略，先找同名JS文件再找同名JS文件夹
3. 如果找到了同名文件夹，找文件夹中的index.js
4. 如果文件夹中没有index.js就会去当前文件夹中的package.js文件中查找main选项的入口文件
5. 如果找指定的入口文件不存在或者没有指定入口文件，模块没有被找到

8.2 模块查找规则-当模块没有路径且没有后缀时

require('find');

1. Node.js会假设它是系统模块
2. Node.js会去node_modules文件夹中
3. 首先看是否有改名字的JS文件
4. 再看是否有该名字的文件夹
5. 如果是文件夹看里面是否有index.js
6. 如果文件夹中没有index.js就会去当前文件夹中的package.js文件中查找main选项的入口文件
7. 找不到报错