NodeJS基础

Node.js 简介

• Node.js概念

  • 简单的说 Node.js 就是运行在服务端的 JavaScript。
  • Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
  • Node.js是一个异步的事件驱动I/O服务端JavaScript环境，
  • 基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

• 网址

  • 中文官网：http://nodejs.cn/
  • 官网：https://nodejs.org/
  • libuv：http://libuv.org/
  • 包管理：https://npmjs.org/
  • WEBServer框架：http://expressjs.com/
  • WEBServer框架：http://koajs.com/
  • Socket通信框架：https://socket.io/
  • 桌面应用框架：https://electronjs.org/
  • 第三方包与资源：https://github.com/sindresorhus/awesome-nodejs

• 特性

  • 单线程
  • 异步IO
  • 事件驱动
  • 非阻塞

• 应用场景

  • IO密集型：擅长
    • 聊天室
    • Web应用
    • API Server
    • 命令行程序
    • 博客
    • 爬虫
    • 管理工具
  • 计算密集型
    • 多进程
  • 实时、精确控制型：不胜任

Node.js快速入门

Node.js基础

• Node.js的组成

  • javascript由三部分组成，ECMAScript DOM BOM
  • Node.js组成部分：ECMAScript Node模块API

• 调试方式

  • Node命令
    • node index.js 执行js文件
    • nodemon index.js 监控执行js文件
  • REPL模式(Read Eval Print Loop)
  • 程序调试
    • 进入：命令行中键入：node
    • 输入调试代码
    • 退出：ctrl+C两次
  • 程序文件
    • 在文件夹中按住shift，鼠标右击，打开命令行
    • Tab键：文件名自动补全
    • ↑键：复制上一步操作
    • node 文件名.js
    • clear：清屏
  • inspect 与 chrome配合
  • IDE：VS Code Webstorm

• Node.js全局对象global

  • 在浏览器中全局对象是window，在Node中全局对象是global。
  • Node中全局对象下有以下方法，可以在任何地方使用，global可以省略。
    • console.log() 在控制台中输出
    • setTimeout() 设置超时定时器
    • clearTimeout() 清除超时时定时器
    • setInterval() 设置间歇定时器
    • clearInterval() 清除间歇定时器

Node.js模块化开发

• JavaScript开发弊端

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

• Node.js中模块化开发规范

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

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

// b.js
// 在b.js模块中导入模块a
let a = require('./a');
// 输出b模块中的version变量
console.log(a.version);
// 调用b模块中的sayHi方法 并输出其返回值
console.log(a.sayHi('sunny')); 

系统模块

• 系统模块
  • Node运行环境提供的API. 因为这些API都是以模块化的方式进行开发的, 所以我们又称Node运行环境提供的API为系统模块
    • const fs= require('fs');
  • fs文件操作 读取
  • fs文件操作 写入
  • path路径操作
    • 不同操作系统的路径分隔符不统一
      • Windows 上是  /
      • Linux 上是 /
  • 相对路径 VS 绝对路径
    • __dirname获取绝对路径
    • 绝对路径不会影响文件是否在当前目录的执行

// 文件读取
const fs= require('fs');
fs.readFile('hello.js', 'utf-8', (err, doc)=> {
  console.log(err);
  console.log(doc);
});

// 文件写入
const fs= require('fs');
const content= '写入成功';
fs.writeFile('demo.txt', '写入的数据', err=> {
  if(err !=null){
    console.log(err);
    return;
  }else{
    console.log('success');
  }
});

// 导入path模块
const path = require('path');
// 路径拼接
let finialPath = path.join('itcast', 'a', 'b', 'c.css');
// 输出结果 itcastac.css
console.log(finialPath);

// 绝对路径
const fs= require('fs');
const path = require('path');
console.log(__dirname);
console.log(path.join(__dirname, 'hello.js'));
fs.readFile(path.join(__dirname, 'hello.js'), 'utf-8', (err, doc)=> {
  console.log(err);
  console.log(doc);
});

第三方模块

• 第三方模块

  • 别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块
  • 由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包。
  • 第三方模块有两种存在形式：
    • 以js文件的形式存在，提供实现项目具体功能的API接口。
    • 以命令行工具形式存在，辅助项目开发
  • 获取第三方模块
    • npmjs.com 第三方模块的存储和分发仓库
    • npm (node package manager) node的第三方模块管理工具
      • npm install 模块名称 下载
      • npm uninstall 模块名称 卸载
    • 全局安装与本地安装
      • 命令行工具：全局安装 安装到公共文件夹
      • 库文件：本地安装
    • 第三方模块 nodemon
      • 在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐。
      • nodemon 是一个命令行工具，用以辅助项目开发。
      • 监控文件的保存操作，当文件保存时，重新执行该文件
        • 使用npm install nodemon –g 下载它
        • 在命令行工具中用nodemon命令替代node命令执行文件
        • ctrl+C 终止操作

• nodemon运行，错误提示：无法加载文件 C:UsersgxfAppDataRoaming pm odemon.ps1，因为在此系统上禁止运行脚本。

  • 解决方案：管理员身份打开powerShell
  • 输入set-ExecutionPolicy RemoteSigned
  • 选择Y 或者A ，就好了

• 第三方模块 nrm

  • nrm ( npm registry manager ) npm下载地址切换工具
  • npm 默认的下载地址在国外，国内下载速度慢
  • 使用步骤
    • 使用npm install nrm –g下载它
    • 查询可用下载地址列表 nrm ls
      • npm -------- https://registry.npmjs.org/
      • yarn ------- https://registry.yarnpkg.com/
      • cnpm ------- http://r.cnpmjs.org/
      • * taobao ----- https://registry.npm.taobao.org/
      • nj --------- https://registry.nodejitsu.com/
      • npmMirror -- https://skimdb.npmjs.com/registry/
      • edunpm ----- http://registry.enpmjs.org/
    • 切换npm下载地址 nrm use 下载地址名称

第三方模块 Gulp

• 第三方模块 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模块
const gulp = require('gulp');
// 使用gulp.task建立任务
// 1、任务名称
// 2，任务的回调函数
gulp.task('first', done=> {
  console.log('gulp任务执行开始');
  // 1，使用gulp.src获取要处理的文件
  // 2，.pipe处理文件 将处理后的文件输出到dist目录
  gulp.src('./src/css/base.css').pipe(gulp.dest('./dist/css'));
  console.log('gulp任务执行结束');
  done();
});

• gulp-cli 命令行工具

  • 安装：npm install gulp-cli -g
  • 在文件的根目录下，执行任务 gulp 任务名称

• Gulp插件

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

• Gulp插件 gulp-htmlmin HTML代码压缩

  • https://www.npmjs.com/package/gulp-htmlmin
  • 下载 npm install --save gulp-htmlmin
  • 引用 const htmlmin = require('gulp-htmlmin');
  • 调用 .pipe(htmlmin({ collapseWhitespace: true }))
  • 命令行 gulp htmlmin

• Gulp插件 gulp-file-include HTML公共代码抽离

  • https://www.npmjs.com/package/gulp-file-include
  • 下载 npm install --save-dev gulp-file-include
  • 引用 const fileinclude = require('gulp-file-include');
  • 存储公共代码 在src文件夹下新建common文件夹，将html公共代码段剪切至新建文件header.html ，即将公共代码段抽离
  • 抽离代码补充 将抽离的代码回调 @@include('./common/header.html')
  • 调用 .pipe(fileinclude())
  • 命令行 gulp htmlmin

// html 任务
// 1.html文件中代码的压缩操作
// 2.抽取html文件中的公共代码
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
gulp.task('htmlmin', done=> {
  console.log('htmlmin任务执行开始');
  // 1，使用gulp.src获取要处理的文件
  // 2，.pipe处理文件 将处理后的文件输出到dist目录
  gulp.src('./src/*.html')
    .pipe(fileinclude())
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('./dist'));
  console.log('htmlmin任务执行结束');
  done();
});

• Gulp插件 gulp-less less语法转换成css

  • https://www.npmjs.com/package/gulp-less
  • 下载 npm install gulp-less
  • 引用 const less = require('gulp-less');
  • 调用 .pipe(less())
  • 命令行 gulp cssmin

• Gulp插件 gulp-csso 压缩css

  • https://www.npmjs.com/package/gulp-csso
  • 下载 npm install gulp-csso --save-dev
  • 引用 const csso = require('gulp-csso');
  • 调用 .pipe(csso())
    • restructure 默认设置是使用结构最小化以实现最大压缩。通false如果要禁用此功能来代替。
    • sourceMap 默认值`` 指定此选项以生成源地图；默认情况下，仅当输入文件具有源映射时才生成源映射。通过true以确保生成了源映射或false将其禁用。
    • debug 默认值false 传递true或正数以获取有关缩小过程的一些调试信息。
  • 命令行 gulp cssmin

// 引用gulp模块
const gulp = require('gulp');
const less = require('gulp-less');
const path = require('path');
const csso = require('gulp-csso');
// css 任务
// less 语法的转换
// css代码的压缩
gulp.task('cssmin', done=> {
  gulp.src(['./src/css/*.less', './src/css/*.css'])
    .pipe(less({
      paths: [path.join(__dirname, 'less', 'includes')]
    }))
    .pipe(csso({
      restructure: true,
      sourceMap: true,
      debug: false
    }))
    .pipe(gulp.dest('./dist/css'));
  done();
});

• Gulp插件 gulp-babel 转换js

  • https://www.npmjs.com/package/gulp-babel
  • 下载
    • ES7 npm install gulp-babel @babel/core @babel/preset-env --save-dev
    • ES6 npm install gulp-babel@7 babel-core babel-preset-env --save-dev
  • 引用 const babel = require('gulp-babel');
  • 调用 .pipe(babel({presets: ['@babel/env']}))
  • 命令行 gulp jsmin

• Gulp插件 gulp-uglify 压缩js

  • https://www.npmjs.com/package/gulp-uglify
  • 下载 npm install gulp-uglify --save-dev
  • 引用 const uglify = require('gulp-uglify');
  • 调用 .pipe(uglify())
  • 命令行 gulp jsmin

// 引用gulp模块
const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// js 任务
// es6代码转换
// js代码的压缩
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/*')
    .pipe(gulp.dest('./dist/image'));
  gulp.src('./src/lib/*')
    .pipe(gulp.dest('./dist/lib'));
  done();
});

• 构建任务
  • 如果任务名称为'default'，命令行执行任务时只要键入'gulp'，然后回车即可

// 顺序执行
gulp.task('default', gulp.series('htmlmin', 'cssmin', 'jsmin', 'copy'));
// 同时执行
gulp.task('default', gulp.parallel('htmlmin', 'cssmin', 'jsmin', 'copy'));
// 混合执行
gulp.task('default', gulp.series( gulp.parallel( 'htmlmin', 'cssmin'), 'jsmin', 'copy'));

// 完整代码
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const less = require('gulp-less');
const path = require('path');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

gulp.task('first', done=> {
  console.log('gulp任务执行开始');
  gulp.src('./src/css/base.css')
    .pipe(gulp.dest('./dist/css'));
  console.log('gulp任务执行结束');
  done();
});

gulp.task('htmlmin', done=> {
  console.log('htmlmin任务执行开始');
  gulp.src('./src/*.html')
    .pipe(fileinclude())
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('./dist'));
  console.log('htmlmin任务执行结束');
  done();
});

gulp.task('cssmin', done=> {
  gulp.src(['./src/css/*.less', './src/css/*.css'])
    .pipe(less({
      paths: [path.join(__dirname, 'less', 'includes')]
    }))
    .pipe(csso({
      restructure: true,
      sourceMap: true,
      debug: false
    }))
    .pipe(gulp.dest('./dist/css'));
  done();
});

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/*')
    .pipe(gulp.dest('./dist/image'));
  gulp.src('./src/lib/*')
    .pipe(gulp.dest('./dist/lib'));
  done();
});

gulp.task('default', gulp.series( gulp.parallel( 'htmlmin', 'cssmin'), 'jsmin', 'copy'));

package.json文件

• node_modules文件夹的问题

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

• package.json文件的作用

  • 项目描述文件，记录了当前项目信息，例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。
  • 在项目根文件夹下，使用npm init -y命令生成。init初始化的意思
    • 'ISC' 开放源代码
  • 如果别人拿到此项目，没有node_modules依赖文件夹，则根据package.json文件在此文件夹下执行命令npm install自动安装
  • 如果键入命令 npm install --production，则只安装项目依赖

• 项目依赖

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

• 开发依赖

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

• package.json中，scripts的作用

  • 命令别名
  • "build": "nodemon app.js"
  • 如果要在node监控执行app.js文件
  • 则键入命令npm run build

• package-lock.json文件的作用

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

• Node.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选项确定模块入口文件
    • 否则找不到报错