随着互联网技术的快速发展以及开源社区的力量，前端已经发展成为大前端的时代，作为一名前端开发工程师，我们慢慢的就会发现，前端需要学习的东西越来越多，无论是web端，桌面端，还是移动端，甚至是服务端，都能见到前端技术的影子。
本文主要列举目前比较主流的技术栈，主要从编程语言、运行时环境、前端框架、构建工具、组件库五个大的方面进行分析。
编程语言
JavaScript
JavaScript 是一种具有函数优先特性的轻量级、解释型或者说即时编译型的编程语言。作为入门前端的基础语言，扎实的 JavaScript 功底将有助于你在学习前端相关技术栈时游刃有余。
TypeScript
TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，也可以说是具有类型语法的JavaScript，TypeScript 通过类型注解提供编译时的静态类型检查，让你在开发过程中就能够发现错误，而不是上线后。
相关网站
Rust
Rust 是一门赋予每个人构建可靠且高效软件能力的语言。虽然说Rust语言不属于前端范畴，但是如今许多与前端相关的框架和工具都是基于Rust的，像Deno、Tauri、Rspack等。
相关网站
Dart
Dart 是一个为全平台构建快速应用的客户端优化的编程语言，如果你用 Flutter 开发多端应用，那么 Dart 是必须要学会的。虽然 Dart 也不属于前端语言范畴，但是通过 Dart 语言借助 Flutter 框架，我们仍然可以开发Web端的应用，况且 Dart 语言并不难学。
相关网站
运行时环境
Node
Node.js 是一个开源的、跨平台的 JavaScript 运行时环境。在处理大量并发请求和实时应用方面表现出色，适用于构建服务器、网络应用、实时聊天应用、API、后端服务等。Node.js 生态系统庞大且成熟，拥有丰富的第三方模块和库。
相关网站
Deno
Deno 是 Node.js 的作者 Ryan Dahl 开源的一个现代的 JavaScript 和 TypeScript 运行时。Deno 提供了全面的功能，并默认情况下是安全的。Deno 更符合Web API和现代标准，并支持大多数npm包。Deno 还提供出色的开发人员体验，特别是对于使用 TypeScript 的用户，它是开箱即用的。
相关网站
Bun
Bun 是一个用于 JavaScript 和T ypeScript 应用的一体化工具包。它作为一个单独的可执行文件发布，名为 bun，核心是 Bun 运行时，这是一个快速的 JavaScript 运行时，旨在替代 Node.js。它是用 Zig 语言编写的，由 JavaScriptCore 在底层提供支持，大大减少了启动时间和内存使用。
Bun 专注于开发人员体验、现代 JavaScript 实践和高性能。它构建在 JavaScriptCore 和 Zig之上，提供快速的构建速度，通过并行构建和缓存机制减少等待时间。Bun 还使用 Zig 语言的强类型和错误处理机制，提供可靠的构建过程和错误处理。
前端框架
Web端
React
React 是用于构建 Web 和原生用户界面的库。如果你熟悉 JSX，JS 基础很扎实，同时想比较灵活的去开发大型项目，那么你可以考虑使用React。
相关网站
Next.js
Next.js 是 Vercel 公司开源的一个用于 Web 的全栈 React 框架，也可以说是 React 的上层框架，可实现服务端层面的渲染，它在内部封装了许多功能，其中在底层，Next.js 还抽象并自动配置 React 所需的工具，例如打包、编译等。 这使我们可以更专注于构建应用，而不是花时间进行配置。
相关网站
Preact
Preact 是 React 的轻量级替代方案，体积仅有 3kB，并且拥有与 React 相同的 API。
Vue
Vue 是一款用于构建用户界面的 JavaScript 框架。作为多数开发者入门学习前端UI框架的首选语言，其上手程度的确很容易，Vue 框架内部帮我们封装了许多指令。其庞大的生态系统，我们可以很容易的在开源社区找到对应的解决方案。
Nuxt.js
Nuxt.js 是基于 Vue.js 开发的一个上层框架，可实现客户端/服务端渲染，与 Next.js 异曲同工，如果你的技术栈是Vue，并且想实现服务端层面的渲染，提高 SEO，那么 Nuxt 是你的不二选择。
Astro
Astro 是一个集多功能于一体的 Web 框架，它内置包含了你构建网站所需的一切，主要用于构建像博客、营销网站、电子商务网站这样的以内容驱动的网站。
相关网站
移动端
React Native
React Native 是一款使用 React 来创建 Android 和 iOS 原生应用的框架。你可以用你熟悉的React 语法来写项目，然后由RN来构建你的 Android 和 iOS 应用。随着RN的不断迭代和优化，性能层面已经接近于原生开发。
相关网站
Flutter
Flutter 是Google推出的移动应用开发框架，使用 Dart 语言编写，最初只用于移动端开发，现已支持多端应用。
Flutter 号称只要一套代码库，即可构建、测试和发布适用于移动、Web、桌面和嵌入式平台的精美应用。
Dart 是一个为全平台构建快速应用的客户端优化的编程语言，是学习 Flutter 的必备语言，不过你不必太担心，只要你的 JavaScript 基础过硬，Dart 语言很容易掌握，它们在语法层面还是有许多相似之处。
相关网站
桌面端
Electron
Electron 是一个使用 JavaScript、HTML 和 CSS 来构建桌面应用程序的框架。通过将 Chromium 和 Node.js 嵌入到其二进制文件中，Electron 允许你维护一个 JavaScript 代码库并创建可在 Windows、macOS 和 Linux 上运行的跨平台应用 — 无需原生开发经验。
相关网站
Tauri
Tauri 可以构建跨平台的快速、安全、前端隔离应用，兼容所有前端框架，无需做出任何改变，支持使用前端构建工具 Vite 来创建一个 Tauri 应用程序，支持使用 React 框架 Next.js 来创建一款 Tauri 应用程序。
Tauri 是基于 Rust 开发的，因为安全是 Tauri 团队的首要目标和最大创新，因此我们无需担心安全层面的问题，在学习成本上，除了掌握前端技术之外，Rust 语言是必须要掌握的，所以我们至少要了解Rust语言基础。
服务端
Express
Express 是著名的开源作者 tj 开发的一个极简且灵活的 Node.js Web 应用框架，它为 Web 和移动应用提供了一组强大的功能。
相关网站
Koa
Koa 是 Express 的作者 tj 开源的用于 Node.js 的下一代 Web 框架，是一个精简版的框架，与 Express 不同的是，它的体积更小，你需要通过安装第三方包的形式来使用中间件，而不是 Express 那样，把中间件内置在框架中。最重要的是 Koa 可以通过利用异步函数，允许你放弃回调并大大提高错误处理能力。
相关网站
Egg
Egg 是阿里开源的一个基于 Koa，为企业级框架和应用而生的 Node.js 上层框架。Egg 奉行约定优于配置，按照一套统一的约定进行应用开发，团队协作成本低，具备高度可扩展的插件机制。
Nest
Nest 是一个用于构建高效、可扩展的 Node.js 服务器端应用的框架。 它使用渐进式 JavaScript，构建并完全支持 TypeScript 并结合了 OOP（面向对象编程）、FP（函数式编程）和 FRP（函数式反应式编程）的元素。
Nest 解决的首要问题就是架构层面的问题，Nest 提供开箱即用的应用架构，允许开发者和团队创建高度可测试、可扩展、松耦合且易于维护的应用。
相关网站
多端框架
MorJS
MorJS 是饿了么开发的一款基于小程序 DSL 的，可扩展的多端研发框架，如果你熟悉微信小程序和支付宝小程序的原生开发技巧，那么你就可以轻松上手使用MorJs来开发多端应用。
uni-app
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到多端应用。
Taro
Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发多端应用。
构建工具
Vite
Vite 是一种基于 ESM 的新型前端构建工具，能够显著提升前端开发体验。相比于传统的构建工具，能很大程度上减少开发者的心智负担。
Rspack
Rspack 是字节跳动开源的一个基于 Rust 的高性能 Web 构建引擎。
Rspack 可以同时满足以下四点：快速的 Dev 启动性能、高效的 Build 性能、灵活的配置、生产环境的优化能力，这四点是 Rspack 的核心优势，同时也是开发者对构建工具的四个需求。
Rsbuild
Rsbuild 其实是基于 Rspack 的一个构建工具，一个高性能集成工具，你可以理解为一个基于 Rspack 的增强版的脚手架，在实践中官网建议使用 Rsbuild，可以大大提高你的开发效率。
Webpack
Webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。经过多年的发展，有着极其丰富的生态，是目前最为成熟的构建工具，但是性能问题一直是围绕着 webpack 逃不开的话题，对于开发维护大型项目的开发者来说，其耗时的构建速度简直是一场噩梦。
Rollup
Rollup 是一个用于 JavaScript 的模块打包工具，它将小的代码片段编译成更大、更复杂的代码。作为 Vite 在生产环境中依赖的打包器，Rollup 脱颖而出。但是，Rollup 更偏向于对库的打包。
Esbuild
Esbuild 构建工具的核心目标是开创构建工具性能的新时代，同时创建一个易于使用的现代构建工具。作为 Vite 在开发环境中的依赖，Esbuild让我们见证了其极快的打包速度。
组件库
Vue组件-Web桌面端
Element
Element 是饿了么开源的一套为开发者、设计师和产品经理准备的基于 Vue2.0 的桌面端组件库。
ElementPlus
ElementPlus 是饿了么基于 Vue3，面向设计师和开发者的组件库。
Ant Design Vue
Ant Design Vue 是 Ant Design 的 Vue 版本，开发和服务于企业级后台产品，由社区实现，到目前为止已迭代至第四个版本，支持 Vue2 和 Vue3。
Naive UI
Naive UI 是图森未来开源的一个 Vue 3 组件库，比较完整，主题可调，使用 TypeScript 开发。仅支持 Vue3，曾被尤大推荐使用过。
vxe-table
vxe-table 是一个开源的功能较完善的表格库，无论是基础表格还是复杂表格，都能很好的实现，支持 Vue2 和Vue3。
Vue组件-web移动端
Vant
Vant 是杭州有赞前端团队于 2017 年开源的一个轻量、可定制的移动端组件库。有 Vue2、Vue3 对应的版本，但是 Vue2 版目前已停止迭代新功能，建议使用最新版本Vant4。
NutUI-Vue
NutUI-Vue 是京东 NutUI 官方团队开源的具有京东风格的轻量级移动端组件库，80+ 高质量组件，覆盖移动端主流场景，基于京东 APP 10.0 视觉规范，开箱即用。默认提供多套官方UI主题，同时允许在一定程度上定制新主题，以满足业务的多样化视觉需求。
React组件-web桌面端
Ant Design
Ant Design 是蚂蚁集团和 Ant Design 开源社区出品的一款企业级组件库，数十种常用组件，可定制主题。可以说是React框架主流的组件库。
自诞生之初至今已经迭代至第五个版本，在github中star数高达88.9k，超过2000名贡献者参与贡献。我个人认为使用 React 开发项目用 Ant Design 组件库足够，如果需要高度自定义样式，你可以在项目中结合 tailwind 来高效率的书写样式。你可在官网底部查看其所有相关资源。
React组件-web移动端
NutUI-React
NutUI-React 是NutUI 官方团队开源的适用于 React 技术栈的 H5 应用，70+ 高质量组件，覆盖移动端主流场景，基于京东APP 10.0 视觉规范，支持服务端渲染（Next.js）。
小程序组件
Ant Design Mini
Ant Design Mini 是以 Ant Design 设计原则为核心的在微信小程序上的实现。
Vant Weapp
Vant Weapp 是 Vant 官方提供的微信小程序版本。
NutUI-Vue
NutUI-Vue 基于 Taro，使用 Vue 技术栈开发小程序应用，是 NutUI 在使用 Taro 框架开发小程序上的一种实现。
NutUI-React
NutUI-React 基于 Taro，使用 React 技术栈开发小程序应用，是 NutUI 在使用 Taro 框架开发小程序上的一种实现。
本文主要列举以上五个方向的前端技术栈，如果存在疏漏的，欢迎在评论区补充，一起探讨。
