day01-node基本知识&插件使用

Nodejs基础知识

目标

• 能够知道Node以及Node.js是什么
• 能够安装Node运行环境
• 能够知道系统环境变量PATH的作用
• 能够使用Node环境执行代码

Node开发的概述

为什么要学习服务器端开发基础

• 能够和后端程序员更加紧密的配合
• 网站业务逻辑前置，学习前端技术需要后端技术支撑（Ajax）
• 扩宽知识视野，能够站在更高的角度审视整个项目

服务器端开发要做的事情

• 实现网站的业务逻辑
• 数据的增删改查

为什么选择Node

• 使用JavaScript语法开发后端应用
• 一些公司要求前端工程师掌握Node开发
• 生态系统活跃，有大量开源库可以使用
• 前端开发工具大多基于Node开发

Node是什么（★★★）

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

运行环境

• 浏览器（软件）能够运行JavaScript代码，浏览器就是JavaScript代码的运行环境
• Node（软件）能够运行JavaScript代码，Node就是JavaScript代码的运行环境

Node.js是什么（★★★）

• Node.js是运行在代码环境之上的语言
• JavaScript代码运行在浏览器中，JavaScript是语言，浏览器是运行环境
• JavaScript代码运行在Node 中，Node.js是语言，Node是运行环境

Node.js环境搭建（★★★）

Node.js环境安装

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

• LTS = Long Term Support 长期支持版 稳定版
• Current 拥有最新特性 实验版

• 双击运行文件，选择相应的安装目录，下一步即可
• 安装完成后，window健+r 弹出运行窗口，输入cmd或者powershell打开命令行窗口,输入 node -v 来查看是否安装成功

Node环境安装失败解决办法

错误代号2502、2503

**失败原因：**系统帐户权限不足。

解决办法：

• 以管理员身份运行powershell命令行工具
• 输入运行安装包命令 msiexec /package node安装包位置

执行命令报错

**失败原因：**Node安装目录写入环境变量失败

**解决办法：**将Node安装目录添加到环境变量中

PATH环境变量

存储系统中的目录，在命令行中执行命令的时候系统会自动去这些目录中查找命令的位置

Node.js快速入门（★★★）

Node.js 的组成

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

Node.js基础语法

• 所有ECMAScript语法在Node环境中都可以使用
• 在Node环境下执行代码，使用Node命令执行后缀为.js的文件即可
• 切换文件目录比较麻烦，可以当当前工作空间里面按住 shift健 加鼠标右键，选择 此处打开命令窗口

Node.js全局对象 global

在浏览器中全局对象是window，在Node中全局对象是global。

Node中全局对象下有以下方法，可以在任何地方使用，global可以省略

• console.log() 在控制台中输出
• setTimeout() 设置超时定时器
• clearTimeout() 清除超时时定时器
• setInterval() 设置间歇定时器
• clearInterval() 清除间歇定时器

模块加载及包

目标

• 能够使用模块导入导出方法
• 能够使用基本的系统模块
• 能够使用常用的第三方包
• 能够说出模块的加载机制
• 能够知道package.json文件的作用

Node.js模块化开发

JavaScript开发弊端

JavaScript在使用时存在两大问题，文件依赖和命名冲突

生活中的模块化开发

软件中的模块化开发

Node.js中模块化开发规范（★★★）

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

模块导出第一种方式:示例代码

A模块

const add = (n1, n2) => n1 + n2;

exports.add = add;

B模块

//const a = require('./03.module-a.js');
//通过 require 进行导入
const a = require('./03.module-a');
console.log(a.add(10, 20));

模块成员导出的另一种方式:示例代码

A模块

const greeting = name => `hello ${name}`;
module.exports.greeting = greeting;

B模块

const a = require('./04.module.exports.js');
console.log(a.greeting('zhangsan'));

两种导出的区别

exports是module.exports的别名(地址引用关系)，导出对象最终以module.exports为准，所以我们在使用的时候就需要去注意，如果 exports 跟 model.exports 指向的是同一个对象，那么不会出问题

Node.js 系统模块

什么是系统模块

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

系统模块fs 文件操作（★★★）

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

读取文件方法

1.获取系统 fs 模块

const fs = require('fs');

2.通过模块内部的readFile读取文件内容

fs.readFile('./01.helloworld.js', 'utf8', (err, doc) => {
	// 如果文件读取出错err 是一个对象 包含错误信息
	// 如果文件读取正确 err是 null
	// doc 是文件读取的结果
	console.log(err);
	console.log(doc);
});

写入文件方法

1.获取系统 fs 模块

const fs = require('fs');

2.通过模块内部的 writeFile 写入内容

fs.writeFile('./demo.txt', '即将要写入的内容', err => {
	if (err != null) {
		console.log(err);
		return;
	}
	console.log('文件内容写入成功');
})

系统模块path 路径操作（★★★）

为什么要进行路径拼接

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

路径拼接语法

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

示例代码：

1.导入path模块

const path = require('path');

2.路径拼接

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

相对路径VS绝对路径

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

第三方模块

什么是第三方模块

别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包。

第三方模块有两种存在形式：

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

使用命令行进行第三方模块的下载和删除

使用 npm 命令：npm (node package manager) ： node的第三方模块管理工具

• 下载：npm install 模块名称
• 卸载：npm unintall package 模块名称

全局安装与本地安装

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

第三方模块- nodemon 模块

nodemon是一个命令行工具，用以辅助项目开发。
在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐，而使用这个模块，可以帮我们监听这个文件的修改，只要修改保存了，就会重新执行一次。

使用步骤

• 使用npm install nodemon –g 下载它
• 在命令行工具中用nodemon命令替代node命令执行文件

第三方模块- nrm 模块

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

npm默认的下载地址在国外，国内下载速度慢

使用步骤

• 使用npm install nrm –g 下载它
• 查询可用下载地址列表 nrm ls
• 切换npm下载地址 nrm use 下载地址名称

第三方模块- Gulp模块

基于node平台开发的前端构建工具，将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了，用机器代替手工，提高开发效率。

Gulp能做什么

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

Gulp使用

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

Gulp提供的方法

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

如果需要执行 gulp里面某一个任务，需要使用gulp给我们提供的命令行工具

• 下载命令： npm install gulp-cli -g
• 使用命令：gulp 任务名称

简单入门：

1.创建一个文件夹

2.创建gulpfile.js 文件

3.下载Gulp模块

4.把项目源代码放入到当前文件夹中

5.创建一个文件夹，放处理好的文件

6.在gulpfile.js里面编写代码

//引入 gulp
const gulp = require('gulp');
// 使用gulp.task建立任务
// 1.任务的名称
// 2.任务的回调函数
gulp.task('first', () => {
	console.log('我们人生中的第一个gulp任务执行了');
	// 1.使用gulp.src获取要处理的文件
	gulp.src('./src/css/base.css')
		.pipe(gulp.dest('dist/css'));//必须使用.pipe 方法，代表处理的意思
});

6.使用命令行来执行 first任务

gulp first

Gulp插件

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

插件的使用

1.下载插件

2.引入模块

3.编写任务

以下就是项目打包上线的时候需要做的一些工作：

html任务 示例demo

目标

• html文件中代码的压缩操作

• 抽取html文件中的公共代码

1.下载插件

npm install gulp-htmlmin

npm install gulp-file-include

2.引入模块

//用于html压缩的
const htmlmin = require('gulp-htmlmin');
//用于公共部分的引入
const fileinclude = require('gulp-file-include');

3.编写任务

gulp.task('htmlmin', () => {
	gulp.src('./src/*.html')
        //引入公共模块，需要在相应的文件里面写上 @@include(文件路径)
		.pipe(fileinclude())
		// 压缩html文件中的代码
		.pipe(htmlmin({ collapseWhitespace: true }))
		.pipe(gulp.dest('dist'));
});

CSS 任务 示例demo

目标

• less语法转换

• css代码压缩

1.下载插件

npm install gulp-csso

npm install gulp-less

2.引入模块

//用于less转换
const less = require('gulp-less');
//用于css压缩
const csso = require('gulp-csso');

3.编写任务

gulp.task('cssmin', () => {
	// 选择css目录下的所有less文件以及css文件
    //如果是多个文件，用数组进行传入
	gulp.src(['./src/css/*.less', './src/css/*.css'])
		// 将less语法转换为css语法
		.pipe(less())
		// 将css代码进行压缩
		.pipe(csso())
		// 将处理的结果进行输出
		.pipe(gulp.dest('dist/css'))
});

js 任务 示例demo

目标

• es6代码转换

• 代码压缩

1.下载插件

npm install gulp-babel @babel/core @babel/preset-env 后面的代表是依赖的插件

npm install gulp-uglify

2.引入模块

//用于 js的语法转换
const babel = require('gulp-babel');
//用于 js压缩混淆
const uglify = require('gulp-uglify');

3.编写任务

gulp.task('jsmin', () => {
	gulp.src('./src/js/*.js')
		.pipe(babel({
			// 它可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
});

拷贝 任务 示例demo

目标

• 复制文件夹

1.引入模块

const gulp = require('gulp');

2.编写任务

gulp.task('copy', () => {

	gulp.src('./src/images/*')
		.pipe(gulp.dest('dist/images'));

	gulp.src('./src/lib/*')
		.pipe(gulp.dest('dist/lib'))
});

构建任务，一起执行

gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);

我们项目打包上线的时候，需要执行很多任务，一个一个执行比较麻烦，我们可以统一一起去执行

package.json相关解释说明

node_modules文件夹的问题

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

package.json文件的作用（★★★）

项目描述文件，记录了当前项目信息，例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。
使用npm init -y命令生成。

{
    "name": "description", //项目名称
    "version": "1.0.0", //版本号
    "description": "", //项目描述
    "main": "index.js", //项目主入口
    "scripts": { //命名的别名
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "nodemon app.js" //取了别名后，只需要输入命令 npm run build
    },
    "keywords": [],//关键字
    "author": "", //作者
    "license": "ISC",//项目遵循协议 ISC 是开放源代码协议
    "dependencies": {//项目的依赖
        "formidable": "^1.2.1",
        "mime": "^2.3.1"
    },
    "devDependencies": {//开发依赖
        "gulp": "^3.9.1"
    }
}

项目依赖

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

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

开发依赖

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

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

这样区分开来的话，方便与我们在不同环境下下载相应的插件，例如，我们项目打包上线的时候，就不需要开发依赖，我们就可以通过命令 npm install --production 来下载项目依赖包

package-lock.json文件的作用

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

Node.js中模块加载机制（★★★）

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

require('./find.js');
require('./find');

• require方法根据模块路径查找模块，如果是完整路径，直接引入模块。
• 如果模块后缀省略，先找同名JS文件再找同名JS文件夹
• 如果找到了同名文件夹，找文件夹中的index.js
• 如果文件夹中没有index.js就会去当前文件夹中的package.json文件中查找main选项中的入口文件
• 如果找指定的入口文件不存在或者没有指定入口文件就会报错，模块没有被找到

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

require('find');

• Node.js会假设它是系统模块
• Node.js会去node_modules文件夹中
• 首先看是否有该名字的JS文件
• 再看是否有该名字的文件夹
• 如果是文件夹看里面是否有index.js
• 如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件
• 否则找不到报错