编程

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

836 2022-07-04 13:50:09

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 前进的一步。祝贺所有相关人员!