Node.js 是什么:前端项目里哪些事情由它完成

3 阅读9分钟

本文是「Node 运行现场」系列的第 1 篇。
本篇面向刚开始接触 Node.js 的前端开发者,只介绍 Node.js 的用途、最基本的运行方式,以及它在前端项目中的位置。模块、文件读写、异步任务和 HTTP 服务会在后续文章中分别展开。

前端项目创建完成后,通常会先在终端执行几条命令:

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 的文件:

const projectName = 'mall-admin'

console.log(`正在处理项目:${projectName}`)
console.log('这段 JavaScript 由 Node.js 执行')

在文件所在目录打开终端,执行:

node hello.js

终端会输出:

正在处理项目:mall-admin
这段 JavaScript 由 Node.js 执行

这里是咋做到的呢,其实 node hello.js 的含义是:使用 Node.js 执行 hello.js

示例中的变量、模板字符串和函数调用仍然属于 JavaScript。Node.js 提供的是运行这段代码的环境,并让程序可以继续使用文件、网络、进程等能力。

二、浏览器和 Node.js 提供的能力并不相同

浏览器和 Node.js 都能运行 JavaScript,但代码所在的环境不同,能够直接使用的功能也不同。

页面里的这段代码依赖浏览器提供的 document

const button = document.querySelector('#submit')

button.addEventListener('click', () => {
  console.log('提交表单')
})

如果把它保存为 app.js,再执行:

node app.js

通常会看到类似错误:

ReferenceError: document is not defined

语法上面肯定是没有问题的,问题出在 Node.js 默认没有网页文档 DOM,也没有浏览器中的 document

反过来,Node.js 提供了读取文件、创建服务和获取进程信息等能力。普通网页脚本不能随意读取电脑上的任意项目文件,这是浏览器安全边界的一部分。

两种环境可以先这样区分:

运行位置常见任务常见能力
浏览器展示页面、处理用户操作DOM、页面事件、浏览器存储
Node.js执行工具、处理文件、启动服务文件系统、网络、进程、命令行

有些 API 在两边都能找到,例如 consoleURL 和部分网络接口,但不能据此认为所有 JavaScript 代码都可以原样切换运行环境。因此要判断一段代码能否运行,我们需要看它依赖了哪些环境能力。

三、前端项目中的开发命令为什么需要 Node.js

以常见的 Vite 项目为例,package.json 里可能有下面几条命令:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src"
  }
}

执行:

npm run dev

时,npm 会找到 dev 对应的命令并启动 Vite。Vite 是项目安装的开发工具,它的程序运行在 Node.js 环境中,可以读取源码文件、监听文件变化并启动本地开发服务。

浏览器随后访问这个本地服务,接收处理后的页面资源,此时可以把流程分成两个部分:

终端中的开发工具
→ 运行在 Node.js 环境
→ 读取并处理项目文件
→ 启动本地服务

浏览器中的页面代码
→ 从本地服务加载资源
→ 渲染界面
→ 响应用户操作

执行 npm run build 时,仍然是 Node.js 在承载构建工具的运行。构建工具读取项目源码,根据自己的规则处理模块、样式和静态资源,最后写入 dist 等输出目录。

需要分清的是,Node.js 提供运行环境和文件、网络等基础能力,至于如何转换 Vue、React、TypeScript 和 CSS,由 Vite、Rollup、TypeScript 等具体的工具负责。

四、Node.js 在开发中通常可以完成哪些任务

Node.js 的使用范围不只限于前端构建,对于刚接触它的读者,可以先从四类任务认识它。

1. 运行命令行工具

许多开发工具通过终端使用,例如:

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 程序组织。

例如,提交代码前执行:

检查代码格式
→ 运行单元测试
→ 生成构建产物
→ 检查输出目录

Node.js 可以承载这些工具,并根据执行结果向终端或 CI 返回状态。自动化流程怎样编排、失败后是否继续,则由项目中的命令和脚本决定。

五、Node.js、npm 和前端工具分别负责什么

刚开始写项目时,初学者很容易傻傻分不清 Node.js、npm 和构建工具。可以先用一条常见命令划分它们的职责:

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 时应该先检查什么

在继续学习文件、模块和异步任务之前,可以先确认本地环境已经能够运行最小程序。

终端执行:

node --version

如果 Node.js 已正确安装,会输出版本号,例如:

vxx.x.x

这里不要求使用某个固定版本。项目开发时,应继续查看项目是否在 package.json、README 或团队文档中声明了版本要求。

接着创建 hello.js 并执行:

node hello.js

如果终端能够输出文件里的内容,说明已经完成了最基本的一步:终端找到了 Node.js,Node.js 也成功执行了 JavaScript 文件。

八、小结

Node.js 是一个 JavaScript 运行环境。它让 JavaScript 不必依附网页执行,并提供文件、网络、进程和命令行等能力。前端项目中的开发服务器、构建工具、代码检查和自定义脚本,经常运行在这个环境中。

本篇只建立了 Node.js 的基本位置,还没有展开模块如何导入、文件怎样读取、异步任务如何等待,也没有编写 HTTP 服务。下一步可以从最简单的终端执行开始,观察一个 JavaScript 文件怎样接收命令并输出结果。

参考资料