前端工程化教程

覆盖 Node.js 工具运行时、npm/pnpm、ESM、Vite、Webpack、Babel、PostCSS、ESLint、Prettier、测试、构建优化、CI/CD、Nginx 部署与线上排错。

Node.js 在前端工程中的定位

本章属于「前端工程化 / Node.js 工具运行时与终端环境」,围绕「Node.js 在前端工程中的定位」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

package.json:scripts、dependencies、devDependencies

本章属于「前端工程化 / npm、pnpm 与依赖管理」,围绕「package.json:scripts、dependencies、devDependencies」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

ESM 与 CommonJS

本章属于「前端工程化 / 模块系统、目录与生态」,围绕「ESM 与 CommonJS」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

create-vite 与 Vue + TypeScript 初始化

本章属于「前端工程化 / Vite 深入」,围绕「create-vite 与 Vue + TypeScript 初始化」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

依赖图、Entry、Output 与 Chunk

本章属于「前端工程化 / Webpack、Babel、PostCSS 与构建原理」,围绕「依赖图、Entry、Output 与 Chunk」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

ESLint

本章属于「前端工程化 / 代码质量、规范与提交门禁」,围绕「ESLint」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Testing Pyramid:Unit、Component、E2E

本章属于「前端工程化 / 前端测试体系」,围绕「Testing Pyramid:Unit、Component、E2E」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Tree Shaking 与 Dead Code Elimination

本章属于「前端工程化 / 构建、性能与产物治理」,围绕「Tree Shaking 与 Dead Code Elimination」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

lint、type-check、test、build Pipeline

本章属于「前端工程化 / CI/CD、部署与线上排错」,围绕「lint、type-check、test、build Pipeline」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Node、npm、npx、Corepack 与版本检查

本章属于「前端工程化 / Node.js 工具运行时与终端环境」,围绕「Node、npm、npx、Corepack 与版本检查」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

SemVer:major、minor、patch、^、~

本章属于「前端工程化 / npm、pnpm 与依赖管理」,围绕「SemVer:major、minor、patch、^、~」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

源码目录:assets、components、views、api、stores、utils

本章属于「前端工程化 / 模块系统、目录与生态」,围绕「源码目录:assets、components、views、api、stores、utils」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Dev Server、Native ESM、预构建与 HMR

本章属于「前端工程化 / Vite 深入」,围绕「Dev Server、Native ESM、预构建与 HMR」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Webpack Loader 与 Plugin

本章属于「前端工程化 / Webpack、Babel、PostCSS 与构建原理」,围绕「Webpack Loader 与 Plugin」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Prettier 与 ESLint 分工

本章属于「前端工程化 / 代码质量、规范与提交门禁」,围绕「Prettier 与 ESLint 分工」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Vitest:describe、it、expect、mock

本章属于「前端工程化 / 前端测试体系」,围绕「Vitest:describe、it、expect、mock」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Code Splitting、Dynamic Import 与路由懒加载

本章属于「前端工程化 / 构建、性能与产物治理」,围绕「Code Splitting、Dynamic Import 与路由懒加载」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

GitHub Actions / 企业 CI 基础

本章属于「前端工程化 / CI/CD、部署与线上排错」,围绕「GitHub Actions / 企业 CI 基础」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

命令行、PATH、环境变量与脚本执行

本章属于「前端工程化 / Node.js 工具运行时与终端环境」,围绕「命令行、PATH、环境变量与脚本执行」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

package-lock / pnpm-lock 与可重复安装

本章属于「前端工程化 / npm、pnpm 与依赖管理」,围绕「package-lock / pnpm-lock 与可重复安装」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Vue、React、Angular 的生态定位

本章属于「前端工程化 / 模块系统、目录与生态」,围绕「Vue、React、Angular 的生态定位」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

vite.config.ts、Plugin、Alias

本章属于「前端工程化 / Vite 深入」,围绕「vite.config.ts、Plugin、Alias」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Babel、Preset 与语法转换

本章属于「前端工程化 / Webpack、Babel、PostCSS 与构建原理」,围绕「Babel、Preset 与语法转换」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

EditorConfig、命名与目录规范

本章属于「前端工程化 / 代码质量、规范与提交门禁」,围绕「EditorConfig、命名与目录规范」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Vue Test Utils

本章属于「前端工程化 / 前端测试体系」,围绕「Vue Test Utils」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Bundle Analysis、Chunk 策略与依赖体积

本章属于「前端工程化 / 构建、性能与产物治理」,围绕「Bundle Analysis、Chunk 策略与依赖体积」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Nginx 托管 SPA 与 History 刷新 404

本章属于「前端工程化 / CI/CD、部署与线上排错」,围绕「Nginx 托管 SPA 与 History 刷新 404」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

LTS、版本管理与团队 Node 约束

本章属于「前端工程化 / Node.js 工具运行时与终端环境」,围绕「LTS、版本管理与团队 Node 约束」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

npm install、npm ci、pnpm

本章属于「前端工程化 / npm、pnpm 与依赖管理」,围绕「npm install、npm ci、pnpm」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

原生 CSS、Sass、Tailwind、Bootstrap 与组件库

本章属于「前端工程化 / 模块系统、目录与生态」,围绕「原生 CSS、Sass、Tailwind、Bootstrap 与组件库」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

.env、import.meta.env 与多环境

本章属于「前端工程化 / Vite 深入」,围绕「.env、import.meta.env 与多环境」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

PostCSS、Autoprefixer 与 CSS 构建链

本章属于「前端工程化 / Webpack、Babel、PostCSS 与构建原理」,围绕「PostCSS、Autoprefixer 与 CSS 构建链」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Husky、lint-staged 与 Git Hooks

本章属于「前端工程化 / 代码质量、规范与提交门禁」,围绕「Husky、lint-staged 与 Git Hooks」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Playwright:真实浏览器 E2E

本章属于「前端工程化 / 前端测试体系」,围绕「Playwright:真实浏览器 E2E」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Source Map、生产调试与源码泄露边界

本章属于「前端工程化 / 构建、性能与产物治理」,围绕「Source Map、生产调试与源码泄露边界」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Nginx /api Reverse Proxy 与同域部署

本章属于「前端工程化 / CI/CD、部署与线上排错」,围绕「Nginx /api Reverse Proxy 与同域部署」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

版本、权限、网络与缓存故障排查

本章属于「前端工程化 / Node.js 工具运行时与终端环境」,围绕「版本、权限、网络与缓存故障排查」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

peerDependencies、依赖冲突与安全审计

本章属于「前端工程化 / npm、pnpm 与依赖管理」,围绕「peerDependencies、依赖冲突与安全审计」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Monorepo、Workspace 与大型项目组织认知

本章属于「前端工程化 / 模块系统、目录与生态」,围绕「Monorepo、Workspace 与大型项目组织认知」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Proxy、Build、base、资源与生产产物

本章属于「前端工程化 / Vite 深入」,围绕「Proxy、Build、base、资源与生产产物」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Vite vs Webpack:开发模型、构建模型与秋招比较

本章属于「前端工程化 / Webpack、Babel、PostCSS 与构建原理」,围绕「Vite vs Webpack:开发模型、构建模型与秋招比较」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Commit Convention、Code Review 与团队规范

本章属于「前端工程化 / 代码质量、规范与提交门禁」,围绕「Commit Convention、Code Review 与团队规范」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

API Mock 与可重复测试环境

本章属于「前端工程化 / 前端测试体系」,围绕「API Mock 与可重复测试环境」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

Hash、Compression、Cache 与 CDN

本章属于「前端工程化 / 构建、性能与产物治理」,围绕「Hash、Compression、Cache 与 CDN」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。

线上白屏、缓存、版本与回滚排错

本章属于「前端工程化 / CI/CD、部署与线上排错」,围绕「线上白屏、缓存、版本与回滚排错」建立核心认知,要求能够解释概念、理解机制或 API、完成最小代码实验,并能连接到 Java 全栈真实项目与秋招问题。