第6章 Node.js基础
JavaScript 运行时环境,前端工具链的基石
作者:zyyc-0336 | 日期:2026-06-12
本文是前端学习路径第6章
前置依赖:第5章 模块化与导入导出
下一章:第7章 命令行基础
📋 学习路径建议
- 先理解 Node.js 是什么、和浏览器 JS 有什么区别
- 安装 Node.js 并验证版本
- 练习运行
.js文件和 REPL 模式 - 熟悉
fs、path等常用内置模块 - 理解 CommonJS 与 ESM 两种模块系统
- 建立 Node.js 与前端开发之间的联系
⚠️ 常见错误提示
| 错误信息 | 原因 | 解决方案 |
|---|---|---|
'document' is not defined | 在 Node.js 中使用了浏览器 API | Node.js 没有 document 和 window,改用对应 Node API |
require is not defined | 在 ESM 模块中使用了 require() | 改用 import 语法,或去掉 "type": "module" |
Cannot use import outside a module | 在 CommonJS 模块中使用了 import | 在 package.json 中添加 "type": "module" |
SyntaxError: Unexpected token | 文件扩展名不匹配模块系统 | 检查 .js / .mjs 扩展名是否正确 |
6.1 什么是 Node.js
6.1.1 基本概念
一句话理解: Node.js 让 JavaScript 脱离浏览器,可以在电脑上直接运行。
打个比方:
- 浏览器 就像一个"展示厅",JavaScript 在里面负责展示页面、响应用户点击
- Node.js 就像一个"工厂",JavaScript 在里面可以读写文件、启动服务器、处理数据
Node.js 的核心技术:
| 要素 | 说明 |
|---|---|
| V8 引擎 | Google Chrome 的 JS 引擎,负责执行 JavaScript 代码 |
| 事件驱动 | 基于事件循环,适合处理高并发请求 |
| 非阻塞 I/O | 读写文件时不会"卡住",可以同时做其他事情 |
6.1.2 Node.js vs 浏览器 JavaScript
虽然都用 JavaScript 语法,但运行环境完全不同:
| 对比项 | Node.js | 浏览器 JS |
|---|---|---|
| 全局对象 | global | window |
| 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 下载安装
- 访问官网:https://nodejs.org
- 下载 LTS(长期支持)版本(推荐,稳定可靠)
- 按照安装向导一路点击"下一步"即可
⚠️ 注意: 选择 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)) // 36.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)) // 36.5.3 如何启用 ESM
有两种方式:
| 方式 | 做法 |
|---|---|
| 方式一 | 在 package.json 中添加 "type": "module" |
| 方式二 | 使用 .mjs 文件扩展名(代替 .js) |
// package.json
{
"name": "my-project",
"type": "module"
}6.5.4 对比总结
| 对比项 | CommonJS | ESM |
|---|---|---|
| 导出语法 | 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 的身影:
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 文件
- 创建一个文件
test.js,写入console.log('Hello Node.js!') - 在终端运行
node test.js - 确认终端输出了 "Hello Node.js!"
练习 2:用 fs 创建一个文件
- 写一段代码,使用
fs.writeFile创建一个note.txt文件 - 文件内容写入今天的日期
- 运行脚本,检查文件是否生成
练习 3:用 path 拼接路径
- 使用
path.join()将'src'、'components'、'Button.js'拼接成完整路径 - 使用
path.extname()获取'style.css'的扩展名 - 打印结果
练习 4:对比 CommonJS 和 ESM
- 创建
cjs-demo.js,用require()导入fs模块并调用existsSync - 创建
esm-demo.mjs,用import导入fs模块并调用existsSync - 分别用
node cjs-demo.js和node esm-demo.mjs运行
本章复盘——Node.js 基础核心要点
| 序号 | 知识点 | 核心内容 |
|---|---|---|
| 1 | Node.js 是什么 | 基于 V8 引擎的 JavaScript 运行时,让 JS 脱离浏览器运行 |
| 2 | Node.js vs 浏览器 | 没有 DOM/window,但有文件系统、网络等完整能力 |
| 3 | 安装与验证 | 从 nodejs.org 下载 LTS 版本,node -v 验证 |
| 4 | 运行 JS 文件 | node filename.js 运行文件,node 进入 REPL |
| 5 | fs 模块 | 读写文件、判断存在、创建文件夹 |
| 6 | path 模块 | 拼接路径、获取扩展名、获取文件名 |
| 7 | CommonJS vs ESM | require/module.exports vs import/export,新项目推荐 ESM |
| 8 | 与前端的关系 | npm、构建工具、SSR、API 路由都依赖 Node.js |
🎯 本章目标达成标志: 你能用
node运行一个 JS 文件,使用fs和path内置模块,并区分 CommonJS 和 ESM 两种模块系统。
下一章预告(第9章):我们将学习React 介绍与 JSX——React 的核心概念、JSX 语法、条件渲染和列表渲染。
本文档由 zyyc-0336 编写,最后更新:2026-06-14