工具链

一组用于软件开发的工具和技术, 帮助开发者管理好从源代码到最终软件的整个开发过程, 对于前端来讲, 这些工具通常包括:

• 集成开发环境, IDE

• 包管理工具, 核心是代码组织与复用

  • npm, 兼容性最强, 速度较慢
  • yarn, 通过并行安装和缓存, 解决了npm速度慢的问题, 但资源消耗大
  • pnpm, 采用共享依赖模型, 同时解决前两者的问题, 但兼容性问题较多
  • 企业级的包管理还可以做更多, 比如
    • 应对供应链污染. 前端项目的直接供应商是NPM仓库, 一个带有bug的包发布后, 会导致本地或持续集成环境产生问题.
      因此会在开源包管理器的基础上增加对bug包的黑名单控制
    • 通过网络IO优化, FUSE, OverlayFS文件系统, 文件IO优化等跨领域技能, 进一步加速依赖安装

包管理有两个主要模式: 单包管理和多包管理. 多包管理适用于在一个代码仓库里管理多个包, 相比单包管理, 可以很方便地共享依赖, 跨包复用代码, 进行联合调试和发布.

通常采用Monorepo的方式管理多包, 比如npm自带的workspace模式, 开源方案Lerna和Rush等等

• 构建工具, 通常包含代码转译器, 优化器, 打包器, 开发服务器和插件系统
  Webpack(2012), Rollup(2015), Parcel(2017), Vite(2020), Turbopack(2022), Rspack(2023)
  • 转译器也叫代码转换器(Transformer), 编译器(Compiler), 将源代码转换为目标平台能够直接运行的代码, 同时让一些新的语言特性能够兼容旧的环境, 比如箭头函数到普通函数的转换, JSX到JS的转换, Less到CSS的转换
  • 优化器是将转译完成的代码进一步优化, 比如压缩, 混淆和分割, 以提升传输效率和安全性
  • 打包器是将转译好的代码合并到一块, 它通常会内置转译器以及优化器, 从源代码到最终产物, 一站式完成
  • 开发服务器提供一个本地的HTTP服务器, 通过HMR, 传输原生ES模块, 接口代理等功能来提升开发体验
  • 插件系统是功能扩展的主要方式, 可以灵活地改变整个构建工具的行为, 来实现定制化需求

前端构建工具的大趋势是极致整合(减少学习负担)以及使用Rust重写核心模块(提升构建和打包效率, 缓解集成压力)

• 调试工具

  • 浏览器开发者工具: 用于普通HTML页面的UI, 网络, 性能调试
  • 小程序开发者工具: 用于小程序模拟和真机调试
  • 接口调试工具: Postman, Charles等
  • 框架自带的调试工具: React Developer Tools, Vue Devtools等, 可以展示更为直观的虚拟DOM结构和组件状态

• 持续集成与部署(CI/CD)工具: Github Action, Travis CI, Jenkins