前端学习（二十五）node.js基础

Node开发概述

node开发属于后端开发

为什么要学习后端开发

• 前端人员需要掌握一些后端技术，才能够和后端程序员更加紧密的配合
• 网站业务逻辑前置，学习前端技术需要后端技术支撑（Ajax）
• 扩展知识视野，能够站在更高的角度审视整个项目

后端需要做哪些事情

• 实现网站的的功能（业务逻辑），如登陆等
• 数据库的增删改查

为什么选择node

• 使用JavaScript语法开发后端，而JavaScript是前端的主要语言
• 部分公司网页渲染由node完成
• 生态系统活跃，有大量的开源库可以使用
• 前端开发工具大多基于node开发

Node是什么

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

Node运行环境搭建

node.js运行环境安装

• 建议安装LTS，长期支持版
• 安装完成后node -v查看是否安装成过

Node.Js快速入门

Node.js的组成

• JavaScript由三部分组成：ECMAScript、DOM、BOM
• Node.js是由ECMAScript及Node模块API组成的，包括文件、网络、路径等

Node.js基础语法

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

如何运行node.js程序

在文件所在位置，shift右键打开powershell，输入node接文件名即可

Node.js模块化开发

JavaScript开发弊端

• javascript两大问题：文件依赖、命名冲突

模块化开发

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

• Node.js规定一个js文件就是一个模块，模块内部定义的变量和函数默认情况下，外部无法得到

• 模块内部使用exports对象进行成员导出，使用require方法导入其它模块

VScode如何支持node.js自动补全

• 系统预先安装好node.js和vscode
• 安装cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org
• 权限：管理员身份运行powershell，输入set-ExecutionPolicy RemoteSigned，选择Y或A
• 检查cnmp是否能运行
• 在代码的工程目录下，执行cnpm install --save-dev @types/node
• 此时工程中，多出node_modules目录和package.json文件，此时vscode已经能自动补全node.js了

模块的导出与导入

• 模块md.js

let a = 10;
var hi = name => { console.log('hi ' + name) };

exports.a = a;
exports.hi = hi;

• 使用模块

md = require('./md');

console.log(md.a);
md.hi('node');

• 代码验证

node .\index.js

10
hi node

系统模块

Node运行环境提供的API，都是以模块化的形式存在，因此这些模块又称为系统模块

文件操作fs

• 代码演示

const fs = require('fs');

// fs.writeFile('文件路径/文件名称', '数据', callback);
fs.writeFile('./file.txt', 'hello node.js', err => {
    if (err)
        console.log('write err');
    else
        console.log('write success');
});

// fs.readFile('文件路径/文件名称' [, '文件编码'], callback);
fs.readFile('./file.txt', 'utf-8', (err, doc) => {
    if (err)
        console.log('read err');
    else
        console.log(doc);
});

• 执行结果

node .\index.js
# 执行结果
write success
hello node.js

路径操作path

• 为什么要进行路径拼接：不同操作系统路径分隔符不一样

• windows： \或/

• linux：/

• 文件中的相对路径是相对于当前执行node时终端所在的路径，而不是文件的路径，因此一般使用绝对路径，使用__dirname获取绝对路径

• 导入模块时require使用的相对路径是相对于本文件的，所以一般使用相对路径

• 代码演示

const path = require('path');

// path.join('路径1', '路径2'...);
let filePath = path.join(__dirname, 'index.js');
console.log(filePath);

• 运行结果

node .\index.js
# windows下一般使用\分隔
C:\Users\miracle-\Desktop\11-13node+express\day01\code\glx\index.js
# linux下将使用/分隔

第三方模块

• 为什么是第三方模块

  别人写好的、具有特定功能的、拿来直接使用的模块就是第三方模块

• 第三方模块的两种存在形式

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

• 获取第三方模块

  • npmjs.com：第三方模块的存储和分发仓库
  • npm（node package manager）：node的第三方模块管理工具
  • 下载：npm install 模块名称
  • 卸载：npm uninstall 模块名称

• 本地安装和全局安装

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

模块nodemon

• nodemon是一个命令行工具，用以辅助项目开发

• 在node.js中，每次修改文件都要再命令行工具中重新执行该文件，非常繁琐

• 使用nodemon运行js文件，修改文件后自动重新执行

使用步骤

• 下载并全局安装：npm install nodemon -g
• 在命令行工具中，使用nodemon执行文件

模块nrm

nrm（npm registry manager）：npm下载地址切换工具

npm默认下载地址在国外，下载速度很慢，因此要切换到国内地址下载

使用步骤

• 下载并全局安装：npm install nrm -g
• 查询可用的下载地址列表：nrm ls，带*的是默认下载地址
• 切换到对应的下载地址：nrm use 下载地址名称

#nrm use taobao
Registry has been set to: https://registry.npm.taobao.org/

#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/

模块gulp

gulp是什么

• 它是基于node平台开发的前端构建工具，可以将机械化操作编写成任务，想要执行机械化操作时，只执行一个命令，任务就自动化执行了
• gulp用机械代替手工，提高了开发效率

gulp能做什么

• 项目上线：HTML/CSS/JS文件压缩合并，减少访问需要的流量
• 语法转换：（ES6、LESS等）
• 公共文件抽离
• 修改文件，浏览器自动刷新

gulp的使用

• 下载命令行工具，全局安装：npm install gulp-cli -g

• 下载库文件，本地安装：npm install gulp

• 在项目根目录下新建gulpfile.js文件，文件名不能为其它

• 重构项目的文件夹结构，src目标放源代码，dist目录放构建后的文件

• 在gulpfile.js文件中编写任务

• 在命令行中执行gulp任务

gulp中提供的方法

• gulp.src()：获取任务要处理的文件

• gulp.dest()：输出文件

• gulp.task()：简历gulp任务

• gulp.watch()：监控文件的变化

• 实例代码

//引入gulp模块
const gulp = require('gulp');

//定义任务first
gulp.task('first', (callback) => {
    gulp.src('./src/css/base.css')
        .pipe(gulp.dest('./dist/css'));
    callback();
});

//命令行中执行任务first
gulp first
[15:00:29] Using gulpfile E:\glx\gulpfile.js
[15:00:29] Starting 'first'...
[15:00:29] Finished 'first' after

gulp插件

• HTML文件压缩：gulp-htmlmin
• CCS文件压缩：gulp-csso
• JavaScript语法转化：gulp-babel
• Less语法转化：gulp-less
• 压缩混淆JavaScript：gulp-uglify
• 公共文件包含：gulp-file-include
• 浏览器实时同步：browsersync

抽取公共代码并压缩html代码

• 下载gulp-file-include：npm install gulp-file-include

• 下载gulp-htmlmin：npm install gulp-htmlmin

• 编写gulp任务

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');

gulp.task('htmlmin', (callback) => {
    gulp.src('./src/*.html')
        .pipe(fileinclude())
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('./dist'));
    callback();
})

• 建立新文件保存公共部分
  • 将公共部分的代码，剪切到新文件中
  • 原先文件剪切的位置， 写入如下代码：@@include(’./common/header.html’)
  • 利用@@inlude将公共部分包含进来
• 调用任务：gulp htmlmin

less语法转化和css代码压缩

• 下载gulp-less：npm install gulp-less
• 下载gulp-csso：npm install gulp-csso --save-dev
• 编写任务

const gulp = require('gulp');
const less = require('gulp-less');
const csso = require('gulp-csso');

gulp.task('cssmin', (callback) => {
    gulp.src(['./src/css/*.less', './src/css/*.css'])
        .pipe(less())
        .pipe(csso())
        .pipe(gulp.dest('dist/css'));
    callback();
})

ES6代码转换和JS代码压缩

• 下载gulp-babel及其依赖：npm install gulp-babel @babel/core @babel/preset-env

• 下载gulp-uglify：npm install gulp-uglify

• 编写任务

const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

gulp.task('jsmin', (callback) => {
    gulp.src('./src/js/*.js')
        //将代码转换为当前运行环境所支持的代码
        .pipe(babel({ presets: ['@babel/env'] }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
    callback();
})

复制文件夹和构建任务

gulp.task('copy', (callback) => {
    gulp.src('./src/images/*')
        .pipe(gulp.dest('dist/images'));
    gulp.src('./src/lib/*')
        .pipe(gulp.dest('dist/lib'));
    callback();
})

//gulp version 3
gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);

//gulp version 4
gulp.task('default', gulp.series('htmlmin', 'cssmin', 'jsmin', 'copy', done => done()));

package.json文件

node_modules文件夹的问题

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

package.json文件的作用

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

{
  "name": "test",		//项目名称
  "version": "1.0.0",	//项目版本
  "description": "",	//项目描述
  "main": "index.js",	//项目的主入口文件
  "scripts": {			//命令的别名
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],		//关键字
  "author": "",			//作者
  "license": "ISC",		//协议
  "dependencies": {		//依赖的模块
    "formidable": "^1.2.2",
    "mime": "^2.4.6"
  }
}

• 如何使用
  • 传输文件给他人时，不需要传输node_modules目录，因为package.json以及记录了依赖的模块信息
  • 拿到别人传输过来的node.js项目，首先进入package.json所在目录的命令行
  • 然后执行npm install，不需要带参数，自动下载所有的依赖
  • 如果只想下载项目依赖，执行npm install --production
• 命令的别名
  • 使用方法：npm run 别名
  • 例如：npm run test
  • 作用：执行scripts中对应别名后的语句

项目依赖

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

"dependencies": {
    "formidable": "^1.2.2",
    "mime": "^2.4.6"
  },

开发依赖

• 在项目的开发阶段需要依赖，线上运行阶段不需要依赖的第三方包，称为开发依赖
• 使用npm install 包名 --save-dev，下载的文件会被默认添加到package.json文件的devDependencies字段中

"devDependencies": {
    "gulp": "^4.0.2"
  }

package-lock.json文件的作用

• 负责记录模块与模块之间的依赖关系及版本等信息

• 锁定包的版本，确保再次下载时不会因为包版本不同而产生问题

• 加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需要下载即可， 不需要额外的工作

Node.js中模块的加载机制

模块拥有路径但没有后缀

require('./kiss.js');
require('./baby');

• require方法根据模块路径查找模块，如果是完整路径，直接引入模块
• 如果模块后缀省略，先找同名JS文件
• 如果没有找到同名JS文件，再找同名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选项中的入口文件