前端必火：这15个硬核的开源项目，yyds！

盘点15个优质的前端开源项目。

1、website-templates：HTML5网站模板集；

2、30secondsofcode：收集精选实用 JavaScript 代码片段的项目；

3、deno：安全的 JavaScript 和 TypeScript 运行时；

4、33-js-concepts：33 个必知的 Javascript 概念列表；

5、Three.js：3D JavaScript 库；

6、stylized-water：风格化水面的js开源库；

7、icegl-three-vue-tres：三维可视化框架；

8、javascript-questions：JavaScript 题库；

9、airbnb/javascript：javascript风格指南;

10、LogicFlow：流程图编辑框架；

11、Vben Admin：企业级管理系统框架；

12、JavaScript30：原生 JavaScript 在 30 天内完成 30 个项目；

13、nodebestpractices：NodeJs最佳实践指南；

14、Semi Design：抖音前端开源框架；

15、micro-app：京东零售推出的一款微前端框架；

如有帮助，点赞记录一下吧！

1、 HTML5网站模板集

github.com/learning-zon

收集了150+哥HTML5的网站模版合集，目前Github标星5.5K。

2、 实用JavaScript代码片段集

github.com/30-seconds/3

在线地址：30secondsofcode.org/

收集精选实用 JavaScript 代码片段的项目，每个代码片段都可以在 30 秒或更短的时间内理解。

这个集合覆盖了 JavaScript 中许多常见任务的简短、易懂的解决方案，为开发者提供了快速参考和学习的资源。

目前Github标星124K，足以可见热度还是蛮高的。

项目热度图：

该项目讲的是满足你所有开发需求的简短代码段，里面都是些经常会用到而且是非常经典的代码，非常值得学习！
比如 JavaScript 模块就分为了 All、Array、Browser、Date、Function、Math、Node、Object、String 方便学习的。

3、deno

github.com/denoland/den

一个安全的 JavaScript 和 TypeScript 运行时。

Deno 是一个开源的 JavaScript、TypeScript 和 WebAssembly 运行时，具有安全的默认设置和出色的开发者体验。

Deno 标准库现已稳定，并且已经包含在了 Deno 2 中。它包括数十个已经经过审核的实用模块，涵盖数据操作、Web 相关逻辑、JavaScript 特有的功能等。

开发人员可以在 Deno 的 JavaScript 注册表（JSR）中查看标准库的完整模块列表。该注册表是一个开源的 JavaScript 注册表，支持 ESM（JavaScript 本机模块），并且接受 TypeScript 包。

4、33-js-concepts

github.com/stephentian/

顾名思义，这个存储库包含每个“优秀” Javascript 开发人员都应该了解的 33 个 Javascript 概念的列表

每个概念还有一堆学习资源可以让您进一步了解它，并且通过分享的各种文章和视频，想学好它都很难。

5、3D JavaScript 库

github.com/mrdoob/three

Three.js 是一个开源的应用级 3D JavaScript 库，可以让开发者在网页上创建 3D 体验。

Three.js 屏蔽了 WebGL的底层调用细节，让开发者能更快速的进行3D场景效果的开发。

这是目前最全面的一个3D JavaScript库，没有之一，目前Github标星106K。

应用场景：

three.js广泛应用，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。

智慧城市：

GIS+游戏引擎：

BIM+GIS：

Three.js在WebGL的API接口基础上，又进行的一层封装。Three.js以简单、直观的方式封装了3D图形编程中常用的对象，在开发中使用了很多图形引擎的高级技巧，极大地提高了性能。

另外，由于内置了很多常用对象和极易上手的工具，Three.js的功能也非常强大。最后，Three.js还是完全开源的，可以在 GitHub上找到它的源代码，并且有很多人贡献代码。

只要你有 Web3D可视化的需求 ，基本上都可以首选学习Three.js。

6、3D场景视觉

github.com/thaslle/styl

在线预览：stylized-water.vercel.app

stylized-water 为 Three.js 开发者提供了一个强大且易于上手的风格化水面解决方案。

它不仅能够显著提升 3D 场景的视觉表现力，还为我们前端工程师打开了一扇通往更广阔创意领域的大门。

动图封面

如果你正在使用 Three.js 构建 3D Web 应用，并且需要一种独特、艺术化的水面效果，那么 stylized-water 绝对值得你花时间去探索和尝试。

7、三维可视化框架

gitee.com/ice-gl/icegl-

官网地址：icegl.cn/

TvT.js 是一款为三维可视化项目快速落地的开源框架，是目前基于 Three.js 框架里面开源案例和功能最多的一个。

对于初学者，TvT.js 拥有丰富的开源示例，可帮助快速上手学习；

对于有经验的开发者，也能通过它完善的功能接口进行二次开发，满足更复杂的业务需求。

值得一提的是，官方的 Three.js 在小程序端无法直接使用，需要做额外适配，而 tvt.js 已经为小程序环境完成了这部分处理，直接引入即可使用，极大简化了在小程序中的 3D 功能开发。

8、JavaScript 题库

github.com/lydiahallie/

它包含从基础到高级的问题，并定期更新新问题。每个问题的答案都存在于每个问题下方的折叠部分中，您可以单击以展开。

目前Github标星64K。

这个代码仓库的作用是：

  • 测试你对 JavaScript 的了解程度，
  • 刷新一下你的知识，
  • 准备前端面试！

9、JS风格指南

github.com/airbnb/javas

包含一套 Javascript 编码指南和最佳实践，最初由 Airbnb 的工程团队编写，它涵盖了 Javascript 的各个方面，并针对大量主题提供了详细的建议。

它涵盖了 Javascript 的各个方面，并针对大量主题提供了详细的建议，目前Github标星147K。

它涵盖了 Javascript 的各个方面，并针对大量主题提供了详细的建议，非常值得一看！

10、流程图编辑框架

github.com/didi/LogicFl

一款由滴滴客服技术团队开源的流程图编辑框架，它提供了一系列流程图交互、编辑所必需的功能和简单灵活的节点自定义、插件等拓展机制，支持前端研发自定义开发各种逻辑编排场景。

如流程图、ER图、BPMN流程等，在工作审批配置、机器人逻辑编排、无代码平台流程配置等方面有较好的应用。

动图封面

11、Vben Admin

github.com/vbenjs/vue-v

Vben Admin是一个开箱即用、简单高效的企业级管理系统框架，它采用了最新的Vue3、Vite、TypeScript等主流技术开发，功能十分丰富。

包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。

也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。

12、JavaScript30

github.com/wesbos/JavaS

JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战，使用原生 JavaScript 在 30 天内完成 30 个项目，每天完成的 HTML, CSS 和 javascript 解决方案。

项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。

13、NodeJs最佳实践指南

github.com/goldbergyoni

这个项目最珍贵的不是教你写代码，而是培养工程化思维——知道为什么要把配置文件放在/config目录，理解为什么要把日志分割成access.log和error.log…

这些细节的堆积，才是从码农到工程师的蜕变之路。

核心价值：100+条覆盖架构设计、错误处理、性能优化、安全防护的实战守则，每一篇都是踩坑经验的结晶。

和普通教程最大的区别在于它的三重穿透力：

1、场景化代码对比：直接展示「错误写法 vs 正确写法」，比如用 cluster 模块榨干 CPU 性能；

2、原理深度解析：不仅告诉你要用 Worker Threads，还讲透事件循环阻塞的底层机制；

3、工业级解决方案：从代码规范到生产环境监控，甚至 Docker 部署都有详细指南。

14、抖音前端开源框架

github.com/DouyinFE/sem

Semi Design，是由字节跳动旗下抖音前端与 UED 团队维护的一个设计系统。

Semi Design定义了一套中后台设计与前端基础组件，帮助我们更容易地定制现代化设计系统，为设计师与开发者打造高质量产品。

Semi Design 提供了开箱即用的底层能力支持，降低前端的搭建成本，为开发者节省精力，避免重造轮子，解放我们的生产力。

功能特性

60+高质量组件
Code2Design，根据不同主题自动生成 Figma UI Kit，保持代码与设计同源
强大的 D2C （Design2Code）支持，Figma 设计稿一键转出真实代码，快速构建应用
完善的无障碍支持，为所有组件提供遵循 W3C 标准的键盘交互、焦点管理和语义化
设计系统管理工具 Semi DSM，多达2000+ Design Token，快速定制你的专属设计系统
国际化支持 20+ 语言，提供完备的多语言、多时区、RTL支持
⚙️ 稳定的质量保障，覆盖单元测试、E2E测试、视觉回归测试等多种测试手段
支持 SSR
使用 TypeScript, 良好的类型定义，基于 Foundation / Adapter 架构，源码易于阅读 / 贡献
轻松兼容 web components，提供完整适配方案，更适合用于构建 SDK、浏览器插件等需要 DOM 隔离的场景

15、micro-app

github.com/micro-zoe/mi

micro-app是京东零售推出的一款微前端框架，它基于类WebComponent进行渲染，从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。

它是目前接入微前端成本最低的框架，并且提供了JS沙箱、样式隔离、元素隔离、预加载、虚拟路由系统、插件系统、数据通信等一系列完善的功能。

micro-app与技术栈无关，对前端框架没有限制，任何框架都可以作为基座应用嵌入任何类型的子应用。

如有帮助，点赞记录一下吧！