消息

Laravel Starter Kits 现在随附 Vite+

发布
Laravel Starter Kits 现在附带 Vite+ 图片

现在每个 Laravel 入门套件都使用以下方式构建 快速+ 统一工具链于 2026 年 7 月 2 日发布测试版。Taylor Otwell 宣布了这一切换。 在 X :

所有 Laravel 入门套件现在都附带 Vite+。

这项工作落到了 laravel/maestro#60温德尔·阿德里尔 Maestro当天就将更改同步到了React、Vue、Svelte和Livewire的代码库。此次拉取请求涉及所有入门套件变体和版本。 vite-plus0.3.0

Vite+ 是一个名为 Vite+ 的单一 CLI。 vp 它封装了 Vite、Rolldown、Vitest、tsdown、Oxlint、Oxfmt 和 Vite Task,并同时管理运行时和包管理器。 入门套件 实际结果是 ESLint 和 Prettier 不再是前端设置的一部分。

四条指令变为两条

惯性套件之前是分开包装的。 lint , lint:check , format , 和 format:check 脚本。这些脚本会折叠成 vp check 它使用 Oxfmt 进行格式化,使用 Oxlint 进行代码检查,并在一次扫描中完成类型检查:

“脚本” :{
“建造” : “vp build” ,
"build:ssr" : "vp build && vp build --ssr" ,
“开发者” : “vp dev” ,
“查看” : “vp 检查” ,
检查:修复 : “vp 检查 --fix” ,
"types:check" : "tsc --noEmit"
}

composer ci:check 遵循相同的路径,运行 npm run check 它以前运行的地方 npm run lint:checknpm run format:check 背靠背。

删除旧工具链 eslint.config.js , .prettierrc , 和 .prettierignore 每个 Inertia 套件都包含大约十几个开发依赖项: eslint , typescript-eslint , prettier , prettier-plugin-tailwindcss 以及适用于 React、Vue、Svelte 和 imports 的 ESLint 插件。 globals 仅 React 工具包就减少了 129 行 ESLint 配置。

Lint 和格式化规则移至 vite.config 文件

由于独立配置文件已移除,规则现在位于…… vite.config.ts 在下面 lintfmt 键值对。警告会被视为失败,并且类型感知代码检查已启用:

进口 { defineConfig, lazyPlugins } “更快更多” ;
出口 默认 defineConfig ({
插件: 懒惰插件 (() => [
// ...
]),
lint: {
忽略模式:[
'小贩/**' ,
'bootstrap/ssr/**' ,
'resources/js/actions/**' ,
'resources/js/components/ui/*' ,
'resources/js/routes/**' ,
'resources/js/wayfinder/**' ,
],
选项: {
拒绝警告: 真的 ,
typeAware: 真的 ,
},
},
fmt: {
打印宽度: 80 ,
标签宽度: 4 ,
单引号: 真的 ,
半: 真的 ,
sortTailwindcss: {
功能:[ 'clsx' , 'cn' , 'cva' ],
入口点: 'resources/css/app.css' ,
},
},
});

每个堆栈的变化

React 工具包已迁移至 @vitejs/plugin-react v6 现在通过 React 编译器运行 @rolldown/plugin-babel 而不是插件的 babel 选项:

进口 巴别塔 '@rolldown/plugin-babel' ;
进口 react,{ reactCompilerPreset } '@vitejs/plugin-react' ;
// ...
反应 (),
巴别塔 ({
预设:[ reactCompilerPreset ()],
}),

Svelte 套件 交换 lucide-svelte 对于支持的 @lucide/svelte 软件包。Livewire 工具包的变化最小,因为它没有 TypeScript 代码需要检查:只有两个文件发生了变化,移动了…… devbuildvp 并将其插件封装起来 lazyPlugins()

尝试一下

使用入门套件生成的新应用程序会自动继承此功能。要迁移现有的 Vite 项目,VoidZero 提供了一个迁移命令:

副总裁 迁移

迁移指南指出,复杂的项目可能仍然需要人工跟进,因此在对生产代码运行此操作之前,请先阅读该指南。

完整的差异在…… laravel/maestro#60 Vite+ 文档位于[此处]。 viteplus.dev

保罗·雷德蒙德照片

Laravel News 特约撰稿人。全栈 Web 开发人员兼作家。

归档于

赞助

掌握 Laravel 标志
Laravel 代码审查

几天内即可获得 Laravel 代码审查方面的专家指导

访问 Laravel 代码审查
组合:多列上的精妙关系图

组合:多列上的精妙关系

阅读文章
MKSine:一款基于 Filament 的 CMS,支持插件、主题和模块(图片)

MKSine:一款基于 Filament 的内容管理系统,支持插件、主题和模块

阅读文章
在 Inertia.js v3.7 图片中取消飞行中表单提交

在 Inertia.js v3.7 中取消飞行中表单提交

阅读文章
Laravel Eloquent 中使用 refreshForUpdate() 实现悲观锁定 图片

Laravel Eloquent 中使用 refreshForUpdate() 实现悲观锁定

阅读文章
Laravel 异常消息中的掩码查询绑定图片

Laravel 异常消息中的查询绑定掩码

阅读文章
whereBinary():Laravel 图片中区分大小写的 MySQL 查询

whereBinary():Laravel 中区分大小写的 MySQL 查询

阅读文章