Nodejs在普通前端项目充当的角色

在前端项目里，Node.js 通常不是直接跑在用户浏览器里的东西，它更多是充当：

前端项目的"开发环境 + 构建工具运行环境 + 包管理基础设施"。

1.写代码时：node.js帮我们启动项目

1.1 本地开发服务器：npm run dev

bash 复制代码

npm run dev

node.js帮我们在本地开了一个"开发用的小服务器"，

2.开发时：node.js帮我们热更新和代理接口

2.1 编译和转换代码

"开发版代码"，Node.js 工具帮你加工成"浏览器能看懂的代码

比如我们写的vue，浏览器其实不认识 .vue 文件：

javascript 复制代码

<template>
  <div>{{ name }}</div>
</template>

<script setup>
const name = "张三"
</script>

比如我们写的typeScript，浏览器不能直接完整理解 TypeScript 类型：

TypeScript 复制代码

const age: number = 18

比如我们写的scss，浏览器不能直接运行 SCSS：

css 复制代码

.container {
  .title {
    color: red;
  }
}

要 Node.js 工具帮我们转换：

javascript 复制代码

.vue  →  JavaScript
.ts   →  JavaScript
.scss →  CSS
jsx   →  JavaScript

Node.js转换时所需要的工具：

javascript 复制代码

Vite
Webpack
Babel
TypeScript
PostCSS
Sass

node.js是代码编译器/转换器的运行环境

2.2 代理后端接口

前端开发时，经常配置代理：

javascript 复制代码

// vite.config.js
export default {
  server: {
    proxy: {
      "/api": {
        target: "http://backend.example.com",
        changeOrigin: true
      }
    }
  }
}

我们的前端请求：

javascript 复制代码

fetch("/api/user")

实际会被本地的Node.js开发服务器转发到：

javascript 复制代码

http://backend.example.com/api/user

开发环境下，Node.js 帮前端把请求转发给后端，避免跨域问题。node.js充当本地接口代理服务器

2.3 执行脚本任务

很多前端项目会有一些脚本，例如：

javascript 复制代码

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src",
    "format": "prettier --write src",
    "preview": "vite preview"
  }
}

例如执行：

bash 复制代码

npm run lint

nodejs就是前端项目的自动化执行器。

vite、webpack、eslint、prettier 这些工具，很多都是用 Node.js 写的，nodejs就像一个工具运行平台

3.装依赖时：node.js帮我们下载包

3.1 npm /pnpm/yarn 都是依赖node.js

前端项目通常有：

bash 复制代码

{
  "dependencies": {
    "vue": "^3.4.0",
    "axios": "^1.6.0"
  },
  "devDependencies": {
    "vite": "^5.0.0",
    "eslint": "^8.0.0"
  }
}

这些依赖要通过包管理器安装

bash 复制代码

npm install

包管理器本身就是 Node.js 生态的一部分，

项目需要 Vue、React、Axios、Element Plus、Ant Design、Vite，这些包都要靠 Node.js 生态下载安装到本地。

Node.js是依赖包管理环境

4.打包时:node.js帮我们编译压缩

4.1 node.js打包项目

上线前一般会执行：

bash 复制代码

npm run build

这个命令通常会生成：

bash 复制代码

dist/
├── index.html
├── assets/
│   ├── index.xxx.js
│   ├── index.xxx.css
│   └── logo.xxx.png

这个过程 Node.js 工具会帮我们做：

bash 复制代码

1. 压缩 JS
2. 压缩 CSS
3. 合并文件
4. Tree Shaking 去掉没用代码
5. 给文件名加 hash
6. 拆分 chunk
7. 处理图片、字体等静态资源

Node.js 帮我们把项目从"开发状态"打包成"上线状态"

注意：打包完成后的 dist 文件，一般可以直接丢到 Nginx、CDN、对象存储上，不一定还需要 Node.js 运行。