企业官网建设流程全解析

一句话先给结论

node_modules 给“程序员和构建工具”用
dist 给“服务器和浏览器”用

一、node_modules/ 是干嘛的？

它是什么？

node_modules 是 npm / pnpm / yarn 安装下来的所有依赖包

node_modules/├── react/├── react-dom/├── axios/├── date-fns/├── vite/├── @radix-ui/└──...

这些都是：

• 第三方库源码

• 构建工具源码

• 开发依赖

• 它在什么时候用？

• 开发 / 构建阶段

npm install npm run dev npm run build

这时候：

• Vite / Webpack 会从 node_modules 里

• 把你 import 的东西找出来

• 打包进 dist

• 关键点（非常重要）

❌ 浏览器不会直接读取 node_modules
❌ 生产服务器不会部署 node_modules

它只存在于：

• 开发机

• CI/CD 构建机

为什么它这么大？

因为：

• 每个库又依赖别的库（依赖树）

• JS 生态是“乐高套乐高”

大是正常的，删了也能重装

rm-rf node_modules npm install

二、dist/ 是干嘛的？

它是什么？

dist 是 build 之后生成的最终产物

dist/├── index.html ├── assets/│ ├── index-8f3a9c.js │ ├── index-a12c.css │ └── logo-3fd2.svg

这些文件是：

• 压缩过

• hash 命名

• 不再是你写的源码

它在什么时候生成？

npm run build

例如：

• Vite

• Webpack

• CRA

它是给谁用的？

• 给服务器 + 浏览器用

• 浏览器 <–HTTP-- dist/

你部署时：

• Nginx

• CDN

• S3

• CloudFront

只需要 dist

三、它们之间的关系（关键理解）

你写的 src/↓import依赖 ↓ node_modules/↓ 构建工具 ↓ dist/↓ 浏览器运行

node_modules 从不直接上线
dist 是唯一上线目录

四、为什么 .gitignore 里经常这样写？

node_modules/dist/

原因不同 👇

忽略 node_modules

• 太大

• 可重装

• 平台相关

忽略 dist

• 每次 build 都不同

• CI 可以重新生成

⚠️ 但注意：

• 某些前端仓库会提交 dist（如组件库）

• 应用项目通常不提交 dist

五、React + Vite 项目中的典型流程

# 开发 npm install # 生成 node_modules npm run dev # 用 node_modules # 构建 npm run build # 生成 dist # 部署 把 dist/上传到服务器

六、和你熟悉的 Angular 对照一下

最后一句总结
node_modules 是原材料仓库，dist 是打包好的成品。