一、项目 & 构建相关（你一建项目就会看到）
Node.js
前端工程的“运行环境”，脚手架和构建工具都跑在它上面。
不是用来写页面的，是用来跑工具的。
npm / yarn / pnpm
前端的“包管理器”，负责安装依赖。
- npm：官方，慢但稳
- yarn：曾经快
- pnpm：现在企业最常用，省磁盘
package.json
前端项目的“说明书 + 配置入口”。
里面常见的：
- scripts（命令）
- dependencies（依赖）
- devDependencies（开发依赖）
node_modules
所有依赖安装的地方。
又大又乱，不要手动改。
scripts（npm run xxx）
脚手架给你准备好的“快捷命令”。
常见：
"dev": "vite",
"build": "vite build"
二、构建工具（最容易被误解的一类）
构建 / 打包（build）
把你写的源码 → 浏览器能直接跑的代码。
包括：
- 合并文件
- 转换语法
- 压缩代码
Vite
新一代构建工具，开发时几乎不打包，快得离谱。
现在脚手架的主流。
Webpack
老牌构建工具，配置复杂，但功能极强。
你看到一堆 webpack.config.js，就是它。
Bundle / 打包产物
构建后生成的文件（dist 目录）。
最终部署到服务器的东西。
Dev Server
本地开发服务器。
作用：
- 启动项目
- 热更新
- 模拟线上环境
HMR（Hot Module Replacement）
改代码后，页面不刷新就更新。
你保存文件，页面秒变，就是它。
三、模块 & 语法相关（JS 工程化基础）
ES Module（ESM）
JavaScript 官方模块系统。
import xxx from './xxx'
export default xxx
CommonJS
Node.js 早期模块系统。
const xxx = require('./xxx')
现在新项目基本不用了。
Transpile（转译）
把“新语法”转成“老浏览器能看懂的语法”。
Babel
专门做“语法转译”的工具。
比如：
- 箭头函数 → 普通函数
Polyfill
给老浏览器“打补丁”，补新功能。
四、样式相关（脚手架常预置）
CSS Preprocessor（预处理器）
给 CSS 加“编程能力”。
常见：
- Less
- Sass / Scss
PostCSS
CSS 的“处理流水线”。
功能包括：
- 自动加浏览器前缀
- 压缩 CSS
CSS Modules
让 CSS 变成“局部作用域”。
防止样式污染。
Scoped CSS
Vue 里的局部样式方案。
五、代码质量 & 规范（企业脚手架重点）
ESLint
JavaScript 的“代码警察”。
管：
- 写法是否规范
- 有没有潜在 bug
Prettier
代码“格式化工具”。
只管：
- 空格
- 换行
- 缩进
Lint
静态代码检查的统称。
eslint 是其中一种。
Husky
Git Hook 管理工具。
让你在：
- commit 前
- push 前
执行检查。
lint-staged
只检查本次提交的文件。
Commitlint
限制 git commit 信息格式。
Git Hook
Git 在特定时机自动执行的脚本。
六、环境 & 配置相关（企业项目必备）
Environment（环境）
不同运行阶段的区分。
- 开发
- 测试
- 生产
.env 文件
环境变量配置文件。
VITE_API_BASE=/api
环境变量
构建时注入的配置参数。
不能直接写死在代码里。
Config / 配置文件
控制构建、工具行为的文件。
七、框架生态相关（脚手架常集成）
SPA（单页应用）
页面不刷新，通过 JS 切换内容。
Router（路由）
控制“URL → 页面组件”的映射。
State Management（状态管理）
管“全局数据”的工具。
Vue：Pinia
React：Redux / Zustand
Composition API
Vue 3 的核心开发模式。
Hooks
React 的函数式逻辑复用机制。
八、网络 & 接口相关（企业必有）
API
后端接口。
Axios / Fetch
发请求的工具。
企业脚手架通常会二次封装。
Proxy（代理）
本地开发时解决跨域问题。
Mock
模拟接口数据。
九、性能 & 优化相关（高级但常见）
Code Splitting
把代码拆成多块，按需加载。
Lazy Loading（懒加载）
用到时再加载。
Tree Shaking
自动删除没用到的代码。
Chunk
被拆出来的一块代码。
CDN
静态资源加速服务。
十、CI / CD / 运维相关（企业脚手架后期）
CI（持续集成）
自动化构建 + 检查。
CD（持续部署）
自动化发布。
Pipeline
一整条自动化流程。
Build Artifact
构建产物。
十一、一句话总总结（建议你记住）
前端脚手架 = Node + 构建工具 + 规范 + 模板 + 业务约束
你看到的“陌生名词”，本质都在干三件事：
- 让代码能跑
- 让人不乱写
- 让项目活得久