2024 年是疯狂的一年，人工智能和软件开发领域发生了许多事情。我相信 2025 年的情况会更加有趣。
Javascript 仍然是全球开发人员构建生产级应用程序的首选，并且在 2025 年仍将如此。
因此，我收集了 25 个在 2024 年显示出巨大潜力并且肯定会在 2025 年蓬勃发展的存储库。这些基本上就是您在 2025 年构建任何东西所需的所有工具。
我把所有这些工具分为以下类别。
AI 代理现已成为主流，许多公司都在构建代理，作为核心产品或用于内部自动化。但是，AI 模型无法访问外部应用程序。Composio 填补了这一空白；它支持销售、CRM、编码、生产力等垂直领域的 250 多个应用程序。
只需几行代码，您就可以将您的 AI 代理连接到多个 SaaS 应用程序，如 GitHub、Jira、Salesforce、Gmail 等，而无需亲自处理用户身份验证流程。
它对 Javascript/Typescript 和 Python 有一流的支持。
开始使用它非常容易。
npm install composio-core openai
连接你的 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}`);
初始化 Composio 和 OpenAI
import { OpenAI } from "openai";
import { OpenAIToolSet } from "composio-core";
const openai_client = new OpenAI();
const composio_toolset = new OpenAIToolSet();
获取 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",
});
执行工具调用。
const result = await composio_toolset.handleToolCall(response);
console.log(result);
为 Composio 存储库加星标 ⭐
如果我今天要构建一个由 AI 驱动的 Web 应用，Vercel AI SDK 将是我的首选。它旨在让开发人员的工作更轻松，支持 React、Next.js、Vue 和 SvelteKit 等框架。
真正突出的是它如何简化使用 LLM、处理重复设置以及提供使构建交互式 UI 变得轻而易举的组件。让我们看看它提供了什么以及如何开始。
它有三个部分，
首先，安装该库。
npm install ai
安装您选择的模型提供程序。
npm install @ai-sdk/openai
调用 OpenAI API。
import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai'; // Ensure OPENAI_API_KEY environment variable is set
async function main() {
const { text } = await generateText({
model: openai('gpt-4-turbo'),
system: 'You are a friendly assistant!',
prompt: 'Why is the sky blue?',
});
console.log(text);
}
main();
有关 Vercel AI SDK 的更多信息，请访问其 文档。
如果您正在研究 AI 代理，LangGraph JS 将会改变游戏规则。它允许您使用基于图形的方法构建复杂的 AI 工作流 - 想象一下 AI 代理的状态机。
入门非常简单：
npm install langgraph
创建你的第一个代理：
import { Graph } from 'langgraph';
import { OpenAI } from 'langchain';
const model = new OpenAI({});
const graph = new Graph({
nodes: {
analyze: async ({ input }) => {
return model.predict(`Analyze this: ${input}`);
},
respond: async ({ input }) => {
return model.predict(`Generate response for: ${input}`);
}
},
edges: {
analyze: ['respond'],
respond: ['analyze']
}
});
const result = await graph.invoke("What's the weather like?");
其妙处在于它处理复杂工作流程的方式——每个节点都可以是 LLM 调用、工具或任何自定义逻辑。这使得它非常适合构建客户服务机器人、研究助理或任何多步骤 AI 工作流程！
如果您想在应用中添加类似 GitHub Copilot 的功能，CopilotKit 可让您轻松实现这一目标。这就像为您的用户配备一名 AI 配对程序员。
安装：
npm install @copilotkit/react-core @copilotkit/react-ui
向您的应用程序添加副驾驶：
import { CopilotKit, useCopilotChat } from '@copilotkit/react-ui';
function App() {
const { messages, sendMessage } = useCopilotChat({
context: "This is a code editor for JavaScript",
});
return (
<CopilotKit>
<div className="editor">
<CopilotChat
messages={messages}
onSendMessage={sendMessage}
placeholder="Ask for code suggestions..."
/>
</div>
</CopilotKit>
);
}
最酷的部分是什么？它不仅适用于代码 - 您可以针对任何领域进行自定义。无论您是构建设计工具、写作助手还是数据分析平台，CopilotKit 都可以添加智能建议。
LanceDB 正在解决 AI 开发中最大的难题之一：高效存储和查询向量嵌入。它就像用于向量搜索的 SQLite，但速度极快。
开始吧：
npm install lancedb
基本用法：
import { connect } from 'lancedb';
async function main() {
// Connect to a database (creates if not exists)
const db = await connect('my-vectors.db');
// Create a table
const table = await db.createTable('embeddings', [
{ vector: [1.1, 2.3, 3.2], text: 'Hello' },
{ vector: [4.5, 5.2, 6.1], text: 'World' }
]);
// Search for similar vectors
const results = await table.search([1.0, 2.0, 3.0])
.limit(5)
.execute();
}
它有什么特别之处？它是为现代 AI 工作流程而设计的：
您甚至可以将它与流行的嵌入提供程序一起使用：
javascript
Copy
import { OpenAIEmbeddings } from 'langchain/embeddings/openai';
const embeddings = new OpenAIEmbeddings();
const vector = await embeddings.embedQuery('Hello world');
await table.add({ vector, text: 'Hello world' });
云服务非常适合构建可扩展的应用程序。然而，复杂的基础设施管理、不一致的 API 和分散的 DevOps 流程很快就会让云服务变得混乱。
Encore 通过提供集成类型安全后端框架、自动基础设施配置和 DevOps 自动化的统一开发平台简化了这种混乱。
它在 Golang 和 Typescript 中均可用。
通过安装 CLI 开始使用 Encore。
curl -L https://encore.dev/install.sh | bash
创建一个应用程序。
encore app create
这将配置您的免费帐户，允许您选择应用程序的名称并选择 Hello World 模板。
这将使用您选择的应用程序名称在新文件夹中创建一个带有简单 REST API 的示例应用程序。
在编辑器中打开该文件。
// Service hello implements a simple hello world REST API.
package hello
import (
"context"
)
// This simple REST API responds with a personalized greeting.
//
//encore:api public path=/hello/:name
func World(ctx context.Context, name string) (*Response, error) {
msg := "Hello, " + name + "!"
return &Response{Message: msg}, nil
}
type Response struct {
Message string
}
有关更多信息，请参阅其 文档。
HTMX 让 HTML 重现魅力。它让您无需编写一行 JavaScript 即可构建现代 Web 应用程序。听起来好得令人难以置信？看看这个：
将其添加到您的项目中：
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
将任何无聊的形式变成动态组件：
<button hx-post="/like"
hx-trigger="click"
hx-target="#like-count"
hx-swap="innerHTML">
Like
</button>
<span id="like-count">0</span>
就是这样！HTMX 处理 AJAX 请求、更新 DOM 并管理加载状态。如果您想要现代交互性而又不想使用复杂的 JavaScript，那么它就是您的理想选择。
Val Town 就像 GitHub Gists 与无服务器功能相结合，并带有一点社交媒体。它正在改变我们对共享和运行 JavaScript 代码的看法。
创建一个新的 Val (这就是所谓的函数)：
// @username/greet
export function greet(name) {
return `Hello, ${name}!`
}
导入并使用其他人的 Vals：
import { greet } from "@friend/greet"
export function welcome() {
return greet("Val Town")
}
最好的部分？每个 Val 都是一个 API 端点，可以像 cron 作业一样进行安排。它非常适合自动化、机器人和快速实验！
Deno 2 是 Ryan Dahl 对 JavaScript 运行时的第二次尝试（没错，就是 Node.js 的创建者）。它与 Node.js 类似，但从头开始内置了现代功能和安全性。
创建一个简单的服务器：
typescript
Copy
// server.ts
Deno.serve((_req) => {
return new Response("Welcome to Deno!");
});
运行它：
deno run --allow-net server.ts
TypeScript 开箱即用，无需管理 package.json，标准库非常全面。此外，内置的测试和格式化工具意味着需要管理的依赖项更少！
##JS Monorepos 的高性能构建系统
如果您曾经管理过 Mono 仓库，您就会知道构建时间可能非常具有挑战性。Turborepo 通过智能缓存和并行执行改变了这一现状。
创建一个新的 Mono 仓库：
npx create-turbo@latest
你的 turbo.json 可能看起来像这样：
"pipeline": {
"build": {
"dependsOn": ["^build"],
"outputs": ["dist/**"]
},
"test": {
"dependsOn": ["build"],
"inputs": ["src/**/*.tsx", "test/**/*.tsx"]
}
}
}
运行你的任务：
turbo run build test
Turborepo 会记住之前构建的内容，并且只重建已更改的内容。构建时间从咖啡休息时间缩短到眨眼间！
##用于 Web 应用的双向实时通信库
如果您曾经需要为 Web 应用添加实时功能，那么您可能听说过 Socket.io。它的独特之处在于它能够处理实时通信的所有棘手部分。
入门非常简单：
npm install socket.io
服务器设置：
const io = require('socket.io')(3000);
io.on('connection', socket => {
console.log('a user connected');
socket.on('chat message', msg => {
io.emit('chat message', msg);// Send to all connected clients
});
});
客户端：
import io from 'socket.io-client';
const socket = io('http://localhost:3000');
socket.emit('chat message', 'Hello!');
socket.on('chat message', msg => {
console.log('received:', msg);
});
最好的部分？它会自动处理重新连接，甚至可以在不支持 WebSockets 的浏览器中运行！
##现代应用程序的实时 API 框架
将 Feathers.js 视为您的全栈最佳朋友。这就像 Express.js 遇到了 Socket.io，他们决定一起构建一些很棒的东西。无论您需要 REST API、实时更新还是两者兼而有之，Feathers 都能满足您的需求。
以下是如何开始的步骤：
npm create feathers my-app
cd my-app
npm start
创建实时服务非常简单：
app.use('messages', {
async find() {
return [{ text: 'Hello world' }];
},
async create(data) {
return data;// Will automatically notify real-time clients!
}
});
Deepstream 是将实时数据同步、发布/订阅消息和 RPC 调用整合到一个包中的结果。它非常适合构建协作编辑器或多人游戏等。
基本设置：
npm install @deepstream/client
在您的应用中使用它：
import { DeepstreamClient } from '@deepstream/client';
const client = new DeepstreamClient('localhost:6020');
// Real-time data sync
const record = client.record.getRecord('scores/player1');
record.set({ points: 100 });
// Subscribe to changes
record.subscribe(data => {
console.log('Score updated:', data.points);
});
您是否曾经想过将功能部署到云中，而无需处理所有基础设施难题？这正是 Serverless Framework 的功能。它适用于 AWS、Azure、Google Cloud 等。
开始吧：
npm install -g serverless
serverless create --template aws-nodejs
您的第一个无服务器函数：
module.exports.hello = async (event) => {
return {
statusCode: 200,
body: JSON.stringify({ message: 'Hello World!' })
};
};
部署简单：
serverless deploy
虽然从技术上讲 RabbitMQ 并不是 JavaScript 工具，但它已成为许多 Node.js 应用程序的关键。它是消息队列的“瑞士军刀”，非常适合在服务之间进行可靠的消息传递。
与 Node.js 一起使用非常简单amqplib：
npm install amqplib
基本发布者：
const amqp = require('amqplib');
async function publish() {
const connection = await amqp.connect('amqp://localhost');
const channel = await connection.createChannel();
const queue = 'tasks';
await channel.assertQueue(queue);
channel.sendToQueue(queue, Buffer.from('Hello RabbitMQ!'));
}
还记得运行测试意味着要喝杯咖啡休息一下吗？Vitest 彻底改变了这一局面。它建立在 Vite 之上（是的，就是那个让您的开发服务器超快的 Vite），并且它在性能上有所体现。
入门非常简单：
npm install -D vitest
创建你的第一个测试：
// calculator.test.js
import { expect, test } from 'vitest'
import { add } from './calculator'
test('adds 1 + 2 to equal 3', () => {
expect(add(1, 2)).toBe(3)
})
最酷的部分是什么？它开箱即用地支持 TypeScript，如果你以前用过 Jest，你会感觉很熟悉。此外，监视模式速度非常快！
如果您曾经处理过不稳定的 E2E 测试，那么您一定会喜欢 Playwright。它就像拥有一位超级可靠的 QA 工程师，他永远不会感到疲倦。最棒的是？它有一个很棒的测试生成器，可以在您点击应用程序时为您编写测试。
首先安装：
npm init playwright@latest
生成您的第一个测试：
npx playwright codegen playwright.dev
或者手动写一个：
import { test, expect } from '@playwright/test';
test('basic test', async ({ page }) => {
await page.goto('https://your-app.com');
await page.getByRole('button', { name: 'Sign in' }).click();
await expect(page.getByText('Welcome')).toBeVisible();
});
还记得那些关于分号和换行符的冗长代码审查讨论吗？Prettier 结束了这一切。它就像拥有一个非常固执己见（但一致）的代码格式化程序，它可以正常工作。
设置非常简单：
npm install --save-dev prettier
添加配置文件（.prettierrc）：
{
"semi": true,
"singleQuote": true,
"tabWidth": 2
}
现在你可以使用以下方式格式化你的代码：
npx prettier --write .
专业提示：将编辑器设置为在保存时格式化，这样您就不用再考虑代码格式了！
Jest 已经存在了一段时间，这有一个很好的理由 - 它就是有效。它就像测试框架中的瑞士军刀，可以处理从单元测试到快照的一切。
开始吧：
npm install --save-dev jest
编写你的第一个测试：
describe('sum module', () => {
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
test('matches snapshot', () => {
const data = { foo: 'bar' };
expect(data).toMatchSnapshot();
});
});
需要自动化 Chrome？Puppeteer 是您的好帮手。无论是抓取网站、生成 PDF 还是测试应用程序，它都能让您完全控制 Chrome/Chromium。
快速入门：
npm install puppeteer
截屏的简单脚本：
import puppeteer from 'puppeteer';
async function screenshot() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'example.png' });
await browser.close();
}
每个工具都解决了开发过程中的特定痛点。
##具有复制粘贴功能的可访问组件库
如果您厌倦了与组件库及其样式限制作斗争，那么您会喜欢 Shadcn-UI。与传统组件库不同，它采用独特的“复制粘贴”方法，让您可以完全控制组件。
它建立在 Radix UI 和 Tailwind CSS 之上，但最酷的是 - 您拥有添加到项目中的每个组件。入门非常简单：
# First, run this in your Next.js project
npx shadcn-ui@latest init
需要按钮吗？只需运行：
npx shadcn-ui@latest add button
像这样使用它：
import { Button } from "@/components/ui/button"
export default function App() {
return (
<Button variant="outline">
Click me
</Button>
)
}
这些组件看起来很漂亮，但您可以调整它们，因为您拥有代码。不再需要与覆盖作斗争！
##适用于 Radix Primitives 的生产级主题系统
Radix Themes 吸收了 Radix Primitives 的所有优点，并将其包装在一个美观且可立即使用的主题系统中。
将它视为设计系统的最佳伙伴 - 它可以立即处理所有复杂内容，例如色阶、间距和排版。以下是入门方法：
npm install @radix-ui/themes
在您的应用中：
import '@radix-ui/themes/styles.css';
import { Theme, Button } from '@radix-ui/themes';
export default function App() {
return (
<Theme>
<Button>Let's go!</Button>
</Theme>
)
}
最好的部分？默认情况下，所有内容均可访问。生产中不再存在可访问性错误！
我们都喜欢 Tailwind CSS，但有时候，写起来class="flex items-center justify-between p-4 bg-white rounded-lg shadow"会过时。DaisyUI 为 Tailwind 添加了语义类名，使您的代码更加简洁。
安装非常简单：
npm i -D daisyui@latest
更新你的 tailwind.config.js：
module.exports = {
plugins: [require("daisyui")],
}
现在，您无需编写十几个实用程序类，只需执行以下操作即可：
<button class="btn btn-primary">Button</button>
干净，简单，并且仍然可以通过 Tailwind 100% 定制！
您是否曾希望能够使用 TypeScript 的强大功能编写 CSS，但又无需任何运行时开销？Vanilla Extract 正是提供这种功能。它就像鱼与熊掌兼得：开发期间的类型安全，生产期间的纯 CSS。
让我们简单品尝一下：
import { style } from '@vanilla-extract/css';
export const button = style({
backgroundColor: 'blue',
borderRadius: '4px',
':hover': {
backgroundColor: 'darkblue'
}
});
最酷的部分？您的 IDE 提供 CSS 属性的自动完成功能，并在投入生产之前发现拼写错误！
Ark UI 是该领域中掀起波澜的新生力量。它类似于 Radix UI，但与框架无关。使用 React、Vue 或 Solid 时，您可以获得具有一致行为的相同出色组件。
React 入门：
npm i @ark-ui/react
import { Button } from '@ark-ui/react'
function App() {
return (
<Button>
Click me
</Button>
)
}
默认情况下，组件是无头的，这意味着您可以获得所有行为和可访问性，而无需预定义样式。这对于需要完全样式控制的团队来说是完美的选择！
提示：请勿发布广告垃圾评论，否则封号处理！！