study/ZiuChen.github.io

Fork 0

mirror of https://github.com/ZiuChen/ZiuChen.github.io.git synced 2025-08-18 15:39:35 +08:00

ZiuChen d3d725a7d5 docs: 文档更新

2023-02-08 23:10:02 +08:00

13 KiB

Raw Blame History

前端工程化

Node.js

什么是Node.JS Node的应用场景
JS代码执行
Node的输入和输出
Node的全局对象

什么是Node.js

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

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

可以简单总结出Node.js和浏览器的区别

Chrome浏览器
- Blink负责解析HTML文档，遇到JavaScript标签时将内容交给V8引擎
- Blink 是 Google Chrome 浏览器的渲染引擎，V8 是 Blink 内置的 JavaScript 引擎
  - 预分析：检查语法错误但不生成AST树
  - 生成AST：语法分析、词法分析后，生成抽象语法树（AST）
    - AST 为每一行代码定义键值对。初始类型标识符定义 AST 属于一个程序，然后所有代码行将定义在主体内部，主体是一个对象数组。
  - 生成字节码：基线编译器（Ignition）将 AST 转换为字节码
  - 生成机器代码：优化编译器 (Turbofan) 将字节码转换为优化的机器代码。另外，在逐行执行字节码的过程中，如果一段代码经常被执行，V8会直接将这段代码转换并保存为机器码，下次执行不需要经过字节码，优化了执行速度
Node.js
- 只处理JavaScript代码内部V8引擎负责JS代码的执行
- JavaScript代码 -> V8 -> Node.js Bindings -> LibUV
- LibUV是使用C语言编写的库，提供了事件循环、文件系统读写、网络IO、线程池等等内容

![The Node.js System](Front-end Engineering.assets/The Node.js System.jpeg)

Node.js的应用场景

前端开发的库都是以node包形式管理的
npm yarn pnpm成为前端开发使用最多的工具
使用Node.js作为Web服务器开发、中间件、代理服务器
借助Node.js完成前后端渲染的同构应用
编写脚本工具构建项目打包代码等
Electron桌面应用程序

Node.js的参数传递

`process.argv`

process.argv返回一个数组

在代码中通过process.argv[2]读取来自命令行的额外参数
process.argv[0] process.argv[1]分别为node.exe的绝对路径和目标文件的绝对路径

// sum.js
const x = process.argv[2]
const y = process.argv[3]
console.log(x + y)

# 通过命令行运行node执行脚本 并传入参数
node sum.js 5 10 # 15

console

console.log 打印内容到stdout并加上换行符
console.clear 清空当前stdout中的内容
console.trace 打印字符串Trace: 到stderr
- 将堆栈跟踪打印到代码中的当前位置

REPL

在浏览器的控制台选项卡中，我们可以通过输入JS代码与之交互，在Node.js中同样提供了类似的功能

REPL是Read-Eval-Print Loop的简称，翻译为：读取-求值-输出循环
REPL是一个简单的、交互式的编程环境
在命令行窗口中输入node即可进入

Node中的全局对象

在浏览器中，我们可以在JS代码中访问全局对象window，代表当前标签窗口

在Node.js中的全局对象名为global，在控制台输出global对象：

> global
<ref *1> Object [global] {
  global: [Circular *1],
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Function: setTimeout] {
    [Symbol(nodejs.util.promisify.custom)]: [Getter]
  },
  queueMicrotask: [Function: queueMicrotask],
  performance: Performance {
    nodeTiming: PerformanceNodeTiming {
      name: 'node',
      entryType: 'node',
      startTime: 0,
      duration: 2245.9675999991596,
      nodeStart: 1.7120999991893768,
      v8Start: 7.749699998646975,
      bootstrapComplete: 56.47019999846816,
      environment: 28.44789999909699,
      loopStart: 97.62589999847114,
      loopExit: -1,
      idleTime: 2070.0206
    },
    timeOrigin: 1675854922619.539
  },
  clearImmediate: [Function: clearImmediate],
  setImmediate: [Function: setImmediate] {
    [Symbol(nodejs.util.promisify.custom)]: [Getter]
  }
}

常见的全局对象

Buffer
clearImmediate
clearInterval
clearTimeout
console
- 和控制台交互
process
- 提供了Node进程中相关的信息
- Node的运行环境、系统环境变量、参数等
queueMicrotask(callback)
setImmediate(callback, [, ...args])
setInterval(callback, delay[, ...args])
setTimeout(callback, delay[, ...args])
TextDecoder
TextEncoder
URL
URLSearchParams
WebAssembly

特殊的全局对象

__dirname __filename exports module require()

这些变量看起来是全局的，其实并不是（它们仅存在于模块范围内），只是每个模块中都有
它们在命令行交互中是不可使用的
__dirname 当前模块的目录名
__filename 当前模块的文件名
exports module require()将在模块章节中讲解

`global`对象

global是一个全局对象

在Node.js环境下，之前的 process console setTimeout等都有被放入到global中
而在浏览器中，这些全局API是被放到window对象上的

这无异于增加了开发者的心智负担，所以在最新的ECMA标准中出现了globalThis，指向全局对象

在浏览器中的globalThis指向window对象
在Node.js中的globalThis指向global对象

两个全局对象的区别：在浏览器中通过var定义的变量会被放到window对象上，而Node.js不会

模块化开发

认识模块化开发
CommonJS和Node
require函数解析
AMD和CMD（已经被时代淘汰了解即可）
ESModule用法详解
ESModule运行原理

模块化的初衷

将大的程序拆分成一个个小的易于维护的代码
每个模块负责程序中的一部分逻辑，拥有自己的作用域、定义变量名时不会发生冲突
模块可以暴露变量、函数、对象等导出
模块可以导入其他模块的变量、函数、对象

// moduleA.js
const moduleA = (function(){
  const name = "Ziu"
  const age = 18
  const run = () => {
    console.log(name + age + 'is running.')
  }
  return {
    name,
    age,
    run
  }
})()

// moduleB.js
console.log(moduleA.name) // 在其他模块中调用

CommonJS

CommonJS是一种规范，当初命名为ServerJS，旨在浏览器以外的地方使用，后为体现其广泛性，改名为CommonJS，简称CJS

规范是用来指导实现的

Node 是CommonJS在服务端的代表实现
Browserify 是CommonJS在浏览器中的一种实现（正在被淘汰）
WebPack 打包工具具备支持CommonJS的支持和转换

所以，Node.js对CommonJS进行了支持和实现，让JavaScript在Node上运行时可以实现模块化开发

每个.js文件都是一个单独的模块
每个模块中都包含变量exports module.exports require

::: code-group

// env.js
exports.name = 'Ziu'
exports.age = 18

// utils.js
module.exports = {
  sum: function(x, y) {
    return x + y
  }
}

// index.js
const utils = require('utils.js')
utils.sum(1, 2) // 3

const { sum } = require('utils.js')
sum(1, 2) // 3

const { name, age } = require('env.js')
console.log(name, age) // Ziu 18

:::

`exports`的本质

exports和require在Node中的本质

exports是一个对象，我们可以在这个对象中添加很多属性，添加的属性则会被导出
- 在没有向该对象添加任何属性之前，它是一个空对象
当通过require导入时：const env = require('env.js')
- env这个变量等于env.js中的exports对象
- 本质上是env是exports对象的引用赋值

::: code-group

// utils.js
exports.a = 0

// 1s后修改a值
setTimeout(() => {
  exports.a = 1
}, 1000)

// 2s后检查a值
setTimeout(() => {
  console.log(exports.a) // 2
}, 2000)

// index.js
const utils = require('./utils')

console.log(utils.a) // 0

setTimeout(() => {
  console.log(utils.a) // 1
  utils.a = 2 // 反过来修改a值
}, 1500)

:::

在上述代码中，utils对象中的属性a在一秒后被赋值为1，因此在index.js中输出utils.a得到了两次不同的结果

反过来，在index.js中修改导入的utils.a的值后，修改结果也会反映在exports.a上，输出的值为2

实际开发中不要修改导入模块中的变量，改变原模块中变量的值并不规范

`module.exports`

在Node.js中，真正常用的导出方式是module.exports

module.exports本质上就是exports对象（同一个内存地址）
可以直接给exports对象赋值，将需要导出的内容统一导出
给module.exports重新赋值，即改变了exports对象的指向，后续的修改不再影响原模块中的变量

const name = 'Ziu'
const run = () => console.log(name + 'is running.')

module.exports = {
  name,
  run
}

二者的区别

既然如此，为什么还要存在exports这个概念呢？

在CommonJS中是没有module.exports的概念的
为了实现模块的导出，Node.js使用的是Module类，每一个模块都是Module的实例，也就是module
所以在Node.js中真正用于导出的并不是exports，而是module.exports
module对象中的exports属性是exports对象的一个引用
- module.exports === exports === utils

如果module.exports不再引用exports对象了，修改exports对象也就没有意义了

::: code-group

// utils.js
module.exports = {
  name: 'Ziu'
}
exports.age = 18

// index.js
const utils = require('utils.js')
console.log(utils.name) // Ziu
console.log(utils.age) // undefined

:::

当使用module.exports = { ... }后，模块中原有的exports不再被导入识别，导入的内容将变为module.exports指定的对象内容

`require`的本质

require是一个函数，可以帮助我们导入一个文件（模块）中导出的对象

为什么可以省略掉.js后缀，直接使用require('./utils')
为什么可以省略掉index.js，直接使用require('./tools')导入tools/index.js

这涉及到require在匹配路径后的查找规则：

分为三种情况：内置模块、自定义路径、包名

导入Node.js内置的模块，如const path = require('path')
- 直接返回该内置模块并停止后续的查找
根据路径导入自定义的模块，如const utils = require('./{filename}')
- 按照路径寻找该模块./ ../ /
- 如果指定了后缀名，则按照后缀名查找
- 如果未指定后缀名，则：
  1. 直接查找该文件
  2. 查找{filename}.js文件
  3. 查找{filename}.json文件
  4. 查找{filename}.node文件
- 如果按照上述方式没找到文件，则将{filename}作为路径继续查找
- 查找目录下的index文件 {filename}/index
  1. 查找{filename}/index.js文件
  2. ··· ···
- 没找到：报错Cannot find module 'xxx'
包名，如const lodash = require('lodash')
- 到项目根目录的node_modules中查找
- node_modules/{package_name}/index.js
- 当前项目目录的node_modules找不到则继续向上查找，直到查找到根目录的node_modules

模块的加载过程

模块在被第一次引入时，模块中的JS代码会被运行一次
- 代码执行顺序与require的位置相关
模块如果被多次引入，会被缓存，最终只加载一次
- 这是因为每个模块对象module上都有一个属性loaded
- loaded === false表示该模块尚未被加载
- 第二次被require引入时会检查该属性是否为true
如果有循环引用，加载顺序如何？
- 数据结构：图结构（graph）遍历时有深度优先搜索（DFS）、广度优先搜索（BFS）两种算法
- Node采用的是深度优先算法

CommonJS的缺点

加载模块是同步加载的
- 只有等到对应的模块加载完毕，当前模块中的内容才能被执行
- 当然，在服务器中加载JS文件都是本地文件，加载速度非常快，不会受影响
但是在浏览器中使用CommonJS
- 需要先从服务器下载JS文件，后加载运行
- 阻塞JS执行阻塞页面加载
在WebPack中使用CommonJS
- CommonJS会被WebPack解析
- 将CommonJS代码转化为bundle 浏览器可以直接运行

13 KiB Raw Blame History Unescape Escape

前端工程化

Node.js

什么是Node.js

Node.js的应用场景

Node.js的参数传递

process.argv

console

REPL

Node中的全局对象

常见的全局对象

特殊的全局对象

global对象

模块化开发

模块化的初衷

CommonJS

exports的本质

module.exports

二者的区别

require的本质

模块的加载过程

CommonJS的缺点

13 KiB

Raw Blame History

`process.argv`

`global`对象

`exports`的本质

`module.exports`

`require`的本质