Node.js基础
1.Node开发概述
1.1 学习服务器端开发
- 能够和后端程序员更加紧密的配合
- 网站业务逻辑前置,学习前端技术需要后端技术支撑(Ajax)
1.2 服务器端开发要做的事情
- 实现网站的业务逻辑
- 数据的增删查改
1.3 选择node作为后端开发原因
- 使用JavaScript语法作为开发后端应用
- 公司要求前端工程师掌握Node
- 生态系统活跃,有大量开源库可以使用
- 前端开发工具大多基于Node开发
1.4 Node是什么
- Node是一个基于Chrome V8引擎的JavaScript运行环境
- 运行环境
- 浏览器(软件)能够运行JavaScript代码,浏览器就是JavaScript代码的运行环境
- Node(软件)能够运行JavaScript代码,Node就是JavaScript代码的运行环境
2.Node运行环境搭建
2.1 运行环境安装
- Node官网下载下载LTS的稳定版本
3.Node.js快速入门
3.1 Node.js的组成
- JavaScript由三部分组成:ECMAScript,DOM,BOM
- Node.js组成:ECMAScript及其Node环境提供的API组成,包括文件,网络,路径等等
3.2 Node.js基础语法
- 所有的ECMAScript的语法在Node环境中都可以使用
- 在Node环境中执行代码,使用Node命令执行后缀为.js的文件即可
- 在vscode中安装插件code run直接右键run便可运行
3.3 Node全局对象global
- 在浏览器中全局对象是window,在Node中全局对象是global。
- Node中全局对象下有以下方法,可以在任何地方使用,global可以省略。
- console.log()
- setTimeout() 设置超时定时器
- clearTimeout() 清除超时计时器
- setUnterval() 设置间歇定时器
- clearInterval()清除间歇定时器
1
2
3
4
5
6
7global.console.log("我是全局对象global下面的方法");
global.setTimeout(() => {
console.log("超时定时器");
}, 2000);
setTimeout(function () {
console.log("我是间歇定时器");
}, 2000);模块加载及其第三方包
1 Node.js模块化开发概述
1.1 JavaScript开发弊端
- JavaScript在使用时存在两大问题,文件依赖和命名冲突。
先导入的js文件默认在后续的文件中会引用,会有先后顺序之分(在使用bootstrap时必须先导入jQuery js库才能调用bootstrap js库)1.2 软件中的模块化开发
- 一个功能就是一个模块,多个功能可以组合完成完整应用,抽离一个模块不会影响其他功能的运行
1.3 Node.js中模块化开发规范
- Node.js规定一个JavaScript对象就是一个模块(即一个js文件就是一个模块),模块内部定义的变量和函数在默认情况下在外部无法得到
- 模块内部可以使用exports对象进行成员导出,使用require()方法导入其他模块
注意在导入时可以将.js的后缀省略1
2
3
4
5
6
7
8
9module-a.js
const add = (a, b) => a + b;
// 通过exports将成员导出
exports.add = add;
module-b.js
const a = require('./03_module-a');
// 通过require()方法获取模块化中导出的成员,注意这里的.js后缀在导入时可以省略
console.log(a.add(10, 23));1.4 模块化成员导出的两种方式
- exports(见1.3)
- module.exports对象
*ps:exports是module.exports的别名(地址引用关系),导出对象最终以module.exports为准.如果修改了exports则不会影响最终的导入结果(是错误的),修改了module.exports则会影响最终导入的内容,二者对象的修改都会改变二者指向同一个内存地址的引用
*
1 | module.exports.version = version; |
1.5 模块导出两种方式的区别
- 二者在不修改的情况下指向同一个引用地址,修改后指向不同的引用;在二者引用不同的情况下以module.exports的导出为准
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18module.js
const greeting = name => 'hello ${name}';
const x = 100;
exports.x = x;
module.exports.greeting = greeting;
// 二者指向同一个地址,输出结果二者均起作用
// 当修改了二者的值时,以module.exports为准,输出world
module.exports = {
name: "world"
}
exports = {
name: "hello"
}
require.js
const a = require('./05_module.exports');
console.log(a.name);2 系统模块
2.1 什么是系统模块
Node运行环境提供的API,这些API是以模块化的方式开发的,称Node运行环境提供的API为系统模块2.2 系统模块fs文件操作
- f:file,s:system,文件操作系统
2.3 fs文件操作
- 引入文件
1
const fs = require('fs');
- 读取文件内容
1
fs.readFile("文件路径/文件名称",['文件编码',callback])
- 写入文件内容
1 | fs.writeFile('文件路径/文件名称','数据',callback); |
1 | const fs = require('fs'); |
2.4 path路径操作
不同操作系统路径分隔符不统一
- window/
- linux /
路径拼接方法
1
path.join('路径1','路径2',...)
- 使用方法
- 1.先导入路径
- 2.拼接
1
2
3const path = require('path');
const positionpath = path.join('public', 'helloworld');
console.log(positionpath);
- 使用方法
获取文件相对路径和获取相对路径
1
2
3
4// 获取当前路径
console.log(path.join(__dirname, "hello"));
//获取当前文件路径
console.log(__filename);3 第三方模块(包)
3.1 概念
别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块,由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中,所以又名包。
包存在的两种形式
npmjs.com:第三方模块的存储和分发仓库
npm (node package manager) : node的第三方模块管理工具
- 下载:npm install 模块名称
- 卸载:npm uninstall package 模块名称
全局安装与本地安装
- 命令行工具:全局安装(-g)
- 库文件:本地安装(不用加-g)
3.3 第三方模块nodemoon
- nodemon是一个命令行工具,辅助项目开发
在Node.js中,每次修改文件都要在命令行工具中重新执行该文件,非常繁琐 - 使用npmmon命令行工具只需要执行一次,命令行工具就会被挂起,每次修改文件之后挂起的命令行工具就会自动执行,若要取消挂起的命令行工具ctrl+c即可取消
- 使用步骤
- nrm ( npm registry manager ):npm下载地址切换工具
- npm默认的下载地址在国外,国内下载速度慢,通过nrm可以将下载地址切换到国内
- 使用方法
- 基于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任务需要安装gulp-cli脚手架命令行工具
- 安装npm install gulp-cli -g
- 命令行工具中多了gulp命令
- gulp插件的使用(可以直接在官网查看调用方法)
- cd 命令到当前gulp文件夹下
- 需要先安装gulp插件:npm install插件
- require()引用插件
- 调用插件
- gulp中常用的插件
- gulp-htmlmin:html文档压缩
- gulp-csso:压缩css
- gulp-bable:js语法转化
- gulp-uglify:压缩混淆js
- gulp-file-include:公共文件包含
- 将公共代码抽取到commom
- 通过@@include()引入html文件中
1
@@include('./common/header.html')
- browersync:浏览器实时同步
- 在构建多个任务时可以见构建任务部分,同时构建多个任务
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86// 1.引用gulp模块
const gulp = require('gulp');
// 引用插件(先安装插件在引用,最后调用插件)
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const less = require('gulp-less');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
/*
2.使用gulp.task()创建任务
- 参数1:任务的名称
- 参数2:任务的回调函数
*/
// 单独运行task任务不能直接通过node来执行,node执行的是整个文件,需要安装gulp-cli工具来执行gulp的task'任务
gulp.task('first', (cb) => {
console.log("人生中的第一个gulp任务");
// 3.使用gulp.src来获取要处理的文件
gulp.src('./src/css/base.css')
// 输出文件通过.pip()管道,相当于对文件进行了复制操作
.pipe(gulp.dest('dist/css'));
cb();
});
// html任务
/*
1.html文件中代码的压缩操作
2.抽取html文件中的公共代码
*/
gulp.task('htmlmin', (cb) => {
gulp.src('./src/*.html')
// 压缩代码必须放在保存代码的前面
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist'));
cb();//gulp4.0以后不支持同步任务,回调函数不能是匿名函数
})
// css任务
//1.less语法转化
//2.css代码压缩
gulp.task('cssmin', (cb) => {
//数组的形式选定多个不同类型的文件
gulp.src(['./src/css/*.css', './src/css/*.less'])
// less语法转化为css:less()
.pipe(less())
// 将css代码进行压缩:csso()
.pipe(csso())
.pipe(gulp.dest('dist/css'))
cb();
});
// js任务
// 1.es6代码转换
// 2.代码压缩
gulp.task('jsmin', (cb) => {
gulp.src('./src/js/base.js')
// es6代码转换
.pipe(babel({
presets: ['@babel/env']
}))
// js代码压缩
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
cb();
})
// 符合文件夹任务
gulp.task('copyimg', (cb) => {
gulp.src('./src/images/*')
.pipe(gulp.dest('dist/images'));
cb();
});
gulp.task('copylib', (cb) => {
gulp.src('./src/lib/*')
.pipe(gulp.dest('dist/lib'));
cb();
})
// 构建任务,让所有的gulp中的任务都执行
gulp.task('default', gulp.series('htmlmin', 'cssmin', 'jsmin', 'copyimg', 'copylib'));
/*
gulp.task('my-task',gulp.series('a',gulp.parallel('style','script','image'),'b','c',() => {
// Do something after a, b, and c are finished.
}));
*/ - npm官网查询
- gulpjs使用网址
4 package.json文件
4.1 node_modules文件夹问题
- 通过npm下载的文件都在node_module文件夹
- 项目描述文件,记录了当前项目信息,例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。
- 不用拷贝node_modules直接通过packages.json文件使用npm init -y命令生成相应的node_modules文件
- 生成package.json文件
1
npm init -y
- package.json文件结构解析
- “scripts”表示命令别名,如果命令太长可以通过别名的方式执行该行语句:npm run test(别名名称)
- 安装的插件会保存在package.json中的dependency文件中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15{
"name": "11.description",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {//命令的别名,使用别名的方法,npm run test(别名名称)
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
"dependencies": {
"formidable": "^1.2.2",
"mime": "^2.4.4"
}
}
4.3 项目依赖和开发依赖
- 项目依赖
- 在项目的开发阶段和线上运营阶段,都需要依赖的第三方包,称为项目依赖
- 使用npm install 包名命令下载的文件会默认被添加到 package.json 文件的 dependencies 字段中
1
2
3
4
5
6
7命令:
npm install formidable mime //多个包名之间通过空格连接
结果:
"dependencies": {
"formidable": "^1.2.2",
"mime": "^2.4.4"
},
- 开发依赖
- 在项目的开发阶段需要依赖,线上运营阶段不需要依赖的第三方包,称为开发依赖
- 使用npm install 包名 –save-dev命令将包添加到package.json文件的devDependencies字段中
1
2
3
4
5命令:npm install gulp-csso --save-dev
结果:
"devDependencies": {
"gulp-csso": "^4.0.1"
}
注意在通过package.json下载对应的包时:
- 开发环境在服务器端,只安装项目运行依赖:npm install –production
- 开发环境下,需要安装所有依赖:npm install 即可
4.4 package-lock.json文件的作用
- 锁定包的版本,确保再次下载不会对包版本不同产生问题
- 加快下载速度,因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址,重新安装时,只需要下载即可,不需要做额外的工作
5 Node.js中模块的加载机制
5.1 模块查找规则-当模块拥有路径但没有后缀时
1 | require("./find"); |
- require方法根据模块路径查找模块,如果是完整路径,直接引入模块。
- 如果模块后缀省略,先找同名JS文件再找同名JS文件夹
- 如果找到了同名文件夹,找文件夹中的index.js
- 如果文件夹中没有index.js就会去当前文件夹中的- package.json文件中查找main选项中的入口文件
- 如果入口文件的main的选项中为其他名字(a.js)的入口文件则会以其他(a.js)为主,存在index.js也不影响
- 如果找指定的入口文件不存在或者没有指定入口文件就会报错,模块没有被找到
5.2 当文件没有路径且没有后缀时
1 | require("find"); |
- Node.js会假设它是系统模块
- Node.js会去node_modules文件夹中
- 首先看是否有该名字的JS文件\
- 再看是否有该名字的文件夹
- 如果是文件夹看里面是否有index.js
- 如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件,
- 否则找不到报错
本文作者:
SparkParis
本文链接: https://sparkparis.github.io/2020/04/03/Node-%E7%AC%94%E8%AE%B01/
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!
本文链接: https://sparkparis.github.io/2020/04/03/Node-%E7%AC%94%E8%AE%B01/
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!