wayfinder： zeros摩擦连接Laravel后端与TypeScript前端

wayfinder： zeros摩擦连接Laravel后端与TypeScript前端

wayfinder 项目地址: https://gitcode.com/gh_mirrors/wayfin/wayfinder

项目介绍

在现代Web开发中，后端与前端的有效连接至关重要。Laravel Wayfinder 是一个创新的解决方案，旨在无缝连接Laravel后端与TypeScript前端。它自动生成完全类型的、可导入的TypeScript函数，这些函数对应于您的控制器和路由，让您能够像调用任何其他函数一样直接在客户端代码中调用Laravel端点。告别手动同步后端更改、硬编码URL或猜测路由参数的时代。

项目技术分析

Wayfinder 采用了先进的代码生成技术，能够从Laravel的路由和控制器中自动生成TypeScript定义。这些定义不仅包括了URL和HTTP方法，还能根据路由参数生成相应的函数调用形式。这一功能的核心在于减少了前后端之间的不必要耦合，提高了开发效率和代码的可维护性。

• 自动生成TypeScript函数：Wayfinder 会为您的控制器和路由生成完全类型的TypeScript函数。
• 零摩擦集成：通过自动同步，您无需手动更新前端路由，从而实现零摩擦的集成。
• 支持复杂路由：即便是复杂的路由和参数绑定，Wayfinder 也能轻松处理。

项目技术应用场景

Wayfinder 适用于任何使用Laravel后端和TypeScript前端的项目，特别是在以下场景中尤为有用：

1. 大型SPA（单页应用）：对于需要大量后端服务的单页应用，Wayfinder 可以简化前端调用。
2. 前后端分离：在前后端分离的架构中，Wayfinder 可以作为桥梁，连接两端。
3. API驱动开发：对于API优先的开发模式，Wayfinder 可以为前端提供即时的API调用。

项目特点

1. 零摩擦集成：自动同步路由和控制器更改，无需手动更新前端。
2. 类型安全：生成的TypeScript函数是完全类型的，减少了运行时错误。
3. 灵活配置：用户可以根据需要自定义生成文件的位置和内容。
4. 支持复杂路由：即使是非常复杂的路由参数绑定，Wayfinder 也能轻松处理。
5. 与Inertia兼容：如果您使用Inertia.js，Wayfinder 可以直接与 useForm 和 Link 组件配合使用。

如何使用Wayfinder

使用Wayfinder非常简单。首先，通过Composer安装Wayfinder：

composer require laravel/wayfinder

然后，如果需要自动监视文件更改，安装 vite-plugin-run：

npm i -D vite-plugin-run

更新 vite.config.js 文件以监视路由和控制器文件：

import { run } from "vite-plugin-run";

export default defineConfig({
    plugins: [
        // ...
        run([
            {
                name: "wayfinder",
                run: ["php", "artisan", "wayfinder:generate"],
                pattern: ["routes/*.php", "app/**/Http/**/*.php"],
            },
        ]),
    ],
});

生成TypeScript定义：

php artisan wayfinder:generate

使用Wayfinder函数：

import { show } from "@actions/App/Http/Controllers/PostController";

show(1); // { url: "/posts/1", method: "get" }

此外，Wayfinder 还提供了与Inertia.js的深度集成，使得在单页应用中使用Laravel和TypeScript变得更加便捷。

总结而言，Laravel Wayfinder 是一款功能强大的工具，能够显著提高前后端开发的效率，并保证代码的质量和可维护性。如果您正在寻找一种更简单、更高效的方式来连接Laravel后端和TypeScript前端，Wayfinder 将是您的理想选择。

wayfinder 项目地址: https://gitcode.com/gh_mirrors/wayfin/wayfinder