Vite 现在成为 Laravel应用默认的前端资源打包器

Laravel 团队一直在努力为 Laravel 整合 Vite。截至本周，Vite 现在是 Laravel 新项目的默认前端资源打包器，同时更新了 Breeze和Jetstream：

今天，我们兴奋地宣布，Laravel 的新项目使用 Vite 捆绑前端资产。Breeze 和 Jetstream 也更新了？

使用带有 Inertia Vue 或 React 的新型 Breeze/Vite 堆叠时，体验闪电般快速的热模块更换。⚡

— Taylor Otwell ? (@taylorotwell) June 28, 2022

Taylor Otwell 分享了在新项目中试用 Vite 的最快方法，如果你想了解 Vite

打包资源的速度：

laravel new breeze-test --git
cd breeze-test
composer require laravel/breeze
php artisan breeze:install vue
npm install
npm run dev

使用 Laravel Breeze 是开始使用 Vite 的推荐方法，因为它提供了前端和后端身份验证脚手架以及 Tailwind、Inertia 和 Vite 等工具。

运行上面的代码，Vite 开始构建开发资源并在终端前台等待更新：

vite 2.9.13
> Local: http://localhost:3000
> Network: use `--host` to expose

ready in 327ms

Laravel v9.19.0

> APP_URL: http://breeze-test.test

现在的主布局文件 app.blade.php 中有一个 @vite 指令，并且在开发期渲染有下面的 HTML 内容：

<script type="module" src="http://127.0.0.1:3000/@vite/client"></script>
<script type="module" src="http://127.0.0.1:3000/resources/js/app.js"></script>

因为你对 Vue 文件做了修改，你将会看到类似于下面的输出，说明编译已更新。

19:41:12 PM [vite] hmr update /resources/js/Pages/Auth/Login.vue
hmr update /resources/css/app.css (x4)

HMR 的输出是“热模块更换”，它在开发过程中提供近乎即时的构建时间。这些更新速度如此之快，一开始我简直不敢相信，这有助于你在进行前端更改时进入高效流程。当你工作时，你会看到浏览器自动更新，这是一种奇妙的体验！

除了 Vite 更新外，Laravel 文档还有一个前端文档页面，为你提供 Laravel 应用所有前端选项的完整概述。

让 Vite 成为默认前端编译器的是一项巨大的成就，也是推动 Laravel 前进的一步。祝贺所有相关人员！