【前端】工具链一本通

长期更新补充。

概述

• 定义
  从广义的“工具链”概念来看：一个完整的开发工具链指的是从代码编写到部署上线整个过程中所使用的所有工具和库的集合。这个集合包括：
  开发环境工具： IDE/编辑器（VS Code）、版本控制（Git）。
  语言： JavaScript、TypeScript
  框架：React/Vue/Angular。
  构建工具： Webpack、Vite、Rollup。
  代码质量工具： ESLint、Prettier。
  测试工具： Jest、React Testing Library。
  包管理工具： npm、yarn。
  辅助开发库： Lodash、Moment.js（日期处理）、Axios（HTTP 请求）等。
  部署工具： CI/CD 管道、Docker 等

工具类别	代表工具	作用
代码转译工具	Babel、TypeScript	将代码转为浏览器支持的语法
代码质量工具	ESLint、Stylelint、Prettier	检查代码规范、格式统一
测试工具	Jest、Vitest、React Testing Library、Cypress	单元测试、集成测试
构建优化工具	SWC、esbuild、Terser	更快的构建/压缩替代方案

• 链接
  typescript
  webpack

Vite（模块打包、构建）

指引
配置
插件
后续更新内容…

Babel（JavaScript 编译器）

什么是编译器？
一个编译器是将用一种语言（源语言，Source Language）编写的程序转换成另一种语言（目标语言，Target Language）的程序。
Babel 为什么是 JavaScript 编译器？
Babel 的核心功能是将新版本（或非标准）的 JavaScript 代码作为源语言，转换成旧版本（或更广泛兼容）的 JavaScript 代码作为目标语言。

为什么不叫“解释器”？
解释器 (Interpreter) 是直接执行源代码的程序，而不是将其转换成另一种形式。JavaScript 引擎（如 V8）本身是 JavaScript 解释器/JIT 编译器，它直接执行 JavaScript 代码。
Babel 并不执行代码，它只转换代码。 它是一个代码转换工具链。

• 作用
  将现代 JavaScript（如 ES6+）代码转译成兼容旧浏览器的 ES5 代码
  支持 JSX、TypeScript、装饰器等语法扩展（需配置对应插件）
• 核心组成
  @babel/core: Babel 的核心模块
  @babel/preset-env: 根据目标浏览器转译 JS（常用配置）
  @babel/preset-react: 转译 JSX（React 项目必用）
  @babel/preset-typescript: 支持 TypeScript
  babel-loader: Webpack 中使用 Babel 的 loader
• 常见配置（babel.config.js）

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: 'defaults' }],
    '@babel/preset-react',
    '@babel/preset-typescript'
  ]
};

Prettier（代码格式化工具）

• 作用
  统一代码风格（自动格式化）
  专注“格式”，不检查语法逻辑错误（这由 ESLint 做）
• 常见配置（.prettierrc 或 package.json 中）

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 100,
  "trailingComma": "none"
}

• 常见搭配
  配合 ESLint 使用，防止两者冲突（需要关闭 ESLint 中的格式化规则）
  安装插件：eslint-config-prettier + eslint-plugin-prettier

ESLint（代码质量检查）

• 作用
  静态检查 JS/TS 代码是否符合规范、是否存在潜在错误
  可结合 Prettier，统一格式+质量检查
• 核心配置文件 .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended' // 让 Prettier 控制格式化相关规则
  ],
  parser: '@typescript-eslint/parser',
  plugins: ['react', '@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    'no-unused-vars': 'warn',
    // 更多自定义规则...
  }
};

• 使用

npm install eslint --save-dev
npx eslint --init #初始化配置
#这个命令会引导你选择项目的风格、使用的框架（React、Vue等）、
#是否使用 TypeScript 等，并生成一个配置文件（.eslintrc.js、.eslintrc.json 等）。
npx eslint yourfile.js #检查这个文件
npx eslint yourfile.js --fix #自动修复代码

比如：如果在main.js 声明个变量而不使用，则终端和网页都会报错，因为不严谨。

• 解决方式
  方式1: 手动/自动解决掉错误
  方式2: 暂时关闭eslint检查, 在vue.config.js中配置后重启服务

module.exports={
	//其他配置略
	lintOnSave:false//关闭eslint检查
}

• 常配合使用的插件/配置
  eslint-config-airbnb: Airbnb 代码规范
  eslint-plugin-react: 检查 React 项目
  eslint-plugin-import: 管理模块导入
  eslint-config-prettier: 配合 Prettier，关闭 ESLint 中和 Prettier 冲突的规则

Lodash

虽然它不是像 Webpack、Babel、ESLint 那样负责构建、编译、打包、代码检查的传统意义上的“工具链组件”，但它属于“开发工具库”的范畴，而开发工具库是广义工具链中不可或缺的一环。

• 定义：JavaScript 实用工具库。
• 作用
  提供一套一致的、高性能的、模块化的实用工具函数，用于处理常见的编程任务，特别是对数组、对象、字符串、函数等进行操作。
  • 主要解决了以下几个 JavaScript 本身或旧版本 JavaScript 的痛点：

1. 弥补原生方法不足或不一致： 在 ES6 之前，JavaScript 原生数组和对象的方法相对较少或不够强大。Lodash 提供了大量用于数组操作（如去重、扁平化、分组）、对象操作（如深度合并、克隆）、函数操作（如节流、防抖）等的功能。
2. 跨浏览器兼容性： 早期 JavaScript 在不同浏览器中的行为不一致，Lodash 内部处理了这些兼容性问题，让开发者无需担心。
3. 提高代码可读性和简洁性： 许多常见的复杂操作（如深度克隆、深层属性访问）用原生 JS 写起来可能冗长且容易出错，Lodash 提供简洁的 API 来完成这些任务。
4. 性能优化： Lodash 的很多函数都经过了精心优化，比一些手写的原生实现可能更高效。
5. 函数式编程支持： Lodash 提供了许多支持函数式编程范式（如柯里化、函数组合、immutability）的工具函数，使得编写函数式风格的代码更加容易。
   • 随着 ES6+ 及后续版本的不断发展，许多 Lodash 提供的功能已经被原生 JavaScript 支持（例如 Array.prototype.includes、Array.prototype.flatMap、Object.values、Object.entries 等）。
     目前的作用还有：
6. 复杂数据操作： 对于深拷贝、深度合并、复杂的分组排序等，Lodash 仍然提供比原生 JS 更简洁、更健壮的解决方案。
7. 兼容旧浏览器： 如果项目需要支持 IE 等旧版浏览器，Lodash 依然是很好的选择。
   函数式编程： Lodash 的 FP（Functional Programming）版本提供了纯粹的函数式风格 API，在函数式编程范式中依然很受欢迎。
8. 代码简洁性： 对于许多常用操作，Lodash 的 API 仍然比手写原生代码更短、更易读。
9. 性能考量： 对于一些底层优化，Lodash 的实现可能比开发者自己手写更优。

• 依然还广泛使用的部分
  数据处理类（集合 / 数组 / 对象）

函数	作用	原因
_.cloneDeep	深拷贝对象或数组	原生深拷贝在 JS 中依旧不方便，structuredClone 不支持所有类型
_.get	安全获取嵌套属性	替代 a?.b?.c，支持默认值、动态 key 路径
_.set	设置嵌套对象的值	原生难以实现，配合表单处理非常常见
_.merge	深度合并对象	替代 Object.assign，递归合并更常用
_.isEqual	深度比较两个值是否相等	比 === 更智能，广泛用于单元测试或表单 diff
_.omit / _.pick	从对象中选择/排除字段	简洁明了，尤其在表单和 API 响应处理
_.uniq / _.uniqBy	数组去重	比原生 Set 更灵活，支持对象数组
_.groupBy	根据字段对数组分组	原生处理不直观，数据处理常用
_.flattenDeep	数组深度扁平化	原生 flat(Infinity) 不够直观

函数工具类（节流、防抖等）

函数	作用	原因
_.debounce	防抖函数（例如输入框搜索）	原生实现繁琐
_.throttle	节流函数（如滚动监听）	保持性能稳定
_.once	只执行一次的函数包装	初始化场景常见
_.memoize	缓存函数结果	优化计算性能，搭配 React/Vue

字符串类

函数	作用	原因
_.kebabCase / _.camelCase / _.snakeCase	命名风格转换	项目常需命名统一，如从接口字段转 camelCase
_.padStart / _.padEnd	字符填充	一些老浏览器兼容场景仍在用