第 13 周：前端工程化

重点：脚本多了以后必须工程化——从"全局变量打架"到模块化，从手引 script 到包管理+构建+部署一条链；浏览器 JS 与 Node JS 的同与不同。 边界：组件的设计方法论归第 14 周，本周只讲"代码如何组织与交付"；BOM/DOM 基础归第 7-8 周。

模块化：语言的演化史

第 7 周移来的四篇在此汇合——它们正是模块化诞生前夜的语言背景：

1. 作用域与IIFE — 只有全局作用域的年代：用立即执行函数圈出私有空间
2. 闭包 — IIFE 能"私有"的机制原理：模块模式的基石
3. Requirejs — AMD：社区发明的异步模块方案（历史地位）
4. 原生模块ESM — import/export：语言层面的最终答案
5. js hook — 钩子与猴子补丁：模块化缺失年代的"外挂"手法
6. eval与sandbox — 动态执行与隔离：模块加载器的安全话题

包管理与构建工具链

1. NPM — 包管理：从 CDN 手引到 npm install
2. 构建工具gulp — 任务流构建：自动化压缩/合并的早期方案（历史地位）
3. 打包工具webpack — bundler 时代：一切资源皆模块
4. esbuild与vite — 用 Go 重写构建：原生 ESM 开发时代的速度革命
5. 打包工具vite.js — vite 实操：现代项目的默认起点
6. PostCSS — 用 JS 插件处理 CSS：构建链伸进样式层
7. PostHtml — 同样的思路作用于 HTML

Node：前后端的会师

1. node.js — 把 V8 拿出浏览器：JS 成为通用语言（环境安装见课程工具箱·node环境构建）

浏览器 JS 与 Node JS 同一门语言、不同运行时——这正是"前端和后端的区别与协同"的技术底座。

架构与工作流程

1. 前端架构 — 项目级的技术选型与组织（归第 14 周展开）

实训

• 实训：构建工具 — 用 vite 搭一个工程化项目并与无构建方式对比

作业

• 把个人项目从"一把梭 script"改造为模块化结构；
• 个人项目引入 NPM 管理依赖，尝试 vite 开发环境（可不迁移站点本体）
• 理解个人项目中的包管理、构建工具、模块依赖等概念和工具