前言

随着前端技术的不断发展，越来越多的工具和框架涌现出来，帮助开发者构建更高效、可维护的应用程序，本文将从下述几个方面来进行简要记录（生命不息，学习不止）

  • 语言
  • 框架
  • 包管理器
  • 构建工具 🆚
  • 状态管理库 🆚
  • CSS 预处理器 🆚
  • 测试工具
  • 代码转译与辅助工具

语言

常用的两款前端语言TypeScript和JavaScript，针对它们的介绍，在早期的文章已有介绍，烦请移步
传送门

JavaScript和TypeScript的对比

概要介绍JavaScriptJavaScript是一种基于客户端浏览器的，基于对象、事件驱动式的脚本语言。稍提一下...

框架

名称说明
Vue.js渐进式 JavaScript 框架，适用于构建交互式 Web 界面。
React由 Facebook 开发的 UI 库，采用组件化架构。
Svelte编译时框架，构建高性能 Web 应用，零运行时开销。
Angular谷歌出品的大型企业级框架，采用 TypeScript 编写。
Nuxt.js基于 Vue 的 SSR 框架。
Astro新型静态网站生成器，支持多种前端框架并优化性能。
SolidJS响应式 UI 框架，运行时性能极高，类似 React 的语法。
Qwik以懒加载为核心特性的框架，实现超快首屏加载。
Lit谷歌开发的 Web Components 框架。
MarkoeBay 开发的 UI 框架，支持流式 SSR。

包管理器

针对包管理器，在早期的文章已有介绍，烦请移步
传送门

Node.js和包管理器

Node.jsNode.js简介简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js...

构建工具 🆚

特性Vue CLIVite
构建机制基于 Webpack 的打包工具基于原生 ES 模块（ESM）的新型构建工具
开发启动速度较慢（需要打包整个项目）极快（无需打包，按需编译）
HMR 热更新速度快（但不如 Vite）极速，几乎无延迟
配置复杂度默认封装较多，配置较复杂更加轻量，配置更简单
适合项目类型中大型项目、传统打包构建需求小型到中型项目，现代前端开发首选
插件系统使用 Webpack 插件生态自己的插件系统（基于 Rollup，vite7 使用 Rolldown）
生产构建使用 Webpack 打包输出使用 Rolldown 、Rollup 或 esbuild 等进行高效打包
对 TypeScript / JSX / CSS 预处理器的支持需要额外配置开箱即支持
是否仅限 Vue？是（主要针对 Vue 2/3）否（支持 Vue、React、Svelte 等）

状态管理库 🆚

特性VuexPinia
API 设计概念多（state、getter、mutation、action）更加简洁直观
TypeScript 支持一般，需额外定义类型原生支持，类型推导强
模块化支持，但配置较繁琐支持，模块自动注册
状态修改方式只能通过 mutation 提交可直接修改 state
性能表现成熟稳定更轻量、响应更快
Vue Composition API 兼容性一般完美兼容

CSS 预处理器 🆚

特性VuexPinia
编译器语言Ruby（旧版）、Dart（新版）JavaScript（Node.js）
变量符号$variable@variable
控制结构（if/for）支持支持
嵌套规则支持支持
混合宏（Mixins）支持支持
社区活跃度高中等
开发者体验更强大、更灵活更简单、更轻量

测试工具

名称说明
Vitest与 Vite 配套的测试框架，支持 TypeScript。
JestFacebook 推出的测试框架，适合 React 项目。
Playwright微软开发的浏览器自动化测试工具。
CypressE2E 测试工具，支持可视化调试。
Testing LibraryReact/Vue/DOM 测试库，鼓励用户行为驱动测试。

代码转译与辅助工具

名称说明
Babel将 ES6+ 语法编译为兼容旧浏览器的代码。
TypeScriptJavaScript 的超集，支持类型系统。
SWCRust 编写的 JS 编译器，比 Babel 更快。
Sucrase快速 JS 编译器，适合开发时使用。

结语

语言、框架、工具不在乎好坏，能用、好用、适合用才是正解，现如今前端技术发展迅速，新玩具层出不穷。根据需求和场景（特别是新项目搭建时）选择适合自己项目和团队的技术栈非常重要。

Last modification：July 5, 2025
© Allow specification reprint
如果觉得我的文章对你有用，您可以给博主买一杯果汁，谢谢！