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

最新推荐文章于 2022-01-05 16:47:50 发布

赏善罚饿

最新推荐文章于 2022-01-05 16:47:50 发布

阅读量8k

点赞数

分类专栏：前端文章标签： nodejs javascript 前端

本文链接：https://blog.csdn.net/whitefish520/article/details/108422874

版权

前端专栏收录该内容

23 篇文章 7 订阅

订阅专栏

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选项中的入口文件

赏善罚饿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录