前端工程化 之 Node 基础

一、node 基本知识

1. 概念

Node.js是一个基于V8 JavaScript引擎的JavaScript运行时环境

 

ps : 可以看成是由 C++ | JS | C 编写的

也就是说Node.js基于V8引擎来执行JavaScript的代码，但是不仅仅只有V8引擎

• V8可以嵌入到任何C ++应用程序中，无论是Chrome还是Node.js，事实上都是嵌入了V8引擎来执行JavaScript代码
• 在Chrome浏览器中，还需要解析、渲染HTML、CSS等相关渲染引擎，另外还需要提供支持浏览器操作的API、浏览器自己的事件循环等
• Node.js中也需要进行一些额外的操作，比如文件系统读/写、网络IO、加密、压缩解压文件等操作

2. 浏览器和Node.js架构区别

3. Node.js架构

• 编写的JavaScript代码会经过V8引擎，再通过Node.js的Bindings，将任务放到Libuv的事件循环中
• libuv（Unicorn Velociraptor—独角伶盗龙）是使用C语言编写的库
• libuv提供了事件循环、文件系统读写、网络IO、线程池等等内容

Node.js的架构图 : 

4. Node.js的应用场景

• 应用一：目前前端开发的库都是以node包的形式进行管理
• 应用二：npm、yarn、pnpm工具成为前端开发使用最多的工具
• 应用三：越来越多的公司使用Node.js作为web服务器开发、中间件、代理服务器
• 应用四：大量项目需要借助Node.js完成前后端渲染的同构应用
• 应用五：资深前端工程师需要为项目编写脚本工具（前端工程师编写脚本通常会使用JavaScript，而不是Python或者shell）
• 应用六：很多企业在使用Electron来开发桌面应用程序 

二、node 安装 及 多版本切换

1. 安装 Node.js

01 - 下载

ps : 直接下一步下一步下一步，即可安装完成   以往的版本 => 以往的版本 | Node.js

02 - 查看node版本号

终端 | 命令行 : node --version

03 - 查看npm版本号

终端 | 命令行 : npm --version        ps : 安装 node 时会自动安装 npm

04 - 查看安装路径 

终端 | 命令行 : which node | npm

2. node版本管理 - n ( mac )

01 - 清除 npm 缓存

sudo npm cache clean -f

02 - 使用 npm 安装工具 n

sudo npm install -g n

 

ps : 建议关了终端 | 命令行，重新打开

03 - 查看 n 的版本

n --version

04 - 查看已安装的 node 列表

n ls

05 - 查看官方所有的 node 版本

npm view node versions

06 - 安装指定版本的 node

安装 16.17.0 版本  =>  sudo n 16.17.0

安装最新的lts版本 =>  sudo n lts

安装最新的版本     =>  sudo n latest

07 - 切换 node 版本

sudo n   =>  上下键 + 回车 = 切换

 

ps : 切换后，使用 npm --version 查看当前使用的是什么版本

最好使用 sudo n 来切换，如果直接 n 切换，node版本会变，但是npm版本不变！！

08 - 删除指定版本 node

sudo n rm ( 版本号 )

09 - 卸载 n

sudo npm uninstall n -g

3. node版本管理 - nvm ( windows )

01 - 下载

nvm : Releases · coreybutler/nvm-windows · GitHub

02 - 安装

03 - 查看

在nvm安装路径下打开cmd或者git bash  =>  在其他路径下打开会报错的

如果有nvm： commond not found，重新启动电脑

04 - 更改设置

node_mirror: https://npm.taobao.org/mirrors/node/

npm_mirror: https://npm.taobao.org/mirrors/npm/

05 - 重启电脑 

重启后 => 理论上应该为全局配置，可以随地使用了

ps : 若报status145乱码，关掉cmd，重新以管理员身份运行cmd，执行nvm use XXX 即可

06 - 常用命令

查看已安装的nodejs版本

nvm list    

启用node.js版本管理

nvm on    

禁用node.js版本管理(不卸载任何东西) 
nvm off  

安装某一version的node.js
nvm install          => nvm install 14.16.1 | latest 最新版本

使用某一version的nodejs
nvm use              => nvm use 14.16.1

卸载指定版本的nodejs  
nvm uninstall    => nvm use 14.16.1

三、JavaScript 代码执行

1. 基本使用

目前有两种方式可以执行 : 

• 将代码交给浏览器执行
• 将代码载入到node环境中执行
  • 安装Node.js环境，安装过程中会自动配置环境变量
  • 通过终端命令node js文件的方式来载入和执行对应的js文件

2. Node程序传递参数 

01 - 正常情况

正常情况下执行一个node程序，直接跟上对应的文件即可

 

node index.js

02 - 传递参数 

node index.js env=development star

 

获取参数其实是在process的内置对象中的argv属性

3. Node的输出 

• console.log
  • 最常用的输入内容的方式：console.log
• console.clear
  • 清空控制台：console.clear
• console.error
  • 打印错误信息：console.error
• Console | Node.js v16.17.0 Documentation
  • ......

4. Node的REPL

REPL是Read-Eval-Print Loop的简称，翻译为“读取-求值-输出”循环

REPL是一个简单的、交互式的编程环境

01 - 浏览器中

02 - Node中 

1 - 终端 ｜ 命令行 输入 : node    =>   开启环境

2 - 两次 ctrl + c   =>   关闭环境

四、Node 中的全局对象

1. __dirname

获取当前文件所在的路径

ps : 不包括后面的文件名

2. __filename

获取当前文件所在的路径和文件名称

ps : 包括后面的文件名称

3. 全局对象

01 - window

在浏览器中，全局变量都是在window上的，比如有document、setInterval、setTimeout、alert、console等等

02 - global

在Node中，global是一个全局对象，比如process、console、setTimeout等都有被放到global中

03 - globalThis

在新的标准中还有一个globalThis，是指向全局对象的

 

浏览器中    globalThis === window

node中      globalThis === global

04 - 两者区别 

• var定义的变量
  • 浏览器中 : 添加到window对象
  •  Node 中 : 不会添加到global对象
• this指向
  • 浏览器中 : this指向window
  •  Node 中 : this指向global
• DOM操作
  • 浏览器中 : 可以操作
  •  Node 中 : 基本不操作，没有前台页面

4. process对象

process提供了Node进程中相关的信息

• 用node 运行一个文件，相当于开启了一个进程 
• process中拥有比如Node的运行环境、参数信息等
• 传递进来的参数会在process对象的argv属性中

5. 定时器函数

• setTimeout(callback, delay[, ...args])：callback在delay毫秒后执行一次
• setInterval(callback, delay[, ...args])：callback每delay毫秒重复执行一次
• setImmediate(callback[, ...args])：callbackI / O事件后的回调的“立即”执行
  • ​​​​​​​涉及node的事件循环
• process.nextTick(callback[, ...args])：添加到下一次tick队列中
  • ​​​​​​​​​​​​​​涉及node的事件循环

五、Node 之 path 内置模块 

path模块用于对路径和文件进行处理，提供了很多好用的方法

1. 使用的原因 

因为在Mac OS、Linux和window上的路径时不一样的 :

• window上会使用 \或者 \\ 来作为文件路径的分隔符，当然目前也支持 /
• 在Mac OS、Linux的Unix操作系统上使用 / 来作为文件路径的分隔符；

那么如果在window上使用 \ 来作为分隔符开发了一个应用程序，要部署到Linux上面应该怎么办呢 :

• 显示路径会出现一些问题
• 所以为了屏蔽他们之间的差异，在开发中对于路径的操作我们可以使用 path 模块

可移植操作系统接口（英语：Portable Operating System Interface，缩写为POSIX）:

• Linux和Mac OS都实现了POSIX接口
• Window部分电脑实现了POSIX接口

2. path 常见的API

01 - extname

extname : 获取文件后缀名

// 导入内置模块path
const path = require('path');
 
// 1. 测试的文件路径
const filePath = 'C://abc/coder/cba/text.img';
 
// 2. 获取文件后缀名
console.log(path.extname(filePath)); // .img

​​​​​​​02 - basename

basename : 获取文件完整名称

// 导入内置模块path
const path = require('path');
 
// 1. 测试的文件路径
const filePath = 'C://abc/coder/cba/text.img';
 
// 2. 获取文件名,完整
console.log(path.basename(filePath)); // text.img

​​​​​​​03 - dirname

dirname : 获取文件父文件夹路径

// 导入内置模块path
const path = require('path');
 
// 1. 测试的文件路径
const filePath = 'C://abc/coder/cba/text.img';
 
// 2. 获取文件的父文件夹路径
console.log(path.dirname(filePath)); // C://abc/coder/cba

​​​​​​​04 - join

join : 路径的拼接

// 导入内置模块path
const path = require('path');
 
// 1. 测试的文件路径
const filePath1 = '/abc/coder';
const filePath2 = '../sss/a.text';
 
// 2. 拼接路径，从右往左开始解析
console.log(path.join(filePath1, filePath2)); // \abc\sss\a.text

05 - resolve

resolve : ​​​​​​​拼接绝对路径

 

ps : 将多个路径拼接一起, 最终一定返回一个绝对路径: path.resolve

• path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径
• 给定的路径的序列是从右往左被处理的，后面每个 path 被依次解析，直到构造完成一个绝对路径如果在处理完所有给定path的段之后，还没有生成绝对路径，则使用当前工作目录
• 生成的路径被规范化并删除尾部斜杠，零长度path段被忽略
• 如果没有path传递段，path.resolve()将返回当前工作目录的绝对路径 ​​​​​​​

// 导入内置模块path
const path = require('path');
 
// 1. '/abc.txt 这个就是绝对路径
// console.log(path.resolve('./abc/cba', '../why/kobe', '/abc.txt')); // C:\abc.txt
 
// 2. 正常拼接
console.log(path.resolve('./abc/cba', './star/kobe', './abc.txt')); // C:\Users\coder\Desktop\代码\abc\cba\star\kobe\abc.txt
 
// 3. 注意相对路径
console.log(path.resolve('./abc/cba', '../star/kobe', './abc.txt')); // C:\Users\coder\Desktop\代码\abc\star\kobe\abc.txt