第6章 Node.js基础

JavaScript 运行时环境,前端工具链的基石

作者:zyyc-0336  |  日期:2026-06-12

本文是前端学习路径第6章

前置依赖:第5章 模块化与导入导出

下一章:第7章 命令行基础

📋 学习路径建议
  1. 先理解 Node.js 是什么、和浏览器 JS 有什么区别
  2. 安装 Node.js 并验证版本
  3. 练习运行 .js 文件和 REPL 模式
  4. 熟悉 fspath 等常用内置模块
  5. 理解 CommonJS 与 ESM 两种模块系统
  6. 建立 Node.js 与前端开发之间的联系
⚠️ 常见错误提示
错误信息原因解决方案
'document' is not defined在 Node.js 中使用了浏览器 APINode.js 没有 documentwindow,改用对应 Node API
require is not defined在 ESM 模块中使用了 require()改用 import 语法,或去掉 "type": "module"
Cannot use import outside a module在 CommonJS 模块中使用了 importpackage.json 中添加 "type": "module"
SyntaxError: Unexpected token文件扩展名不匹配模块系统检查 .js / .mjs 扩展名是否正确

6.1 什么是 Node.js

6.1.1 基本概念

一句话理解: Node.js 让 JavaScript 脱离浏览器,可以在电脑上直接运行。

打个比方:

Node.js 的核心技术:

要素说明
V8 引擎Google Chrome 的 JS 引擎,负责执行 JavaScript 代码
事件驱动基于事件循环,适合处理高并发请求
非阻塞 I/O读写文件时不会"卡住",可以同时做其他事情

6.1.2 Node.js vs 浏览器 JavaScript

虽然都用 JavaScript 语法,但运行环境完全不同:

对比项Node.js浏览器 JS
全局对象globalwindow
DOM 操作❌ 没有✅ 有 document
文件系统访问✅ 可以读写文件❌ 受限(安全原因)
网络请求✅ 完整能力fetch / XMLHttpRequest
模块系统CommonJS / ESM仅 ESM
主要用途服务器、工具、脚本页面交互、UI 展示

6.1.3 为什么前端要学 Node.js

对于前端开发者来说,Node.js 是绕不开的基础设施:

用途说明举例
npm 包管理所有前端依赖都通过 npm 安装npm install react
构建工具Vite、webpack 都运行在 Node.js 上代码打包、压缩、转译
服务端渲染 (SSR)Next.js 在 Node.js 上渲染页面首屏加载更快
API 服务用 Node.js 写后端接口Express、Koa
开发脚本自动化任务、数据处理批量重命名文件

💡 类比: 如果前端开发是"盖房子",那 Node.js 就是"建筑工具"——你不需要精通它,但必须会用它。

6.2 安装与验证

6.2.1 下载安装

  1. 访问官网:https://nodejs.org
  2. 下载 LTS(长期支持)版本(推荐,稳定可靠)
  3. 按照安装向导一路点击"下一步"即可

⚠️ 注意: 选择 LTS 版本,不要选 Current 版本。LTS 是经过验证的稳定版,Current 是尝鲜版。

6.2.2 验证安装

打开终端(命令行),输入以下命令:

# 查看 Node.js 版本
node -v
# 输出示例:v20.11.0

# 查看 npm 版本
npm -v
# 输出示例:10.2.4

如果两个命令都能输出版本号,说明安装成功 ✅

6.2.3 版本管理工具 nvm

当你的电脑上有多个项目,需要不同版本的 Node.js 时,可以使用 nvm(Node Version Manager)

命令作用
nvm install 20安装 Node.js 20.x 版本
nvm use 20切换到 20.x 版本
nvm list查看已安装的所有版本

💡 初学阶段先用官方安装包就够了。等你同时维护多个项目时,再了解 nvm。

6.3 运行 JS 文件

6.3.1 用 node 命令运行文件

创建一个文件 hello.js

// hello.js
console.log('你好,Node.js!')
console.log('我在终端里运行,不是在浏览器里')

在终端中运行:

node hello.js
# 输出:
# 你好,Node.js!
# 我在终端里运行,不是在浏览器里

类比: node hello.js 就像在说"Node.js,请帮我执行这个文件"。

6.3.2 REPL 交互模式

REPL 是 Read-Eval-Print Loop 的缩写,意思是"读取-执行-打印-循环"。

直接在终端输入 node(不带文件名),进入交互模式:

$ node
> 1 + 1
2
> console.log('hello')
hello
> .exit
# 退出 REPL
REPL 命令作用
输入代码后回车立即执行
.exit 或按 Ctrl+C 两次退出 REPL
Ctrl+L清屏

💡 REPL 适合快速测试一行代码,正式开发还是写 .js 文件。

6.3.3 命令行参数 process.argv

process.argv 是一个数组,包含启动命令的所有参数:

// args.js
console.log(process.argv)
node args.js hello world
# 输出:
# [
#   'C:\\Program Files\\nodejs\\node.exe',
#   'C:\\Users\\you\\args.js',
#   'hello',
#   'world'
# ]
索引内容
[0]Node.js 可执行文件的路径
[1]当前运行的脚本文件路径
[2]你传入的参数

6.3.4 与浏览器的区别

在 Node.js 中运行 JS,以下浏览器 API 不可用

// ❌ 这些在 Node.js 中会报错
console.log(window)      // ReferenceError: window is not defined
console.log(document)    // ReferenceError: document is not defined
document.getElementById  // 同样报错
alert('hello')           // 同样报错

但这些是 可以使用 的:

// ✅ Node.js 专有
console.log('控制台输出')        // 可以用
process.exit(0)                 // 退出进程
const fs = require('fs')        // 读写文件

6.4 Node.js 内置模块

Node.js 自带了很多实用模块,不需要安装就能使用。就像一个"工具箱",开箱即用。

6.4.1 fs 模块(文件系统)

fs = file system,用来读写文件和文件夹。

const fs = require('fs')

// 读取文件
fs.readFile('data.txt', 'utf8', (err, data) => {
  if (err) {
    console.log('读取失败:', err.message)
    return
  }
  console.log('文件内容:', data)
})

// 写入文件(如果文件不存在会自动创建)
fs.writeFile('output.txt', '你好,世界!', (err) => {
  if (err) {
    console.log('写入失败:', err.message)
    return
  }
  console.log('写入成功!')
})

// 同步判断文件/文件夹是否存在
if (fs.existsSync('./myFolder')) {
  console.log('文件夹已存在')
} else {
  // 创建文件夹
  fs.mkdirSync('./myFolder')
  console.log('文件夹已创建')
}
方法作用同步版本
readFile异步读取文件readFileSync
writeFile异步写入文件writeFileSync
existsSync判断路径是否存在
mkdirSync创建文件夹
unlink删除文件unlinkSync

💡 同步 vs 异步: 同步方法会"阻塞"后续代码执行,异步方法不会。初学阶段用同步也没关系,理解即可。

6.4.2 path 模块(路径处理)

path 模块帮你拼接和解析文件路径,不用再手动拼字符串。

const path = require('path')

// 拼接路径(自动处理斜杠方向)
const fullPath = path.join('/Users/zhangsan', 'documents', 'file.txt')
console.log(fullPath)
// 输出:/Users/zhangsan/documents/file.txt

// 获取绝对路径
const absPath = path.resolve('src', 'index.js')
console.log(absPath)
// 输出:C:\Users\21371\src\index.js

// 获取文件扩展名
console.log(path.extname('photo.jpg'))    // .jpg
console.log(path.extname('index.html'))   // .html
console.log(path.extname('README'))       // (空字符串)

// 获取文件名
console.log(path.basename('/a/b/c/hello.js'))  // hello.js
方法作用示例
path.join()拼接路径片段path.join('/a', 'b')/a/b
path.resolve()获取绝对路径path.resolve('src')C:\...\src
path.extname()获取文件扩展名path.extname('a.js').js
path.basename()获取文件名path.basename('/a/b.js')b.js
path.dirname()获取目录路径path.dirname('/a/b.js')/a

💡 优先使用 path.join() 不同操作系统的路径分隔符不同(Windows 用 \,Mac/Linux 用 /),用 path.join() 可以自动兼容。

6.4.3 os 模块(系统信息)

os = operating system,获取操作系统相关信息。

const os = require('os')

console.log(os.hostname())   // 电脑名称
console.log(os.platform())   // 操作系统:win32 / darwin / linux
console.log(os.totalmem())   // 总内存(字节)
console.log(os.freemem())    // 可用内存(字节)
console.log(os.cpus())       // CPU 信息数组

6.4.4 http 模块(创建服务器)

这是 Node.js 最经典的功能——用几行代码就能创建一个 Web 服务器。

const http = require('http')

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' })
  res.end('<h1>你好,这是我的第一个服务器!</h1>')
})

server.listen(3000, () => {
  console.log('服务器已启动:http://localhost:3000')
})

运行后在浏览器打开 http://localhost:3000,就能看到页面内容。

💡 现在你只需要知道"Node.js 能创建服务器"这个概念。实际开发中会用 Express 等框架来简化操作。

6.5 模块系统 CommonJS vs ESM

在第5章我们学了 ES6 的 import / export。Node.js 除了支持 ESM,还有一套自己的模块系统叫 CommonJS

6.5.1 CommonJS(传统方式)

// math.js —— 导出
function add(a, b) {
  return a + b
}
module.exports = { add }

// app.js —— 导入
const { add } = require('./math.js')
console.log(add(1, 2))  // 3

6.5.2 ESM(现代方式)

// math.mjs —— 导出
export function add(a, b) {
  return a + b
}

// app.mjs —— 导入
import { add } from './math.mjs'
console.log(add(1, 2))  // 3

6.5.3 如何启用 ESM

有两种方式:

方式做法
方式一package.json 中添加 "type": "module"
方式二使用 .mjs 文件扩展名(代替 .js
// package.json
{
  "name": "my-project",
  "type": "module"
}

6.5.4 对比总结

对比项CommonJSESM
导出语法module.exports = {}export / export default
导入语法require()import
加载方式运行时加载(动态)编译时加载(静态)
顶层 await❌ 不支持✅ 支持
浏览器兼容❌ 不能直接用✅ 浏览器原生支持
发展历史Node.js 早期就有ECMAScript 2015 标准

💡 建议:新项目使用 ESM。 ESM 是 JavaScript 的标准模块系统,浏览器和 Node.js 都支持,也是未来的发展方向。

6.6 Node.js 与前端开发的关系

6.6.1 前端开发中的 Node.js

以下是前端日常工作中 Node.js 的身影:

┌─────────────────────────────────────────────────────┐ │ 前端开发流程 │ │ │ │ 你写的代码 ──→ Node.js 构建工具 ──→ 浏览器运行 │ │ │ │ │ │ │ Vite / webpack │ │ │ │ │ │ │ 打包、压缩、转译 │ │ │ │ │ npm install ──→ 下载第三方包 ──→ node_modules/ │ │ │ │ │ SSR(服务端渲染)──→ Next.js ──→ Node.js 渲染页面 │ │ │ │ │ API 路由 ──→ Node.js 处理请求 ──→ 返回 JSON 数据 │ └─────────────────────────────────────────────────────┘

6.6.2 详细说明

场景Node.js 的角色举例
npm 包管理运行 npm install,下载并管理依赖安装 React、Vue 等库
构建工具执行 Vite、webpack 的打包流程npm run build 生成生产文件
服务端渲染Next.js 在服务端用 Node.js 渲染组件首屏更快、SEO 更好
API 路由Next.js API Routes 在 Node.js 上运行处理表单提交、数据库查询
开发服务器本地启动热更新服务器npm run dev 启动开发环境

💡 一句话总结: Node.js 是前端开发的"操作系统",几乎所有前端工具链都运行在它上面。

6.7 练习

练习 1:运行你的第一个 Node.js 文件
  1. 创建一个文件 test.js,写入 console.log('Hello Node.js!')
  2. 在终端运行 node test.js
  3. 确认终端输出了 "Hello Node.js!"
练习 2:用 fs 创建一个文件
  1. 写一段代码,使用 fs.writeFile 创建一个 note.txt 文件
  2. 文件内容写入今天的日期
  3. 运行脚本,检查文件是否生成
练习 3:用 path 拼接路径
  1. 使用 path.join()'src''components''Button.js' 拼接成完整路径
  2. 使用 path.extname() 获取 'style.css' 的扩展名
  3. 打印结果
练习 4:对比 CommonJS 和 ESM
  1. 创建 cjs-demo.js,用 require() 导入 fs 模块并调用 existsSync
  2. 创建 esm-demo.mjs,用 import 导入 fs 模块并调用 existsSync
  3. 分别用 node cjs-demo.jsnode esm-demo.mjs 运行

本章复盘——Node.js 基础核心要点

序号知识点核心内容
1Node.js 是什么基于 V8 引擎的 JavaScript 运行时,让 JS 脱离浏览器运行
2Node.js vs 浏览器没有 DOM/window,但有文件系统、网络等完整能力
3安装与验证从 nodejs.org 下载 LTS 版本,node -v 验证
4运行 JS 文件node filename.js 运行文件,node 进入 REPL
5fs 模块读写文件、判断存在、创建文件夹
6path 模块拼接路径、获取扩展名、获取文件名
7CommonJS vs ESMrequire/module.exports vs import/export,新项目推荐 ESM
8与前端的关系npm、构建工具、SSR、API 路由都依赖 Node.js

🎯 本章目标达成标志: 你能用 node 运行一个 JS 文件,使用 fspath 内置模块,并区分 CommonJS 和 ESM 两种模块系统。


下一章预告(第9章):我们将学习React 介绍与 JSX——React 的核心概念、JSX 语法、条件渲染和列表渲染。

本文档由 zyyc-0336 编写,最后更新:2026-06-14