🤯12 个必备开源工具，助您轻松搞定现代 Web 开发 🔥

2025-06-07

🤯12 个必备开源工具，助您轻松搞定现代 Web 开发 🔥

我们生活在一个激动人心的时代。网络领域正在发生许多令人瞩目的进步。

但有时，可能很难理解如何才能充分利用您的页面。

因此，我精心挑选了一个存储库列表，您现在就可以使用这些存储库，并从速度、AI 功能等方面改进您的网站。

小黄人 GIF

1. Composio 👑：AI 集成平台

如果你要用 AI 和 LLM 构建任何东西，Composio 是必然之选。LLM 受限于自身，无法访问外部平台，而 Composio 则允许你的 AI 应用和代理访问超过 250 个应用程序，例如 GitHub、Linear、Jira、Gmail 等。

使用它非常容易。

npm install composio-core openai
Enter fullscreen mode Exit fullscreen mode

连接你的 GitHub 帐户

import { Composio } from "composio-core";

const client = new Composio({ apiKey: "<your-api-key>" });

const entity = await client.getEntity("Jessica");
const connection = await entity.initiateConnection({appName: 'github'});

console.log(`Open this URL to authenticate: ${connection.redirectUrl}`);
Enter fullscreen mode Exit fullscreen mode

初始化 Composio 和 OpenAI

import { OpenAI } from "openai";
import { OpenAIToolSet } from "composio-core";

const openai_client = new OpenAI();
const composio_toolset = new OpenAIToolSet();
Enter fullscreen mode Exit fullscreen mode

获取 GitHub 操作并将其传递给 LLM

const tools = await composio_toolset.getTools({
actions: ["github_star_a_repository_for_the_authenticated_user"]
});

const instruction = "Star the repo composiohq/composio on GitHub";

const response = await openai_client.chat.completions.create({
model: "gpt-4o",
messages: [{ role: "user", content: instruction }],
tools: tools,
tool_choice: "auto",
});
Enter fullscreen mode Exit fullscreen mode

执行工具调用。

const result = await composio_toolset.handleToolCall(response);
console.log(result);
Enter fullscreen mode Exit fullscreen mode

该 文档 提供了有关 Composio、其工作以及制作可用于生产的代理的重要概念的更多信息。

作曲 GIF

为 Composio 代码库加星标 ⭐

2. Podman：无守护进程容器引擎

如果您厌倦了 Docker 对中央守护进程的依赖，并且想要一种更安全、无根的方法，Podman 是一个很好的替代方案，它提供相同的容器功能，而无需持续运行服务的开销。

Podman 提供类似 Docker 的命令，无需守护进程，从而增强了安全性和灵活性。它支持无根容器，非常适合多用户或生产环境。

# Installation (macOS)
brew install podman
Enter fullscreen mode Exit fullscreen mode 
# Usage Example
podman run -dt -p 8080:80 nginx
podman ps
podman build -t myapp .
Enter fullscreen mode Exit fullscreen mode

无缝切换 Docker 命令，同时享受更安全的容器化方法。

Podman

为 Podman 存储库加注星标 ⭐

3. Turborepo：JS/TS 代码库的高性能构建系统

也许是您的 monorepo 的最佳库。

它为 Mono 仓库带来了智能缓存和并行执行功能，大幅缩短了构建时间。它支持大型团队在一个仓库中处理多个软件包，从而确保更顺畅的 CI/CD 流程。它也来自 Vercel。

# Installation
npm install turbo --save-dev
Enter fullscreen mode Exit fullscreen mode

一个小的使用示例。

// Usage Example (turbo.json)
{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "test": {
      "dependsOn": ["build"],
      "inputs": ["src/**/*.tsx", "test/**/*.tsx"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

实现更快的增量构建和更清晰的 Mono 仓库管理。

特博雷波

为 Turborepo 仓库加星标 ⭐

4. Vite：下一代前端工具

Vite 提供由原生 ES 模块驱动的近乎即时的开发服务器，优化您的打包流程。它非常适合需要快速反馈循环的 React、Vue 和 Svelte 项目。

# Installation
npm create vite@latest my-app
Enter fullscreen mode Exit fullscreen mode

使用示例（vite.config.js）

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        }
      }
    }
  }
})
Enter fullscreen mode Exit fullscreen mode

通过即时 HMR 和轻松配置享受流畅的开发体验。

维特

为 Turborepo 仓库加星标 ⭐

5. Vitest：下一代测试框架

Vitest 使用 Vite 的超高速开发服务器运行测试，并保留与 Jest 兼容的 API。它能够提供近乎即时的测试结果，非常适合 TDD 或快速迭代开发周期。

# Installation
npm install -D vitest
Enter fullscreen mode Exit fullscreen mode 
// Usage Example
import { test, expect } from 'vitest';

test('adds 1 + 2 = 3', () => {
  expect(1 + 2).toBe(3);
});

test('fetch data', async () => {
  const data = await fetchData();
  expect(data).toBeDefined();
});
Enter fullscreen mode Exit fullscreen mode

通过从 Jest 进行最少的迁移工作来加速您的测试流程。

维特斯

为 Vitest 仓库加星标⭐

6. Playwright：Web 应用的现代 E2E 测试

Playwright 支持 Chromium、Firefox 和 WebKit 的自动化测试，并具备强大的调试功能。它会自动等待元素，从而减少不稳定因素并节省时间。

# Installation
npm init playwright@latest
Enter fullscreen mode Exit fullscreen mode 
// Usage Example
import { test, expect } from '@playwright/test';

test('homepage test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page.getByRole('heading')).toHaveText('Installation');
});
Enter fullscreen mode Exit fullscreen mode

可视化和跟踪调试使得发现和修复测​​试问题变得更容易。

剧作家

为剧作家存储库加星标⭐

7. Val Town：社交 JavaScript/TypeScript 运行时

Val Town 将无服务器功能与社交组件相结合，让您可以即时共享、运行和探索 JS/TS 代码片段。探索其他人的构建，并直接在云环境中进行协作。

// Usage Example (@username.myFunction)
export async function myFunction() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}
Enter fullscreen mode Exit fullscreen mode

快速形成原型想法并实时向开发者社区学习。

瓦尔镇

8. Bun：一体化 JavaScript 运行时和工具包

Bun 旨在用一个快速运行时和集成测试运行器取代 Node.js、npm 和 Jest。它基于 JavaScriptCore 构建，提供极快的启动时间和令人印象深刻的性能基准。

# Installation
curl -fsSL https://bun.sh/install | bash
Enter fullscreen mode Exit fullscreen mode 
// Usage Example (server.ts)
const server = Bun.serve({
  port: 3000,
  async fetch() {
    return new Response("Welcome to Bun!");
  },
});

console.log(`Server running on port ${server.port}`);
Enter fullscreen mode Exit fullscreen mode

将顶级速度与更简单的工具相结合，以获得更高效的开发体验。

为 Bun 仓库加星标 ⭐

9. Grafbase：Edge GraphQL 平台

Grafbase 将您的 GraphQL API 部署在网络边缘，从而最大限度地降低延迟。它将架构管理、版本控制和身份验证功能整合到一个易于使用的解决方案中。

# Installation
npm install -g grafbase
Enter fullscreen mode Exit fullscreen mode 
# Usage Example
type Post @model {
  id: ID!
  title: String!
  content: String
  author: User! @relationship(type: "AUTHORED_BY")
}

type User @model {
  id: ID!
  name: String!
  posts: [Post]! @relationship(type: "AUTHORED_BY")
}
Enter fullscreen mode Exit fullscreen mode

以最小的设置开销提供全球快速的 GraphQL 端点。

GrafBase

为 Grafbase 存储库加星标⭐

10. Hono：超快的边缘网络框架

Hono 可在 Cloudflare Workers 和 Deno Deploy 等平台上无缝运行，为边缘应用程序提供闪电般的响应速度。其轻量级且强大的设计非常适合对延迟要求严格的场景。

# Installation
npm install hono
Enter fullscreen mode Exit fullscreen mode 
// Usage Example
import { Hono } from 'hono';

const app = new Hono();

app.get('/', (c) => c.text('Hello Hono!'));
app.post('/api/posts', async (c) => {
  const data = await c.req.json();
  return c.json({ success: true, data });
});

export default app;
Enter fullscreen mode Exit fullscreen mode

通过最少的设置和强大的类型安全性快速构建强大的边缘应用程序。

霍诺

为 Hono 仓库加星标 ⭐

11. Shadcn/ui：使用 Radix UI 和 Tailwind 构建的可重用组件

shadcn/ui 利用 Radix UI 基元和 Tailwind CSS 提供易于访问且可自定义的组件。无需使用包，您只需复制组件代码即可保持完全控制。

# Installation
npx shadcn-ui@latest init
Enter fullscreen mode Exit fullscreen mode 
// Usage Example
import { Button } from "@/components/ui/button";

export default function Home() {
  return <Button variant="outline">Click me</Button>;
}
Enter fullscreen mode Exit fullscreen mode

使用可访问的组件构建一致的 UI，您可以根据自己的需要进行调整。

沙德恩

为 Shadcn/ui 仓库加星标⭐

12. Remix：全栈 Web 框架

Remix 注重服务器端渲染和渐进式增强，提供嵌套路由和开箱即用的数据加载功能。它是构建性能强劲的现代化交互式网站的理想之选。

# Installation
npx create-remix@latest
Enter fullscreen mode Exit fullscreen mode 
// Usage Example
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

export async function loader() {
  return json({ posts: await getPosts() });
}

export default function Posts() {
  const { posts } = useLoaderData();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
Enter fullscreen mode Exit fullscreen mode

获得清晰的路由和数据加载模式，以实现更简单、功能齐全的应用程序结构。

为 Remix 仓库加星标 ⭐

谢谢阅读。

文章来源：https://dev.to/composiodev/12-must-know-open-source-tools-to-ace-modern-web-development-cif
Devto 翻译
PREV
快速聊天：使用 Botter 构建聊天机器人 🤓 理论🔥实践🏁 结论祝您编码愉快，记住 - 唯一的限制就是您的想象力！🌈
NEXT
关注你的情绪健康——开发者指南