与 AI 交流 AI

01_工程全景与核心名词

24分钟阅读

第零章：软件工程知识全景图（按使用场景）

在学具体名词之前，先看一张地图。 这张地图的目标：让你知道每个工具属于流水线的哪一段，以及哪些是必学的，哪些可以先跳过。

0.1 全景图：写代码到上线的完整流水线

把”做一个软件”想象成开一家面包店做面包再上架卖。整个流水线分 7 段：

你（人）
 │
 │ ① 在编辑器里敲代码        ← 写菜谱
 ▼
[ 场景 1：写代码 ]
   编辑器 + 编程语言 + 框架
 │
 │ ② 改了的代码要存档、能回退  ← 把每天的菜谱版本归档
 ▼
[ 场景 2：管理代码版本 ]
   Git + GitHub
 │
 │ ③ 我的菜谱要用别人调好的酱料 ← 不重复造轮子
 ▼
[ 场景 3：管理依赖 ]
   npm / pnpm / yarn / pip
 │
 │ ④ 试做一份在自己厨房吃         ← 本地能跑
 ▼
[ 场景 4：本地启动 & 调试 ]
   Node.js / Python 解释器 + 开发服务器
 │
 │ ⑤ 把生鲜原料做成可以装盒的成品  ← 打包压缩、优化
 ▼
[ 场景 5：构建 & 打包 ]
   Vite / Webpack / TypeScript 编译器
 │
 │ ⑥ 把成品放到店里让顾客买       ← 上线让别人能用
 ▼
[ 场景 6：部署上线 ]
   Vercel / Nginx / Docker / Cloud
 │
 │ ⑦ 整个面包店运转的水电煤       ← 隐藏在最底下
 ▼
[ 场景 7：底层支撑（默默工作）]
   操作系统 + 文件系统 + 网络 + 硬件

📌 关键认知：你不需要每段都精通。小白阶段只需要知道每个工具属于哪一段，会用前 4 段足够搞定 80% 的事。

0.2 场景 1：写代码

这一段在干啥： 用编辑器把你的想法变成代码文件。

工具全称/类型你的关系学习深度
VS Code / Cursor编辑器（IDE = Integrated Development Environment，集成开发环境）🔥 高频天天用必学（基本操作）
JavaScript / TypeScript编程语言🔥 高频必学（前端方向）
Python编程语言🔥 高频必学（数据/AI 方向）
React / Vue前端框架🌤️ 看方向选学（前端方向必学一个）

📌 VS Code vs Cursor：VS Code 是微软出的免费编辑器（最流行）；Cursor 是基于 VS Code 改的 AI 编辑器，内置 GPT/Claude 协助写代码。新手先用 VS Code 即可。

类比： 编辑器=厨房工作台，语言=做菜的语法，框架=半成品调料包

给小白的建议：

  • 装一个 VS Code 或 Cursor，先用熟”打开文件夹、搜索、分屏”这几个动作
  • 编程语言不要贪多，挑一门主攻（前端选 JS/TS，数据选 Python）

0.3 场景 2：管理代码版本

这一段在干啥： 给代码做”时间机器”——能回退、能多人协作、能看谁什么时候改了什么。

工具类型你的关系学习深度
Git版本控制软件（本地）🔥 高频必学 4 个命令：clone / pull / commit / push
GitHub代码托管平台（云端）🔥 高频必学（注册账号、看 README）
GitLab / GiteeGitHub 的同行🌤️ 看公司了解（用法基本一样）

类比： Git=单机存档系统，GitHub=云端的”游戏存档备份服务器”

给小白的建议：

  • 第一个月只学 4 个核心命令：clone（下载项目）、pull（更新代码）、commit（保存版本）、push（推到云端）。够用。
  • 看到 branch（分支）、merge（合并）、merge conflict（合并冲突）这些词不用慌——它们是协作场景才需要的进阶概念，本手册第十二章会讲，现在路过即可。

0.4 场景 3：管理依赖

这一段在干啥： 你写代码时不会从零造轮子，会用别人写好的”包”（包 = package = 别人封装好的一组功能代码，类似 Word 里的”插件”），比如：

  • react（前端框架，组件化写网页）
  • axios（处理网络请求的工具库）
  • numpy（Python 数据计算库，AI 必备）
  • lodash（JavaScript 工具函数集合）

“包管理器” 就是负责下载、安装、更新这些包的工具。

工具全称用于哪种语言你的关系
npmNode Package ManagerJavaScript / Node.js🔥 装 Node 自带
pnpmperformant npm同 npm（替代品）🌤️ 性能更好
yarnYarn同 npm（替代品）🌤️
pipPip Installs PackagesPython🔥
poetry / uv现代 Python 包管理Python（替代 pip）🌤️
Maven / Gradle-Java看方向

类比： 包管理器 = 应用商店；锁文件（lock 文件）= 你装了哪些 App 的清单

给小白的建议：

  • 跟语言走：写 JS 学 npm，写 Python 学 pip
  • JS 项目默认可以直接上 pnpm，理由见下

npm 和 pnpm 到底该用哪个

先澄清一个常见误解：它们不是”生态”的区别，是”装法”的区别。

  • npm / pnpm / yarn 都从同一个仓库（npmjs.com）下载包
  • 所以 pnpm install 装到的东西和 npm install 完全一样
  • 三者任选其一，不是配合使用

唯一的核心差别：依赖存在哪

npmpnpm
存储方式每个项目各存一份完整依赖全电脑只存一份，项目里放链接
10 个项目都用 React硬盘上 10 份硬盘上 1 份
安装速度每次都要重新下载解压第二个项目起几乎瞬间完成

📌 类比：npm = 每家自己买一台洗衣机；pnpm = 小区有个公共洗衣房，每户拿钥匙就能用。

具体怎么实现的（硬链接 / 软链接 / 全局存储区）见 06_pnpm与Docker隔离.md § 10.1。

还有一条比省磁盘更重要的差别：pnpm 更严格

npm 会把所有依赖平铺在 node_modules 根目录，结果是——你 package.json 里没写的包，代码里也能 import 进来（这叫幽灵依赖 / phantom dependency）。本地跑得好好的，换台机器或上 CI 就崩，因为那个包只是碰巧被别的包带进来了。

pnpm 用软链接做了隔离：只有你明确装过的包才能 import。这条经常才是团队切换 pnpm 的真实动机。

命令对照（会 npm 就会 pnpm）

npm install          →  pnpm install     # 或简写 pnpm i
npm install react    →  pnpm add react   # ← 注意：装新包叫 add，不叫 install
npm uninstall react  →  pnpm remove react
npm run dev          →  pnpm dev         # ← run 可以省略
npx create-vite      →  pnpm dlx create-vite   # npx 对应 dlx

什么时候用哪个

场景用什么为什么
自己开新项目pnpm省磁盘 + 装得快 + 防幽灵依赖，没理由不用
接手别人的项目看 lock 文件仓库里有 pnpm-lock.yaml 就用 pnpm，有 package-lock.json 就用 npm
团队协作全队统一写进 README，别一半人 npm 一半人 pnpm
monorepo（一仓库多子项目）pnpm它的 workspace 支持最好
老旧工具链报错退回 npm少数老工具假设”依赖平铺在 node_modules”，在 pnpm 下会挂

⚠️ 最容易踩的坑：不要混用。 同一个项目里一会儿 npm install 一会儿 pnpm install，会生成两份互相打架的 lock 文件，依赖版本对不上，报错还很难查。认准仓库里已有的那个 lock 文件跟着走。

0.5 场景 4：本地启动 & 调试

这一段在干啥： 把你写的代码在自己电脑上跑起来，看效果、改 bug。

工具类型你的关系
Node.jsJavaScript 运行环境🔥 写 JS 必装
Python 解释器Python 运行环境🔥 写 Python 必装
Vite Dev Server前端开发服务器（HMR = Hot Module Replacement，热模块替换：保存代码后浏览器自动刷新看到效果）🔥
浏览器开发者工具调试网页（按键盘上的 F12 键打开，或者右键页面 → “检查”）🔥 必学
VS Code 调试器断点调试（在某行代码”打断点”，程序运行到那一行会暂停，让你查看变量）🌤️ 进阶必学

类比： 运行时 = 给代码”装发动机”；开发服务器 = 试车场；调试器 = 透视眼镜

给小白的建议：

  • 学会按 F12 打开浏览器开发者工具——它能让你看到网页背后所有秘密（HTML 结构、网络请求、报错信息）
  • npm run dev 启动后浏览器看效果，是前端最高频操作

0.6 场景 5：构建 & 打包

这一段在干啥： 你写的源代码（TS、JSX、SCSS 等”高级写法”）浏览器看不懂，需要”翻译+压缩+打包”成浏览器认识的 HTML/JS/CSS。

📌 这几个缩写是啥？

  • TS（TypeScript）= JavaScript + 类型，写起来更安全
  • JSX（JavaScript XML）= JS 里直接写 HTML 标签的语法（React 用），如 <div>{name}</div>
  • SCSS（Sassy CSS）= CSS 的增强版，可以嵌套、定义变量 这些都是”开发友好但浏览器不认识”的语法，必须经过构建工具转换。
工具类型你的关系
Vite新一代构建工具🔥 现代项目主流
Webpack老牌构建工具🌤️ 看到能认出即可
esbuild / Rollup / SWC底层打包/转译器隐藏（被 Vite 调用）
TypeScript 编译器 (tsc)TS → JS🔥（写 TS 必用）
BabelJS 新语法 → 老语法隐藏

类比： 构建工具 = 食品加工厂（生鲜原料 → 真空包装预制菜）

给小白的建议：

  • 不需要懂构建工具的内部原理——会用 npm run build 即可
  • 看到 vite.config.ts 这种文件，知道是配置即可，不用立刻全看懂

0.7 场景 6：部署上线

这一段在干啥： 把成品挂到公网，让别人能访问。

工具类型你的关系学习优先级
Vercel / Netlify一键部署平台🔥 推荐先学⭐⭐⭐⭐⭐
GitHub Pages免费静态托管🌤️⭐⭐⭐⭐
NginxWeb 服务器🌤️ 自己有服务器才用⭐⭐⭐
Docker容器化部署🌤️ 中级开始学⭐⭐⭐
Kubernetes (K8s)容器编排❄️ 几乎用不到⭐
AWS / 阿里云 / 腾讯云云服务器🌤️ 看公司⭐⭐

类比： Vercel = 全自动印刷+上架；自己服务器+Nginx = 自己开店；Docker = 集装箱搬家

给小白的建议：

  • 第一个项目用 Vercel 部署，几分钟搞定
  • Docker 等做过 2~3 个项目再学，不然概念太抽象
  • K8s 很久以后再考虑，多数人一辈子用不上

0.8 场景 7：底层支撑（默默工作的）

这一段在干啥： 上面所有工具都跑在这一层之上。你看不见它，但它无处不在。

概念类型你的关系
操作系统（macOS / Linux / Windows）OS🔥 你电脑就是
文件系统（硬链接、软链接、权限）OS 子系统隐藏
网络（端口、TCP/IP、DNS）OS 子系统偶尔接触
进程 / 线程OS 概念偶尔接触
CPU / 内存 / 磁盘硬件完全隐藏

类比： 这层是面包店的”水电煤气”——你不用懂电网怎么发电，但断电了得知道找谁修

给小白的建议：

  • 只需要知道有这层，遇到问题（比如端口被占、权限不够）能联想到这一层即可
  • 进阶后可以学一点 Linux 命令（cd / ls / cat / grep），受益终身

0.9 学习优先级总表（小白照着学）

优先级工具/概念备注
🥇 第 1 阶段（前 1 个月）编辑器 + 1 门语言 + Git 4 命令 + npm/pip + F12能跑通”clone + install + run” 流程
🥈 第 2 阶段（1~3 个月）1 个框架（React/Vue 选一）+ Vercel 部署能做出小作品并上线给朋友看
🥉 第 3 阶段（3~6 个月）TypeScript + Vite 配置 + 调试器 + Linux 基础能解决大部分常见问题
🏅 第 4 阶段（6 个月+）Docker + Nginx + 后端语言 + 数据库能独立完成全栈项目
🎖️ 进阶（1 年+）K8s + 云服务 + 微服务转向工程师/架构师方向

0.10 这张全景图能帮你回答的几个问题

Q1：我看到一个新名词，怎么知道它是干啥的？ → 套进上面 7 个场景里找它的位置。比如听到 “esbuild”，发现它在场景 5 里 → 哦，是构建工具的一种。

Q2：学这个东西有没有意义？ → 看它在哪个阶段、对应哪个场景。如果你才第 1 阶段，碰到 K8s 直接跳过即可。

Q3：这个工具/那个工具到底有什么区别？ → 大概率是同一场景里的同行。npm/pnpm/yarn 都在场景 3，互相替代。Vercel/Nginx/Docker 都在场景 6，但侧重不同。

Q4：我老是觉得”东西太多学不完”怎么办？ → 因为你试图同时学所有场景。按场景顺序学：先跑通 1→2→3→4，能让代码动起来再说。

0.11 给小白的 3 个心法

  1. 不必”全栈”：知道每一层的”边界”和”接口”就够了，不用每层都精通
  2. 跟着项目学：纯看概念会疲劳，做一个具体项目，碰到啥学啥
  3. 学会”识别同行”：看到陌生工具先问”它是哪个场景的？跟我已知的哪个相似？“

第一章：核心名词关系梳理

1.1 node、Node.js、npm、npx 的关系

名词全称是什么类比
Node.js（没有缩写，就叫 Node.js）一个让 JavaScript 能在电脑上直接跑的运行环境给 JS 装了个”发动机”
nodeNode.js 自带的命令行工具你在终端敲的那个命令，比如 node app.js发动机的”启动按钮”
npmNode Package ManagerNode.js 的包管理器，装 Node 时自带应用商店（装/管理依赖）
npxNode Package execute临时执行一个包，不用先安装一次性试用某个工具

关系图：

装 Node.js
   │
   ├─→ 自动有了 node 命令（运行 JS 文件）
   ├─→ 自动有了 npm 命令（管理依赖）
   └─→ 自动有了 npx 命令（临时执行）

举例对比：

  • node app.js → 用 Node 直接执行 app.js 这个文件
  • npm install react → 把 react 这个包装到当前项目
  • npx create-react-app my-app → 临时调用 create-react-app 工具创建项目，用完不留

📌 提示：除了 npm，还有两个常见的”同行”——pnpm 和 yarn，它们都是包管理器，详见下一节。

1.2 三大包管理器：npm vs pnpm vs yarn

JS 世界里管理依赖的工具有三个主流选手，它们干的事一样，但实现方式和速度不同。

各自介绍

工具全称出品方出现时间一句话特点
npmNode Package ManagerNode.js 官方2010最老、最通用，装 Node 自带
yarn（非缩写，就叫 Yarn，“纱线”之意）Facebook2016主要为了解决早期 npm 的速度和锁文件问题
pnpmperformant npm（高性能 npm）社区（Zoltan Kochan）2017用”硬链接”省磁盘空间，速度最快

核心差异：怎么存依赖

npm / yarn 的做法（传统）：

项目A/node_modules/react/...     ← 一份完整副本
项目B/node_modules/react/...     ← 又一份完整副本
项目C/node_modules/react/...     ← 又又一份完整副本

→ 同一个包在每个项目里都装一份，磁盘空间浪费严重（动辄几个 GB）

pnpm 的做法（创新）：

全局仓库 ~/.pnpm-store/
   └─ react/v19.1.0/...     ← 全局只存一份真实文件

项目A/node_modules/react   → 硬链接到全局
项目B/node_modules/react   → 硬链接到全局
项目C/node_modules/react   → 硬链接到全局

→ 同一个版本的包全局只存一份，省磁盘 + 安装快

速度与磁盘占用对比

场景npmyarnpnpm
首次安装速度🐢 慢🐰 中🚀 快
二次安装（已有缓存）🐰 中🚀 快⚡ 极快
磁盘占用大大小（约为 1/3）
处理依赖冲突一般一般严格（更安全）

命令对照表（功能基本一一对应）

操作npmyarnpnpm
安装所有依赖npm installyarnpnpm install
安装某个包npm install reactyarn add reactpnpm add react
安装开发依赖npm install -D viteyarn add -D vitepnpm add -D vite
卸载包npm uninstall reactyarn remove reactpnpm remove react
全局安装npm install -g xxxyarn global add xxxpnpm add -g xxx
运行脚本npm run devyarn devpnpm dev
临时执行npx <命令>yarn dlx <命令>pnpm dlx <命令>

📌 小白记忆：如果会用 npm，把 npm install 改成 pnpm install 就能用 pnpm，几乎没有学习成本。

锁文件区别

先解释什么是”锁文件”：

  • 你的 package.json 只写了”我要 react”——没说要哪个版本
  • 但实际安装时 npm 会下载精确到某个版本号的 react（比如 19.1.0）
  • “锁文件”就是把这次实际下载的所有依赖精确版本号都记下来，下次别人在不同电脑装时也能装到一模一样的版本，避免”在我电脑能跑，你电脑不行”

每个包管理器都有自己的”锁文件”：

工具锁文件
npmpackage-lock.json
yarnyarn.lock
pnpmpnpm-lock.yaml

📌 重要规则：一个项目只用一个包管理器，不要混用！否则会有多个锁文件互相冲突。 看到项目里有哪个锁文件，就说明作者用的是哪个。

怎么判断一个项目用哪个？

打开项目根目录看锁文件：

  • 看到 pnpm-lock.yaml → 这项目用 pnpm，你也应该用 pnpm install
  • 看到 yarn.lock → 这项目用 yarn，你也应该用 yarn
  • 看到 package-lock.json → 这项目用 npm，用 npm install

你这个 gpt_image_playground 项目里只有 package-lock.json，所以是用 npm 的。

怎么安装 pnpm？

pnpm 不是 Node 自带的，需要单独装。三种方式任选：

# 方式 1：用 npm 装 pnpm（最常见）
npm install -g pnpm
 
# 方式 2：用 Homebrew 装（macOS）
brew install pnpm
 
# 方式 3：用官方脚本（不依赖 Node）
curl -fsSL https://get.pnpm.io/install.sh | sh -

验证安装：

pnpm -v   # 显示版本号即装好

实战建议（小白选择）

情况建议
跟着教程学习教程用啥你用啥，别折腾
自己新项目推荐 pnpm（快、省空间、严格）
公司项目看团队约定，统一即可
改别人的开源项目看锁文件用对应工具

同类对照（拓展）

其他语言也有自己的包管理器，思路一样：

语言主流包管理器
JavaScript / Node.jsnpm / pnpm / yarn
Pythonpip / poetry / uv
JavaMaven / Gradle
Rustcargo
Gogo mod
PHPcomposer
Rubygem / bundler

1.3 React、Vite、src 的关系

名词是什么干啥用
ReactFacebook（现 Meta）开源的前端框架用来写交互式网页的”脚手架”
Vite一个前端构建工具（Vue 作者尤雨溪开发）启动开发服务器、把代码打包成可发布的网站。读音类似”vee-t”
srcsource 的缩写项目源代码文件夹（约定俗成的命名）

协作关系：

你在 src/ 里用 React 写代码
           │
           ▼
     Vite 帮你把代码
       「启动起来」（npm run dev）
       或「打包出来」（npm run build）
           │
           ▼
     浏览器能打开的网页

类比：

  • React 是”乐高积木”（提供组件化能力）
  • Vite 是”组装+装箱机器”（开发时调试 + 打包发布）
  • src 是”放积木的工作台”（代码存放位置）

1.4 同类竞品对照

前端框架（React 的同行）

框架出品方特点
ReactMeta（Facebook）最流行，生态丰富
Vue尤雨溪中文文档好，国内流行
AngularGoogle企业级，学习曲线陡
Svelte社区新生代，编译时优化

构建工具（Vite 的同行）

工具特点
Vite新一代，开发启动极快
Webpack老牌，配置复杂但功能全
Rollup适合做库
esbuildGo 写的，速度极快

最后更新：2026-06-02（据 git 提交历史回填，非内容重新审校日期）

关系图谱

反向链接