Node.js基础

Node开发概述

Node是什么

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

运行环境

  • 浏览器(软件)能够运行JavaScript代码,浏览器就是JavaScript代码的运行环境
  • Node(软件)能够运行JavaScript代码,Node就是JavaScript代码的运行环境

Node运行环境搭建

官网:https://nodejs.org/en/ 上面会有两个版本 LTS 和Current

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

Node环境安装失败解决办法

  1. 错误代号2502、2503

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

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

1z7HsK.png

  1. 执行命令报错

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

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

1zbyHU.png

Node.js快速入门

Node.js 的组成

JavaScript 由三部分组成,ECMAScript,DOM,BOM。

Node.js是由ECMAScript及Node 环境提供的一些附加API组成的,包括文件、网络、路径等等一些更加强大的 API。

1zbOCd.png

Node.js基础语法

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

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

1zqE2n.png

Node.js全局对象global

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

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

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

模块加载及第三方包

Node.js模块化开发

JavaScript开发弊端

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AWBVuxzY-1587086998366)(https://s2.ax1x.com/2020/02/15/1zqrRA.png)]

Node.js中模块化开发规范

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0AGeQ9sl-1587086998368)(https://s2.ax1x.com/2020/02/15/1zqLZT.png)]

模块成员导出

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

模块成员的导入

// b.js
// 在b.js模块中导入模块a
let a = require('./b.js'); //导入模块时后缀可以省略
// 输出b模块中的version变量
console.log(a.version);
// 调用b模块中的sayHi方法 并输出其返回值
console.log(a.sayHi('黑马讲师')); 

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

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

exports是module.exports的别名(地址引用关系),导出对象最终以module.exports为准

模块导出两种方式的联系与区别

当exports对象和moudle.exports对象指向的不是同一个对象时 以module.exports为准

系统模块

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

系统模块fs 文件操作

f:file 文件 ,s:system 系统,文件操作系统。

读取文件:

// 1.通过模块的名字fs对模块进行引用
const fs=require('fs');
// 2.通过模块内部的readFile读取文件
//fs.reaFile('文件路径/文件名称'[,'文件编码'], callback);
fs.readFile('./1.module.js','utf8',(err,doc)=>{
    // 如果文件读取出错err是一个对象 包含错误信息
    // 如果文件读取正确err是null
    console.log(err);
    console.log(doc);
});

写入文件:

const fs=require('fs');
const content='<h3>测试</h3>';
//fs.writeFile('文件路径/文件名称', '数据', callback);
fs.writeFile('./index.html',content,err=>{
    if(err!=null)
    {
        console.log(err);
        return ;
    }
    else
    {
        console.log("写入成功");
    }
})

系统模块path 路径操作

// 解决不同操作系统的路径分隔符不统一 所以要进行路径拼接
// Windows上是 \ /
// Linux上是 / 
const path=require('path');
// pubilc/uploads/avatar
let finalPath=path.join('public','uploads','avatar');
console.log(finalPath);

相对路径VS绝对路径

  • 大多数情况下使用绝对路径,因为相对路径有时候相对的是命令行工具的当前工作目录
  • 在读取文件或者设置文件路径时都会选择绝对路径
  • 使用__dirname获取当前文件所在的绝对路径
const fs=require('fs');
const path=require('path');
// pubilc/uploads/avatar
fs.readFile(path.join(__dirname,'1.module.js'),'utf8',function(err,doc){
    console.log(err);
    console.log(doc);
})

第三方模块

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

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

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

获取第三方模块

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

下载:npm install 模块名称
卸载:npm uninstall package 模块名称

全局安装与本地安装

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

第三方模块 nodemon

nodemon是一个命令行工具,用以辅助项目开发。
在Node.js中,每次修改文件都要在命令行工具中重新执行该文件,非常繁琐。用这个每次修改保存自动执行

使用步骤

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

第三方模块 nrm

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

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

使用步骤

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

第三方模块 Gulp

  • 基于node平台开发的前端构建工具
  • 将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了
  • 用机器代替手工,提高开发效率。
Gulp能做什么
  • 项目上线,HTML、CSS、JS文件压缩合并
  • 语法转换(es6、less …)
  • 公共文件抽离
  • 修改文件浏览器自动刷新
Gulp使用
  1. 使用npm install gulp下载gulp库文件
  2. 在项目根目录下建立gulpfile.js文件
  3. 重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
  4. 在gulpfile.js文件中编写任务
  5. 在命令行工具中执行gulp任务
Gulp中提供的方法
  • gulp.src():获取任务要处理的文件
  • gulp.dest():输出文件
  • gulp.task():建立gulp任务
  • gulp.watch():监控文件的变化
const gulp = require('gulp');
// 使用gulp.task()方法建立任务
gulp.task('first', () => {
    // 获取要处理的文件
    gulp.src('./src/css/base.css') 
    // 将处理后的文件输出到dist目录
    .pipe(gulp.dest('./dist/css'));
});
Gulp插件
  • gulp-htmlmin :html文件压缩
  • gulp-csso :压缩css
  • gulp-babel :JavaScript语法转化
  • gulp-less: less语法转化
  • gulp-uglify :压缩混淆JavaScript
  • gulp-file-include 公共文件包含
  • browsersync 浏览器实时同步
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');

gulp.task('first',()=>{
    console.log('人生中的一个gulp');
    gulp.src('./src/css/base.css')
        .pipe(gulp.dest('dist/css'));
});
//html 任务
//1.html文件中代码的压缩操作
//2.抽取html文件中的公共代码
gulp.task('htmlmin',()=>{
    gulp.src('./src/*.html')
        //抽取html文件中的公共代码
        .pipe(fileinclude())
        //压缩html中的代码
        .pipe(htmlmin({collapseWhitespace:true }))
        .pipe(gulp.dest('dist'));
})

//css任务
// 1.less语法的转换
// 2.css代码压缩
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任务
//1.es6代码转换
//2.代码压缩
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 3的方式指定依赖任务,你需要使用gulp.series和gulp.parallel,因为gulp任务现在只有两个参数。 
gulp.task('default',gulp.parallel('htmlmin','cssmin','jsmin','copy'));

package.json文件

node_modules文件夹的问题

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

package.json文件的作用

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

项目依赖

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

开发依赖

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

package-lock.json文件的作用

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

Node.js中模块的加载机制

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

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

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

require('find');
  1. Node.js会假设它是系统模块
  2. Node.js会去node_modules文件夹中
  3. 首先看是否有该名字的JS文件
  4. 再看是否有该名字的文件夹
  5. 如果是文件夹看里面是否有index.js
  6. 如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件
  7. 否则找不到报错
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值