发布于 2026-01-05 5 阅读
0

7 个你应该了解的开源项目 - JavaScript 版 ✔️ melonJS 2 Egg.js 点击此处提交你的 API 构建前提条件 使用方法 赞助商 NSFW 赞助商 关于 .ru、.su、.by 域名使用此软件的重要通知 Video.js - Web 视频播放器和框架

7 个你应该了解的开源项目 - JavaScript 版 ✔️

melonJS 2

Egg.js

apivault 暗黑 APIVault

点击此处提交您的 API

先决条件

如何使用

赞助商

NSFW赞助商

关于使用此软件的重要提示.ru.su.by

Video.js - Web 视频播放器和框架

概述

大家好👋🏼
在这篇文章中,我将介绍七个用 JavaScript 编写的开源项目,这些项目都非常有趣,引起了我的注意,我想和大家分享。
让我们开始吧🤙🏼


1. Appwrite

Appwrite 是一个端到端的后端服务器,适用于 Web、移动、原生或后端应用程序。
您可以轻松地将应用程序与用户身份验证、用于存储和查询用户及团队数据的数据库、存储和文件管理、图像处理、云函数以及更多服务集成。

GitHub 标志 appwrite / appwrite

像数百人团队一样建设_

我们刚刚宣布 Appwrite 数据库支持自动递增 -了解更多

开始使用 Appwrite


Appwrite 横幅,带有徽标和文字,内容如下

Appwrite 是一个一体化的开发平台,支持 Web、移动和 Flutter 应用开发。它集成了后端基础设施和 Web 托管功能,所有操作均可在同一平台完成。Appwrite 由开源社区构建,并针对您喜爱的编程语言进行了优化,旨在提升开发者体验。

我们正在招聘标签 Hacktoberfest 标签 Discord 标签 构建状态标签 X 账户标签

英语 |简体中文

Appwrite 是一个端到端的平台,用于构建 Web、移动、原生或后端应用程序,并以 Docker 微服务集的形式打包。它包含后端服务器和完全集成的托管解决方案,用于部署静态和服务器端渲染的前端。Appwrite 抽象了从零开始构建现代应用程序所需的复杂性和重复性工作,让您能够更快地构建安全、全栈的应用程序。

使用 Appwrite,您可以轻松地将应用程序与用户身份验证和多种登录方式、用于存储和查询用户及团队数据的数据库、存储和文件管理、图像等功能集成在一起。

2. melonJS

melonJS 是一款 HTML5 游戏引擎,旨在帮助开发者和设计师专注于内容创作。
该框架提供了一套全面的组件,并支持多种第三方工具。它是Phaser
等其他 JavaScript 游戏引擎的替代方案。🤞

GitHub 标志 melonjs / melonJS

一款全新、现代且轻量级的 HTML5 游戏引擎

melonJS 2

melonJS 标志

构建尺寸 摇树 NPM 包 jsDeliver 首领赏金徽章 贡献者契约

一款全新、现代且轻量级的 HTML5 游戏引擎

melonJS

melonJS 2 是 melonJS 游戏引擎的现代版本,该引擎最初于 2011 年发布。它完全使用 ES6 类、继承和语义化进行了重建,并使用esbuild打包,以实现极快的构建性能,并提供 tree-shaking 等现代功能。

注意:将现有项目迁移到 melonJS 2(版本 10.0 及更高版本)肯定会破坏您的游戏(ES6 语义和继承、Node.js 事件发射器,以及与已弃用的旧版 API 不兼容),建议您先阅读这篇关于升级到 melonJS 2 的简要分步指南。如果您使用的是 melonJS 的旧版本(9.x 及更低版本),可以旧版分支找到它。

melonJS是开源的,采用MIT 许可证,并由一个小型爱好者团队积极开发和维护……

3. GDevelop

GDevelop是另一款免费开源的游戏引擎,可在PC或手机等任何平台上运行。
这款游戏引擎的独特之处在于,它无需编写代码即可创建视频游戏,因为它使用基于条件动作的逻辑系统。

GitHub 标志 4ian / GDevelop

🎮 开源、跨平台的 2D/3D/多人游戏引擎,专为所有人设计。

GDevelop 标志

GDevelop 是一款功能齐全、无需编写代码的开源游戏开发软件。您可以利用它构建适用于移动设备(iOS、Android)、桌面设备和网页的2D、3D 和多人游戏。GDevelop 快速易用:游戏逻辑基于直观强大的事件驱动系统和可重用的行为构建而成。

在编辑游戏关卡时使用 GDevelop 编辑器

入门

❔ 我想…… 🚀 该怎么办
🎮 使用 GDevelop 制作游戏 请前往GDevelop 主页下载该应用!
⚙️ 创建/改进扩展程序 了解如何使用无代码或代码创建扩展程序。
🧑‍💻 为编辑器或游戏引擎做贡献 请按照此README文件操作。
👾 创建或出售游戏模板 在资源商店提交免费示例或付费模板
🎨 分享或出售资产包 在资源商店提交免费或付费资源包
🌐 帮助翻译 GDevelop 前往Crowdin 上的 GDevelop 项目或进行翻译

4. Egg.js

Egg.js 是一个简单的库,它可以通过观察用户的键盘输入,轻松地在网页中添加彩蛋。
它使用起来很简单,而且非常有趣🤣

GitHub 标志 mikeflynn / egg.js

一个简单的 JavaScript 库,用于在网页中添加彩蛋。

Egg.js

Egg.js

Egg.js 是一个简单的 JS 库,没有任何先决条件,它允许你通过监视用户的按键操作轻松添加网页彩蛋。

例子

使用起来非常简单。只需在页面中包含 egg.js 文件即可……

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/egg.js/1.0/egg.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

(感谢 Cloudflare 提供库托管服务!)

然后使用该addCode()函数添加你的彩蛋。你需要传递以下参数:触发彩蛋回调的字符序列(可以是纯英文或 JavaScript 键码)、触发事件发生的函数,以及一组可选的元数据。元数据可以是字符串或对象等任何类型。

var egg = new Egg();
egg
  .addCode("up,up,down,down,left,right,left,right,b,a", function() {
    jQuery('#egggif').fadeIn(500, function()
Enter fullscreen mode Exit fullscreen mode

5. API Vault

API Vault 是一个用 JavaScript 编写的精美项目:它是一个在线平台,充当通往公共 API 世界的门户。
您还可以按类别筛选 API,找到最适合您的 API 🖐

GitHub 标志 exa-studio / ApiVault

通往公共 API 世界的门户。

apivault 暗黑 APIVault

截屏

Apivault——通往公共 API 世界的门户。| Product Hunt


前提条件使用方法鸣谢贡献支持许可

Nuxt.js Vue.js Django


先决条件

在开始使用该软件之前,请确保已安装Docker

如何使用

克隆存储库

git clone https://github.com/exifly/ApiVault
Enter fullscreen mode Exit fullscreen mode

设置 .env 文件

在根仓库文件夹中重命名 .env.dev 文件

cat .env.dev > .env
Enter fullscreen mode Exit fullscreen mode

在 /frontend 文件夹内重命名 .env.sample 文件

cd frontend
cat .env.dev > .env
Enter fullscreen mode Exit fullscreen mode

在 /backend 文件夹中执行相同的操作

cd backend
cat .env.dev > .env
Enter fullscreen mode Exit fullscreen mode

客户端/服务器端使用 Docker

# Go into the root folder
cd ApiVault

# Run docker
docker-compose up
Enter fullscreen mode Exit fullscreen mode

重要提示:

首次启动 docker-compose 时,您的终端可能会显示以下信息:

database_dev  | 2023-05-26 13:38:01.598 UTC [83] ERROR:  relation "vault_api" does not exist at character 232
database_dev  | 2023-05-26 13:38:01.598 UTC [83] STATEMENT:  SELECT "vault_api"."id", "vault_api"."name", "
Enter fullscreen mode Exit fullscreen mode

6. sweetalert2

sweetalert2 是一款美观、响应式、可定制且易于使用的 JavaScript 弹出框替代方案,无需任何外部依赖。
它主要面向 JavaScript 项目,但也可以与三大前端框架 Angular、React 和 Vue 集成。

7. Video.js

Video.js 是一款网页视频播放器,支持 HTML 视频和媒体源扩展 (MSE),以及 YouTube 和 Vimeo 等其他播放技术。它支持在桌面和移动设备上播放视频。
与 sweetalert2 一样,您可以将此库与 Angular、React 和 Vue 这三个 JavaScript 框架集成。

GitHub 标志 videojs / video.js

Video.js - 开源 HTML5 视频播放器

Video.js 标志

Video.js - Web 视频播放器和框架

NPM

更新: Video.js 10 版本将于 2026 年初迎来重大变革!请阅读相关讨论。

Video.js 是一个功能齐全的开源视频播放器,适用于所有基于 Web 的平台。

Video.js 开箱即用,支持所有常见的网络媒体格式,包括 HLS 和 DASH 等流媒体格式。它可在台式机、移动设备、平板电脑和基于 Web 的智能电视上运行。此外,它还拥有强大的插件生态系统,可进一步扩展和定制其功能。

Video.js 于 2010 年 5 月启动,此后:

  • 多年来,数百万个网站都使用过 VideoJS(来源:Builtwith)。
  • 每月仅通过 CDN 托管的副本就有数十亿最终用户访问(数据来源:Fastly 统计)
  • video.js 核心由 900 多位杰出的贡献者共同开发。
  • 数百个插件

目录

感谢Fastly的各位大神,他们提供了免费的、托管在 CDN 上的版本……


结论

这份清单列出了七个值得关注的开源项目,无论是使用它们还是贡献代码🖖
祝您编程愉快!✨


嗨👋🏻
我叫Domenico,是一名热爱开源软件的软件开发者,我写文章是为了分享我的知识和经验。
别忘了访问我的Linktree,了解我的项目哦🫰🏻

Linktree:https://linktr.ee/domenicotenace

关注我的 dev.to 账号,阅读更多文章👇🏻

如果你喜欢我的内容或者想在 GitHub 上支持我的工作,可以给我一些小额捐赠。
我会非常感激🥹

请我喝杯咖啡

文章来源:https://dev.to/this-is-learning/7-open-source-projects-you-should-know-javascript-edition-150