跟着小满zs学 nodejs —— 总结篇（一）

小满zs专栏：juejin.cn/column/7274...

介绍

Nodejs并不是JavaScript应用，也不是编程语言，它是JavaScript运行时环境，是开源、跨平台的
Nodejs是构建在V8引擎之上的，V8引擎是由C/C++编写的，因此我们的Js代码需要有C/C++转化后再执行

Npm Package.json

npm（全称 Node Package Manager）是 Node.js 的包管理工具，它是一个基于命令行的工具，用于帮助开发者在自己的项目中安装、升级、移除和管理依赖项

npm 命令
npm init
npm install
npm install <package-name>
npm install <package-name> --save
npm install <package-name> --save-dev
npm install -g <package-name>
npm update <package-name>
npm uninstall <package-name>
npm run <script-name>
npm search <keyword>
npm info <package-name>
npm list：列出当前项目中安装的所有包
npm outdated：列出当前项目中需要更新的包
npm publish
npm login
npm logout
npm config list
npm get registry

Npm install 原理

首先安装的依赖都会存放在根目录的node_modules，默认采用扁平化的方式安装，并且排序规则.bin第一个然后@系列，再然后按照首字母排序abcd等，并且使用的算法是广度优先遍历
在遍历依赖树时，npm会首先处理项目根目录下的依赖，然后逐层处理每个依赖包的依赖
在处理每个依赖时，npm会检查该依赖的版本号是否符合依赖树中其他依赖的版本要求，如果不符合，则会尝试安装适合的版本

扁平化安装

理想情况下，安装某个二级模块时，若发现第一层级有相同名称，相同版本的模块，便直接复用那个模块
非理想情况下，需要安装不同版本的模块，不能进行复用，会单独在一级模块下搞一层node_modules

npm install 后续流程

Npm run 原理

用npm run vite举例
1. 先从当前项目的 node_modules/.bin 去查找可执行命令vite
2. 如果没找到就去全局的 node_modules 去找可执行命令vite
3. 如果还没找到就去环境变量查找
4. 再找不到就进行报错

Npm 生命周期

javaScript 复制代码

    "predev": "node prev.js",
    "dev": "node index.js",
    "postdev": "node post.js"

执行 npm run dev 命令的时候 predev 会自动执行他的生命周期是在dev之前执行，然后执行dev命令，再然后执行postdev，也就是dev之后执行

模块化

Nodejs 环境 原生支持CommonJS模块，这意味着你可以使用require来引入模块、module.exports来导出模块。从 Node.js 14开始，Node.js也开始支持 ES Modules，你可以使用import和export关键字来导入导出模块
浏览器环境 原生支持ES Modules，这意味着你可以使用 import 和 export 。但是，浏览器环境不支持Node.js独有的require、module.exports，也就是不支持CommonJS模块

在vite项目中，根目录下的JavaScript文件（如vite.config.js或者index.js）运行的环境主要是Nodejs环境，该环境用于处理项目配置、插件加载、开发服务器启动等任务。src目录下的JavaScript文件运行的环境通常是浏览器环境。这意味着你可以使用浏览器提供的API，例如：document，window等对象。但是Nodejs环境下的一些模块和方法，例如：require、module.exports、process等在浏览器环境中是无法使用的

Nodejs 全局变量

在 Nodejs 中使用global定义全局变量，定义的变量，可以在引入的文件中直接使用，但要注意引入的顺序要在定义之后。

JavaScript 复制代码

global.xxx = 'xxx';

在浏览器中我们定义的全局变量都在window，nodejs在global，不同的环境还需要判断，于是在ECMAScript 2020 出现了一个globalThis全局变量，在nodejs环境会自动切换成global ，浏览器环境自动切换window

由于 Nodejs 中没有DOM和BOM，除了这些API，其他的ECMAscript API都能用

Nodejs 内置全局API

__dirname
__filename
require module
process
BUffer

CSR SSR SEO

上面讲到 nodejs 环境无法直接操作DOM和BOM，但是使用第三方库可以做到
npm i jsdom，jsdom是一个模拟浏览器环境的库，可以在 nodejs 中使用 DOM API

JavaScript 复制代码

const fs = require('node:fs')
const { JSDOM } = require('jsdom')

const dom = new JSDOM(`<!DOCTYPE html><div id='app'></div></html>`)

const document = dom.window.document

const window = dom.window

fetch('https://api.thecatapi.com/v1/images/search?limit=10&page=1').then(res => res.json()).then(data => {
    const app = document.getElementById('app')
    data.forEach(item=>{
       const img =  document.createElement('img')
       img.src = item.url
       img.style.width = '200px'
       img.style.height = '200px'
       app.appendChild(img)
    })
    fs.writeFileSync('./index.html', dom.serialize())
})

上述 demo 属于SSR（Server-side Rendering 服务端渲染），请求数据和拼接都在服务端完成
现在常用的 vue、react 等框架是在客户端完成渲染拼接的，属于CSR（Client-Side Rendering 客户端渲染）
SEO（搜索引擎优化），CSR应用对SEO不友好