本文是「Node 运行现场」系列的第 1 篇。
本篇面向刚开始接触 Node.js 的前端开发者,只介绍 Node.js 的用途、最基本的运行方式,以及它在前端项目中的位置。模块、文件读写、异步任务和 HTTP 服务会在后续文章中分别展开。
前端项目创建完成后,通常会先在终端执行几条命令:
bash
npm install
npm run dev
npm run build
第一条命令安装依赖,第二条命令启动本地开发环境,第三条命令生成用于部署的文件。浏览器页面还没打开,终端里已经完成了依赖检查、源码读取、模块处理和本地服务启动。
这些工作并不全是 Node.js 自己完成的。npm、Vite、TypeScript、ESLint 都有各自的职责,但它们中的许多工具需要一个能够在终端里执行 JavaScript、读取项目文件并访问网络的运行环境。前端开发者第一次接触 Node.js,往往就是从这里开始。
本文先不讨论内部实现,只回答两个基础问题:Node.js 是什么,以及它在一个前端项目里通常负责哪些事情。
一、Node.js 让 JavaScript 可以在浏览器之外运行
在浏览器中,JavaScript 通常跟随网页执行,它可以读取页面元素、响应点击事件,也可以通过浏览器提供的接口发起网络请求。
Node.js 提供了另一种 JavaScript 运行环境。安装 Node.js 后,可以在终端中把一个 JavaScript 文件交给 node 命令执行。Node.js 官方将其描述为一个开源、跨平台的 JavaScript 运行环境,可用于创建服务器、Web 应用、命令行工具和脚本。
我们可以先创建一个名为 hello.js 的文件:
js
const projectName = 'mall-admin'
console.log(`正在处理项目:${projectName}`)
console.log('这段 JavaScript 由 Node.js 执行')
在文件所在目录打开终端,执行:
bash
node hello.js
终端会输出:
text
正在处理项目:mall-admin
这段 JavaScript 由 Node.js 执行
这里是咋做到的呢,其实 node hello.js 的含义是:使用 Node.js 执行 hello.js。
示例中的变量、模板字符串和函数调用仍然属于 JavaScript。Node.js 提供的是运行这段代码的环境,并让程序可以继续使用文件、网络、进程等能力。
二、浏览器和 Node.js 提供的能力并不相同
浏览器和 Node.js 都能运行 JavaScript,但代码所在的环境不同,能够直接使用的功能也不同。
页面里的这段代码依赖浏览器提供的 document:
js
const button = document.querySelector('#submit')
button.addEventListener('click', () => {
console.log('提交表单')
})
如果把它保存为 app.js,再执行:
bash
node app.js
通常会看到类似错误:
text
ReferenceError: document is not defined
语法上面肯定是没有问题的,问题出在 Node.js 默认没有网页文档 DOM,也没有浏览器中的 document。
反过来,Node.js 提供了读取文件、创建服务和获取进程信息等能力。普通网页脚本不能随意读取电脑上的任意项目文件,这是浏览器安全边界的一部分。
两种环境可以先这样区分:
| 运行位置 | 常见任务 | 常见能力 |
|---|---|---|
| 浏览器 | 展示页面、处理用户操作 | DOM、页面事件、浏览器存储 |
| Node.js | 执行工具、处理文件、启动服务 | 文件系统、网络、进程、命令行 |
有些 API 在两边都能找到,例如 console、URL 和部分网络接口,但不能据此认为所有 JavaScript 代码都可以原样切换运行环境。因此要判断一段代码能否运行,我们需要看它依赖了哪些环境能力。
三、前端项目中的开发命令为什么需要 Node.js
以常见的 Vite 项目为例,package.json 里可能有下面几条命令:
json
{
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint src"
}
}
执行:
bash
npm run dev
时,npm 会找到 dev 对应的命令并启动 Vite。Vite 是项目安装的开发工具,它的程序运行在 Node.js 环境中,可以读取源码文件、监听文件变化并启动本地开发服务。
浏览器随后访问这个本地服务,接收处理后的页面资源,此时可以把流程分成两个部分:
text
终端中的开发工具
→ 运行在 Node.js 环境
→ 读取并处理项目文件
→ 启动本地服务
浏览器中的页面代码
→ 从本地服务加载资源
→ 渲染界面
→ 响应用户操作
执行 npm run build 时,仍然是 Node.js 在承载构建工具的运行。构建工具读取项目源码,根据自己的规则处理模块、样式和静态资源,最后写入 dist 等输出目录。
需要分清的是,Node.js 提供运行环境和文件、网络等基础能力,至于如何转换 Vue、React、TypeScript 和 CSS,由 Vite、Rollup、TypeScript 等具体的工具负责。
四、Node.js 在开发中通常可以完成哪些任务
Node.js 的使用范围不只限于前端构建,对于刚接触它的读者,可以先从四类任务认识它。
1. 运行命令行工具
许多开发工具通过终端使用,例如:
bash
eslint src
vite build
tsc
这些工具接收命令行参数,读取项目内容,再把检查结果或生成结果输出到终端和目录中。
项目也可以编写自己的 Node.js 工具,例如检查文件命名、生成路由配置、整理图片清单。后续的命令行文章会继续说明参数、输出内容和退出码怎样配合。
2. 读取和生成文件
Node.js 提供文件系统相关的内置模块,可以读取配置、创建目录和写入内容。
在前端项目中常见的文件任务包括:
- 读取 JSON 配置
- 根据图标目录生成索引
- 批量修改文件名
- 在构建前生成版本信息
- 检查翻译文件是否缺少字段
这类任务不需要打开网页,结果通常是一份新文件、终端报告或成功与失败状态。
文件路径、编码和异步读取各有容易出错的地方,后续会分别讨论。本章读者只需要知道:访问项目文件是 Node.js 提供的重要能力之一。
3. 启动网络服务
Node.js 可以接收网络请求并返回响应,因此能够用来编写 HTTP 服务。
前端开发中常见的本地开发服务器、Mock 接口和代理工具,都可能使用 Node.js 提供的网络能力。正式服务还需要处理路由、参数、异常、日志和安全问题,这些通常由项目代码或 Express、Koa、NestJS 等框架继续完成。
能够监听端口,只代表服务已经启动。它距离适合上线还有不少工程工作。
4. 执行自动化任务
测试、代码检查、构建和发布前校验都可以通过 Node.js 程序组织。
例如,提交代码前执行:
text
检查代码格式
→ 运行单元测试
→ 生成构建产物
→ 检查输出目录
Node.js 可以承载这些工具,并根据执行结果向终端或 CI 返回状态。自动化流程怎样编排、失败后是否继续,则由项目中的命令和脚本决定。
五、Node.js、npm 和前端工具分别负责什么
刚开始写项目时,初学者很容易傻傻分不清 Node.js、npm 和构建工具。可以先用一条常见命令划分它们的职责:
bash
npm run dev
| 名称 | 在这条命令中的职责 |
|---|---|
| Node.js | 提供运行 JavaScript 和访问系统能力的环境 |
| npm | 读取 package.json 中的 scripts,找到并启动命令 |
| Vite | 读取前端项目、启动开发服务并处理模块 |
| 浏览器 | 加载页面资源并运行页面代码 |
npm 的职责不只包括执行脚本,也包括安装和管理项目依赖,它和 Node.js 关系紧密,但两者不可混为一谈。
同样,Vite、ESLint、TypeScript 和各种框架也不是 Node.js 的内置功能。它们是项目选择的工具,借助 Node.js 环境运行。
六、Node.js 不会自动替项目完成哪些事情
Node.js 提供的能力很广,但安装完成后,不会自动得到一套完整的前端或服务端项目。
它不会自动完成下面这些工作:
- 不会自动把 React 或 Vue 源码打包
- 不会自动安装项目依赖
- 不会自动提供业务路由和接口校验
- 不会自动处理数据库事务
- 不会自动解决日志、安全和部署问题
- 不会让所有 JavaScript 任务同时执行
- 不会让浏览器专用代码直接在终端运行
项目需要选择 npm、Vite、Express 等工具,并编写自己的业务代码。Node.js 为这些代码提供运行位置和基础能力。
理解这条边界很重要。看到一条终端命令时,可以先问:当前由 Node.js 提供的是哪项能力,具体工作又是哪个工具完成的。
七、第一次接触 Node.js 时应该先检查什么
在继续学习文件、模块和异步任务之前,可以先确认本地环境已经能够运行最小程序。
终端执行:
bash
node --version
如果 Node.js 已正确安装,会输出版本号,例如:
text
vxx.x.x
这里不要求使用某个固定版本。项目开发时,应继续查看项目是否在 package.json、README 或团队文档中声明了版本要求。
接着创建 hello.js 并执行:
bash
node hello.js
如果终端能够输出文件里的内容,说明已经完成了最基本的一步:终端找到了 Node.js,Node.js 也成功执行了 JavaScript 文件。
八、小结
Node.js 是一个 JavaScript 运行环境。它让 JavaScript 不必依附网页执行,并提供文件、网络、进程和命令行等能力。前端项目中的开发服务器、构建工具、代码检查和自定义脚本,经常运行在这个环境中。
本篇只建立了 Node.js 的基本位置,还没有展开模块如何导入、文件怎样读取、异步任务如何等待,也没有编写 HTTP 服务。下一步可以从最简单的终端执行开始,观察一个 JavaScript 文件怎样接收命令并输出结果。