JavaScript高级程序设计笔记 32

附录 D JavaScript 工具

核心脉络

附录 D 介绍 JavaScript 开发工具链，包括包管理、模块加载、构建、编辑器、检查、压缩、测试和文档工具。现代前端工程离不开工具链。

重点内容

包管理

包管理器用于安装、升级和管理依赖。

常见工具：

• npm
• Yarn
• pnpm

核心文件：

• package.json
• lockfile

构建工具

构建工具负责转换、打包和优化代码。

常见能力：

• 模块打包。
• TypeScript 转译。
• CSS 处理。
• 代码压缩。
• 文件 hash。
• 开发服务器。

常见工具：

• Vite。
• Webpack。
• Rollup。
• esbuild。

代码检查与格式化

{
  "scripts": {
    "lint": "eslint src",
    "format": "prettier --write ."
  }
}

作用：

• 统一风格。
• 发现潜在错误。
• 减少代码评审中的格式争论。

压缩工具

压缩能减小生产代码体积。现代构建工具通常内置压缩能力。

测试工具

测试类型：

• 单元测试。
• 集成测试。
• 端到端测试。

常见工具：

• Jest。
• Vitest。
• Mocha。
• Playwright。
• Cypress。

文档工具

文档工具可从注释或 Markdown 生成 API 文档、站点或组件文档。

面试重点

• package.json 描述项目和依赖。
• lockfile 保证依赖版本可复现。
• 构建工具负责把开发代码变成生产资源。
• Lint 和格式化解决不同问题。
• 测试是部署可靠性的基础。

复习清单

• 知道包管理器的作用。
• 理解构建工具做了什么。
• 能区分 ESLint 和 Prettier。
• 知道压缩、测试、文档工具的意义。

一句话总结

附录 D 的核心是工程工具链：包管理、构建、检查、测试和文档共同支撑 JavaScript 项目的长期开发和可靠交付。