30. Laravel ahora usa Vite ¿Que ocurrió con Webpack?

Buen dia! el video: 
29. Como utilizar Bootstrap con Laravel Jetstream aparece como privado y no se puede acceder a el! :(

Si en caso suben su proyecto a producción en formato comprimido .zip, entonces asegúrense de eliminar el archivo ‘hot’ de la carpeta public, sino no les cargará los estilos del manifest.json
 

Buenas tardes. Por que cuando trato de ejecutar el comando npm run build, me dice que el termino ‘npm’ no se reconoce como nombre de un cmdlet. Alguien me puede apoyar. Gracias.

? En cada nueva instalación de Laravel viene Vite por defecto dejando de lado Laravel Mix (un envoltorio en torno a Webpack: paquete que permite modularizar css, js e imágenes).

El principal inconvenientes con Webpack es su rendimiento. Cada pequeña modificación en nuestro código requiere que webpack lea toda la cantidad de módulos completa para compilar y podamos ver la modificación que acabamos de hacer.

Vite por el contrario si hacemos una pequeña modificación en nuestro código va a compilar solo esa modificación y la agrega al código ya compilado con anterioridad. Esto reduce drásticamente el tiempo de compilación.

Para ver estos cambios creamos un nuevo proyecto con vite eligiendo livewire y sin teams:

laravel new vite --jet

Al final la instalación ejecuta automáticamente npm install y npm run dev.

Este compilador se mantiene a la escucha de los cambios en nuestro código JS y CSS, y crea los assets que vamos a incluir dentro de nuestras páginas.

En la raíz de nuestro proyecto tenemos el archivo vite.config.js donde indicamos los archivos que queremos que compile:

input: [
	'resources/css/app.css',
	'resources/js/app.js',
],

Si inspeccionamos en la ruta resources/views/layouts el archivo app.blade.php vemos dentro del head la siguiente directiva:

@vite(['resources/css/app.css', 'resources/js/app.js'])

Creamos también una base de datos llamada vite y ejecutamos las migraciones:

php artisan migrate

Para ver nuestro proyecto en 127.0.0.1:8000 ejecutamos el servidor:

php artisan serve

? Para enviar nuestro proyecto a producción debemos ejecutar

npm run build

Uno de los archivos que se generan es manifest.json

{
	"resources/js/app.js": {
		"file": "assets/app.ab93cf8a.js",
		"src": "resources/js/app.js",
		"isEntry": true
	},
	"resources/css/app.css": {
		"file": "assets/app.9fa9f508.css",
		"src": "resources/css/app.css",
		"isEntry": true
	}
}

Donde se indica, por ejemplo, que cuando se haga referencia a resources/js/app.js se llame a assets/app.ab93cf8a.js