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

本文是「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 在两边都能找到,例如 consoleURL 和部分网络接口,但不能据此认为所有 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 文件怎样接收命令并输出结果。

参考资料

相关推荐
Revolution611 小时前
Nest.js 是什么:怎样用它写出第一个后端接口
后端·node.js·nestjs
我要两颗404西柚1 小时前
Stage three:VUE工程化与实战工具
前端·javascript·vue.js
光影少年1 小时前
RN 的EventEmitter 双向通信
前端·react native·react.js
布鲁飞丝2 小时前
从零实现富文本编辑器#-浏览器选区与编辑器选区模型同步
java·前端·编辑器
写不来代码的草莓熊2 小时前
Cesium 地图交互绘制圆形、多边形
前端·javascript·地图
weixin_427771612 小时前
前端版本检测
前端
禅思院3 小时前
流式 Markdown 渲染完全指南【引子】
前端·架构·前端框架
JackSparrow4143 小时前
前端安全之JS混淆+请求加密+请求签名以提升爬虫难度
前端·javascript·后端·爬虫·python·安全
IMPYLH3 小时前
HTML 的 <em> 元素
java·前端·html