Node.js 基础

发表于 | 分类于

Node.js 基础

1.1 为什么学习Node.js ？

  • 最简单最直接的一点，岗位需要这种技能
  • 能够和后端程序员更加紧密的配合
  • 网站业务逻辑前置，学习前端技术需要后端技术支撑
  • 扩宽知识视野，能够站在更高的角度审视整个项目

1.2 服务器端需要做的事

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

1.3 Node的好处

  • 使用JavaScript语法开发后端应用

  • 一些公司要求前端工程师掌握Node开发

  • 生态系统活跃，有大量开源库可以使用

  • 前端开发工具大多基于Node开发

1.4 Node是什么？

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

2. Node下载安装

  1. 官网下载：链接

  2. 将Node安装目录添加到环境变量中

3. Node基础

在Node环境下执行代码，使用Node命令执行后缀为.js的文件即可

3.1 Node.js全局对象global

在浏览器中全局对象是window，在Node中全局对象是global。与js的全局对象名字作用一致

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

4. Node.js 的模块化开发

4.1 JavaScript 开发弊端

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

4.2 软件中的模块化开发

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

))

4.3 Node.js的模块化开发

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

模块成员导出：

1
2
3
4
5
6
7
8
// a.js
 // 在模块内部定义变量
let version = 1.0;
// 在模块内部定义方法
const sayHi = name => `您好, ${name}`;
// 向模块外部导出数据 
exports.version = version;
exports.sayHi = sayHi;

模块成员导入：

1
2
3
4
5
6
7
 // b.js
 // 在b.js模块中导入模块a
let a = require('./b.js');
 // 输出b模块中的version变量
console.log(a.version);
 // 调用b模块中的sayHi方法 并输出其返回值
console.log(a.sayHi('大兄弟'));

其中，导入模块时，后缀名可以省略 （省略.js）

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

1
2
module.exports.version = version;
module.exports.sayHi = sayHi;

exports是module.exports的别名(地址引用关系)，导出对象最终以module.exports为准,module.exports才是老大哥了。

5. 系统模块

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

5.1 系统模块fs 文件操作

读取内容

1
2
3
4
//导入系统模块
const fs = require('fs')
//读取文件
fs.readFile('文件路径/名称'编码类型'],callback)

写入内容

1
2
3
4
5
6
7
8
9
//需要写入的内容
const content = '我是内容，要写入'
fs.writeFile('文件路径',content,error=>{
	if(err!=null)	
	{
		console.log(err);
	}
	console.log('写入成功');
})

5.2 路径操作path

路径拼接：从url解析出来的路径不一定是服务器中实际上的物理路径，这里往往需要进行路径拼接才能得到实际地址，获取正确的内容。

1
2
3
4
const path = require('path');
//获取当前文件所在的物理路径
console.log(__dirname);
let realPath = path.join(__dirname,'fsRead.js')

在读取文件或者设置文件路径时都会选择绝对路径，因为相对路径有时候相对的是命令行工具的当前工作目录

6. 第三方模块

别人写好的、具有特定f功能的、我们能直接使用的模块即第三方模块，又名包。

第三方模块的两种存在方式：

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

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

6.1 获取第三方模块

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

安装：npm install 模块名

卸载：npm uninstall 模块名

全局安装和本地安装：

  • 命令行工具：全局安装 后面加 -g
  • 库文件：本地安装

6.2 Gulp模块

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

它可以：

  • 项目上线，HTML、CSS、JS文件压缩合并
  • 语法转换（es6、less …）
  • 公共文件抽离
  • 修改文件浏览器自动刷新
gulp的使用
  • 使用npm install gulp下载gulp库文件
  • 在项目根目录下建立gulpfile.js文件
  • 重构项目的文件夹结构 src目录放置源代码文件，dist目录放置构建后的文件
  • 在gulpfile.js文件中编写任务
  • 在命令行工具中执行gulp任务

gulp插件：

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

使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
//引入gulp模块
const gulp = require('gulp');
//引入htmlmin模块
const htmlmin = require('gulp-htmlmin');
//引入fileinclude模块,用于抽离公共部分的代码
const fileinclude = require('gulp-file-include');
//引入less文件转换成css文件的模块gulp-less
const less = require('gulp-less');
//引入压缩css文件的模块gulp-csso
const csso = require('gulp-csso');
//引入转换js文件的模块gulp-babel
const babel = require('gulp-babel');
//引入压缩js文件的模块gulp-uglify
const uglify = require('gulp-uglify');
//gulp使用方法

//gulp.task 新建任务
//任务名   函数
gulp.task('first',done=>{
    console.log("hello,gulp");
    gulp.src('./src/css/base.css')
        .pipe(gulp.dest('./dist/css'));
    done();//告诉gulp已经完成了
});

//html任务 1.将html代码压缩，2、将html中的公共代码抽离
gulp.task('htmlmin',done=>{
    gulp.src('./src/*.html')
        .pipe(fileinclude()) //文件导入include
        .pipe(htmlmin({ collapseWhitespace: true }))//压缩代码
        .pipe(gulp.dest('./dist/'));
        done();
});

//css任务： 1、将less文件转换成css文件 2、将css文件压缩
gulp.task('cssmin',done=>{
    gulp.src(['./src/css/*.less','./src/css/*.css'])
        .pipe(less())//less转换成css          
        .pipe(csso())//css压缩
        .pipe(gulp.dest('./dist/css/'))      
        done();
});

//js任务： 1、es6代码装换 2、代码压缩
gulp.task('jsmin',done=>{
    gulp.src('./src/js/*.js')
        .pipe(babel({
            presets: ['@babel/env'] //根据当前环境支持的类型进行转换
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js/'));
        done();
});

//复制任务
gulp.task('copy',done=>{
    gulp.src('./src/images/*')//复制images
        .pipe(gulp.dest('./dist/images/'))

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

//将任务连起来，一个命令即可执行
gulp.task('default',gulp.series('htmlmin','cssmin','jsmin','copy'));

7. package.json文件

node_modules文件夹问题

文件夹以及文件过多过碎，当我们将项目整体拷贝给别人的时候,，传输速度会很慢很慢.

当别人下载模块时版本不一致也可能导致运行失败。

package.json 存储了包的名称，package-lock.json 存储了包的关系，包括版本号，二者方便了人们，可以直接在package.json目录下使用命令npm install 就可以下载项目所需要的包了。

作用：

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

项目依赖

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

1
2
3
"dependencies": {
  "mime": "^2.4.5"
}

开发依赖

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

1
2
3
"devDependencies": {
    "gulp": "^4.0.2"
  }

8. package-lock.json

作用：

锁定包的版本，确保再次下载时不会因为包版本不同而产生问题,可以加快下载速度