Node.js入门基础指导教程Node.js 基础

86 阅读 0 评论 57 点赞

我是靠谱客的博主斯文火车，这篇文章主要介绍Node.js入门基础指导教程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下载安装

官网下载：链接
将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
9
 // a.js
  // 在模块内部定义变量
 let version = 1.0;
 // 在模块内部定义方法
 const sayHi = name => `您好, ${name}`;
 // 向模块外部导出数据 
 exports.version = version;
 exports.sayHi = sayHi;

模块成员导入：

复制代码

1
2
3
4
5
6
7
8
  // 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
3
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
5
//导入系统模块
const fs = require('fs')
//读取文件
fs.readFile('文件路径/名称'编码类型'],callback)

写入内容

复制代码

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

5.2 路径操作path

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

复制代码

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

使用：

复制代码

//引入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'));

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
//引入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
4
  "dependencies": {
    "mime": "^2.4.5"
  }

开发依赖

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

复制代码

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

8. package-lock.json

作用：

m install 包名`命令下载的文件会默认被添加到 package.json 文件的 dependencies 字段中

复制代码

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

开发依赖

复制代码

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

8. package-lock.json

作用：

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

最后

以上就是斯文火车最近收集整理的关于Node.js入门基础指导教程Node.js 基础的全部内容，更多相关Node.js入门基础指导教程Node.js内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：Node
浏览次数：86 次浏览
发布日期：2024-08-16 20:40:01
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_7_o_14_fx_14__23__2_3.html

Node.js入门基础指导教程Node.js 基础

Node.js 基础

1.1 为什么学习Node.js ？

1.2 服务器端需要做的事

1.3 Node的好处

1.4 Node是什么？

2. Node下载安装

3. Node基础

3.1 Node.js全局对象global

4. Node.js 的模块化开发

4.1 JavaScript 开发弊端

4.2 软件中的模块化开发

4.3 Node.js的模块化开发

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

5. 系统模块

5.1 系统模块fs 文件操作

5.2 路径操作path

6. 第三方模块

6.1 获取第三方模块

6.2 Gulp模块

gulp的使用

7. package.json文件

8. package-lock.json

8. package-lock.json

最后

评论列表共有 0 条评论

发表评论取消回复

Node.js入门基础指导教程Node.js 基础

Node.js 基础

1.1 为什么学习Node.js ？

1.2 服务器端需要做的事

1.3 Node的好处

1.4 Node是什么？

2. Node下载安装

3. Node基础

3.1 Node.js全局对象global

4. Node.js 的模块化开发

4.1 JavaScript 开发弊端

4.2 软件中的模块化开发

4.3 Node.js的模块化开发

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

5. 系统模块

5.1 系统模块fs 文件操作

5.2 路径操作path

6. 第三方模块

6.1 获取第三方模块

6.2 Gulp模块

gulp的使用

7. package.json文件

8. package-lock.json

8. package-lock.json

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

发表评论取消回复