javascript - 建站知识

🚀2025年构建Web应用不容错过的25大开源工具🎉

大家好，我是倔强青铜三。作为一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

AI代理已成为主流，许多公司正在构建代理，无论是作为核心产品还是用于内部自动化。然而，AI模型无法访问外部应用程序。Composio填补了这一空白；它支持250多个跨领域的应用程序，如销售、CRM、编码、生产力等。

只需几行代码，您就可以将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等框架。

真正突出的是它如何简化与LLMs的合作，处理重复的设置，并提供组件，使构建交互式UI变得轻而易举。让我们看看它提供了什么以及如何开始。

它有三个部分：

AI SDK Core：一个API，用于生成文本、结构化数据和与LLMs的工具交互。
AI SDK UI：框架独立的钩子，用于快速构建聊天和生成UI。
AI SDK RSC：一个库，用于流式传输React Server Components (RSC)的生成UI。

开始使用，安装库。

npm install ai

安装您选择的模型提供商。

npm install @ai-sdk/openai

调用OpenAI API。

import { generateText } from 'ai'; import { openai } from '@ai-sdk/openai'; // 确保设置了OPENAI_API_KEY环境变量 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();

如果您正在深入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

在您的应用中添加一个copilot：

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() { // 连接到数据库（如果不存在则创建） const db = await connect('my-vectors.db'); // 创建一个表 const table = await db.createTable('embeddings', [ { vector: [1.1, 2.3, 3.2], text: 'Hello' }, { vector: [4.5, 5.2, 6.1], text: 'World' } ]); // 搜索相似的向量 const results = await table.search([1.0, 2.0, 3.0]) .limit(5) .execute(); }

是什么让它特别？它为现代AI工作流而设计：

难以置信的快速最近邻搜索
适用于任何嵌入模型
支持基于内存和磁盘的存储
非常适合语义搜索、推荐系统和AI应用

您甚至可以将其与流行的嵌入提供商一起使用：

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类似，但从一开始就内置了现代特性和安全性。

创建一个简单的服务器：

// server.ts Deno.serve((_req) => { return new Response("Welcome to Deno!"); });

运行它：

deno run --allow-net server.ts

TypeScript开箱即用，无需管理package.json，标准库全面。另外，内置的测试和格式化工具意味着更少的依赖要管理！

如果您曾经管理过单体仓库，您就知道构建时间可能……具有挑战性。Turborepo通过智能缓存和并行执行改变了这一点。

创建一个新的单体仓库：

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应用添加实时功能，您可能听说过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);// 发送给所有连接的客户端 }); });

客户端：

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的浏览器中也能工作！

将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;// 将自动通知实时客户端！ } });

Deepstream是将实时数据同步、发布/订阅消息传递和RPC调用结合在一个包中的结果。它非常适合构建像协作编辑器或多人游戏之类的东西。

基本设置：

npm install @deepstream/client

在您的应用中使用它：

import { DeepstreamClient } from '@deepstream/client'; const client = new DeepstreamClient('localhost:6020'); // 实时数据同步 const record = client.record.getRecord('scores/player1'); record.set({ points: 100 }); // 订阅更改 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之上（是的，就是那个使您的开发服务器超级快的），它的表现也证明了这一点。

开始使用非常简单：

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，您会感到宾至如归。另外，监视模式快得令人难以置信！

如果您曾经处理过不稳定的端到端测试，您会喜欢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(); }

它建立在Radix UI和Tailwind CSS之上，但酷的部分是——您拥有您添加到项目的每个组件。开始使用非常简单：

# 首先，在您的Next.js项目中运行此命令 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 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>

干净、简单，仍然100%可定制的Tailwind！

是否曾经希望您可以用TypeScript的强大功能编写CSS，而没有任何运行时开销？Vanilla Extract提供了确切的解决方案。它就像拥有并吃掉您的蛋糕：在开发期间有类型安全性，在生产中只有纯CSS。

这里有一个快速品尝：

import { style } from '@vanilla-extract/css'; export const button = style({ backgroundColor: 'blue', borderRadius: '4px', ':hover': { backgroundColor: 'darkblue' } });

最酷的部分？您的IDE为CSS属性提供自动完成，并在它们进入生产环境之前捕捉到拼写错误！

在React中开始：

npm i @ark-ui/react

import { Button } from '@ark-ui/react' function App() { return ( <Button> Click me </Button> ) }

组件默认是无头的，这意味着您获得了所有行为和可访问性，而没有预定义的样式。这对于需要完全样式控制的团队来说非常完美！

最后感谢阅读！欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

建站知识 - 独立站SEO建站专家 - 深圳网站建设技术

🚀2025年构建Web应用不容错过的25大开源工具🎉