随着互联网技术的快速发展以及开源社区的力量，前端已经发展成为大前端的时代，作为一名前端开发工程师，我们慢慢的就会发现，前端需要学习的东西越来越多，无论是web端，桌面端，还是移动端，甚至是服务端，都能见到前端技术的影子。
本文主要列举目前比较主流的技术栈，主要从编程语言、运行时环境、前端框架、构建工具、组件库五个大的方面进行分析。
编程语言
JavaScript
JavaScript 是一种具有函数优先特性的轻量级、解释型或者说即时编译型的编程语言。作为入门前端的基础语言，扎实的 JavaScript 功底将有助于你在学习前端相关技术栈时游刃有余。
TypeScript
TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，也可以说是具有类型语法的JavaScript，TypeScript通过类型注解提供编译时的静态类型检查，让你在开发过程中就能够发现错误，而不是上线后。
相关网站
TypeScript官网
https://www.typescriptlang.org
TypeScript中文网
https://ts.nodejs.cn
Rust
Rust 是一门赋予每个人构建可靠且高效软件能力的语言。虽然说Rust语言不属于前端范畴，但是如今许多与前端相关的框架和工具都是基于Rust的，像Deno、Tauri、Rspack等。
相关网站
Rust官网
https://www.rust-lang.org
Rust语言中文社区
https://rustcc.cn
Rust软件包
https://crates.io
Rust 程序设计语言 简体中文版
https://kaisery.github.io/trpl-zh-cn
Dart
Dart 是一个为全平台构建快速应用的客户端优化的编程语言，如果你用Flutter开发多端应用，那么Dart是必须要学会的。虽然Dart也不属于前端语言范畴，但是通过Dart语言借助Flutter框架，我们仍然可以开发Web端的应用，况且Dart语言并不难学。
相关网站
Dart官网
https://dart.dev
Dart中文网
https://dart.cn
运行时环境
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 语言的强类型和错误处理机制，提供可靠的构建过程和错误处理。
相关网站
Node官网
https://nodejs.org
Deno官网、中文网
https://deno.com、https://www.denojs.cn
Bun官网
https://bun.sh
前端框架
Web端
React
React 是用于构建 Web 和原生用户界面的库。如果你熟悉 JSX，JS 基础很扎实，同时想比较灵活的去开发大型项目，那么你可以考虑使用React。
相关网站
React官网
https://react.dev
React中文网
https://react.nodejs.cn
Next.js
Next.js 是 Vercel 公司开源的一个用于 Web 的全栈 React 框架，也可以说是 React 的上层框架，可实现服务端层面的渲染，它在内部封装了许多功能，其中在底层，Next.js 还抽象并自动配置 React 所需的工具，例如打包、编译等。 这使我们可以更专注于构建应用，而不是花时间进行配置。
相关网站
Next.js官网
https://nextjs.org
Next.js中文网
https://next.nodejs.cn
Preact
Preact 是 React 的轻量级替代方案，体积仅有 3kB，并且拥有与 React 相同的 API。
相关网站
Preact官网
https://preactjs.com
Vue
Vue 是一款用于构建用户界面的 JavaScript 框架。作为多数开发者入门学习前端UI框架的首选语言，其上手程度的确很容易，Vue 框架内部帮我们封装了许多指令。其庞大的生态系统，我们可以很容易的在开源社区找到对应的解决方案。
相关网站
Vue官网
https://vuejs.org
Nuxt.js
Nuxt.js 是基于 Vue.js 开发的一个上层框架，可实现客户端/服务端渲染，与 Next.js 异曲同工，如果你的技术栈是Vue，并且想实现服务端层面的渲染，提高 SEO，那么 Nuxt 是你的不二选择。
相关网站
Nuxt.js官网
https://nuxt.com
Astro
Astro 是一个集多功能于一体的 Web 框架，它内置包含了你构建网站所需的一切，主要用于构建像博客、营销网站、电子商务网站这样的以内容驱动的网站。
Astro 以开创了一种新的前端架构而闻名，与其他框架相比它减少了 JavaScript 的开销和复杂性，如果你需要一个加载速度快、具有良好 SEO 的网站，那么 Astro 就是你的选择。
相关网站
Astro官网
https://astro.build
Astro中文网
https://astro.nodejs.cn
移动端
React Native
React Native 是一款使用 React 来创建 Android 和 iOS 原生应用的框架。你可以用你熟悉的React 语法来写项目，然后由RN来构建你的 Android 和 iOS 应用。随着RN的不断迭代和优化，性能层面已经接近于原生开发。
相关网站
React Native官网
https://reactnative.dev
React Native中文网
https://rn.nodejs.cn
Flutter
Flutter 是Google推出的移动应用开发框架，使用 Dart 语言编写，最初只用于移动端开发，现已支持多端应用。
Flutter 号称只要一套代码库，即可构建、测试和发布适用于移动、Web、桌面和嵌入式平台的精美应用。
Dart 是一个为全平台构建快速应用的客户端优化的编程语言，是学习 Flutter 的必备语言，不过你不必太担心，只要你的 JavaScript 基础过硬，Dart 语言很容易掌握，它们在语法层面还是有许多相似之处。
相关网站
Flutter官网
https://flutter.dev
Flutter中文网
https://flutter.cn
Flutter中文开发者社区
https://flutterchina.club
Flutter中文社区
https://flutterchina.net.cn
桌面端
Electron
Electron 是一个使用 JavaScript、HTML 和 CSS 来构建桌面应用程序的框架。通过将 Chromium 和 Node.js 嵌入到其二进制文件中，Electron 允许你维护一个 JavaScript 代码库并创建可在 Windows、macOS 和 Linux 上运行的跨平台应用 — 无需原生开发经验。
相关网站
Electron官网
https://www.electronjs.org
Electron中文网
https://electron.nodejs.cn
Tauri
Tauri 可以构建跨平台的快速、安全、前端隔离应用，兼容所有前端框架，无需做出任何改变，支持使用前端构建工具 Vite 来创建一个 Tauri 应用程序，支持使用 React 框架 Next.js 来创建一款 Tauri 应用程序。
Tauri 是基于 Rust 开发的，因为安全是 Tauri 团队的首要目标和最大创新，因此我们无需担心安全层面的问题，在学习成本上，除了掌握前端技术之外，Rust 语言是必须要掌握的，所以我们至少要了解Rust语言基础。
相关网站
Tauri官网
https://tauri.app
服务端
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 提供开箱即用的应用架构，允许开发者和团队创建高度可测试、可扩展、松耦合且易于维护的应用。
相关网站
Nest官网、中文网
https://nestjs.com、https://nest.nodejs.cn
Express官网、中文网
https://expressjs.com、https://express.nodejs.cn
Koa官网、中文网
https://koajs.com、https://koa.nodejs.cn
Egg官网
https://www.eggjs.org
多端框架
MorJS
MorJS 是饿了么开发的一款基于小程序 DSL 的，可扩展的多端研发框架，如果你熟悉微信小程序和支付宝小程序的原生开发技巧，那么你就可以轻松上手使用MorJs来开发多端应用。
相关网站
Morjs官网
https://mor.eleme.io
uni-app
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到多端应用。
相关网站
uni-app官网
https://uniapp.dcloud.net.cn
Taro
Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发多端应用。
相关网站
Taro官网
https://taro.jd.com
构建工具
Vite
Vite 是一种基于 ESM 的新型前端构建工具，能够显著提升前端开发体验。相比于传统的构建工具，能很大程度上减少开发者的心智负担。
相关网站
Vite官网
https://vitejs.dev
Rspack
Rspack 是字节跳动开源的一个基于 Rust 的高性能 Web 构建引擎。
Rspack 可以同时满足以下四点：快速的 Dev 启动性能、高效的 Build 性能、灵活的配置、生产环境的优化能力，这四点是 Rspack 的核心优势，同时也是开发者对构建工具的四个需求。
Rsbuild
Rsbuild 其实是基于 Rspack 的一个构建工具，一个高性能集成工具，你可以理解为一个基于 Rspack 的增强版的脚手架，在实践中官网建议使用 Rsbuild，可以大大提高你的开发效率。
相关网站
Rspack官网
https://rspack.dev
Rsbuild官网
https://rsbuild.dev
Webpack
Webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。经过多年的发展，有着极其丰富的生态，是目前最为成熟的构建工具，但是性能问题一直是围绕着 webpack 逃不开的话题，对于开发维护大型项目的开发者来说，其耗时的构建速度简直是一场噩梦。
相关网站
Webpack官网
https://webpack.js.org
Rollup
Rollup 是一个用于 JavaScript 的模块打包工具，它将小的代码片段编译成更大、更复杂的代码。作为 Vite 在生产环境中依赖的打包器，Rollup 脱颖而出。但是，Rollup 更偏向于对库的打包。
相关网站
Rollup官网
https://rollupjs.org
Esbuild
Esbuild 构建工具的核心目标是开创构建工具性能的新时代，同时创建一个易于使用的现代构建工具。作为 Vite 在开发环境中的依赖，Esbuild让我们见证了其极快的打包速度。
相关网站
Esbuild官网
https://esbuild.github.io
组件库
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。
相关网站
Element官网
https://element.eleme.cn
ElementPlus官网
https://element-plus.org
Ant Design Vue官网
https://www.antdv.com
Naive UI官网
https://www.naiveui.com
vxe-table官网
https://vxetable.cn
Vue组件-web移动端
Vant
Vant 是杭州有赞前端团队于 2017 年开源的一个轻量、可定制的移动端组件库。有 Vue2、Vue3 对应的版本，但是 Vue2 版目前已停止迭代新功能，建议使用最新版本Vant4。
NutUI-Vue
NutUI-Vue 是京东 NutUI 官方团队开源的具有京东风格的轻量级移动端组件库，80+ 高质量组件，覆盖移动端主流场景，基于京东 APP 10.0 视觉规范，开箱即用。默认提供多套官方UI主题，同时允许在一定程度上定制新主题，以满足业务的多样化视觉需求。
相关网站
Vant官网
https://vant-contrib.gitee.io/vant
NutUI-Vue官网
https://nutui.jd.com/h5/vue/4x
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官网
https://ant.design/index-cn
NutUI-React官网
https://nutui.jd.com/h5/react/2x/#/zh-CN/guide/intro-react
小程序组件
Ant Design Mini
Ant Design Mini 是以 Ant Design 设计原则为核心的在微信小程序上的实现。
Vant Weapp
Vant Weapp 是 Vant 官方提供的微信小程序版本。
NutUI-Vue-taro
NutUI-Vue 基于 Taro，使用 Vue 技术栈开发小程序应用，是 NutUI 在使用 Taro 框架开发小程序上的一种实现。
NutUI-React-taro
NutUI-React 基于 Taro，使用 React 技术栈开发小程序应用，是 NutUI 在使用 Taro 框架开发小程序上的一种实现。
相关网站
Ant Design Mini官网
https://ant-design-mini.antgroup.com/
Vant Weapp官网
https://vant-contrib.gitee.io/vant-weapp
NutUI-Vue官网
https://nutui.jd.com/taro/vue/4x/#/zh-CN/guide/intro
NutUI-React官网
https://nutui.jd.com/taro/react/2x/#/zh-CN/guide/intro-react
本文主要列举以上五个方向的前端技术栈，如果存在疏漏的，欢迎在评论区补充，一起探讨。