En la anterior publicación nos dimos a la tarea de actualizar la versión de "Vue"(de Vue 2 a Vue 3).
Puedes ver la publicación aquí: https://dev.to/krsrk/pokedex-actualizar-vue-de-la-version-2-a-la-3-58gj
Ahora, requerimos actualizar la herramienta de compilación de los recursos de "Javascript".
Desde la versión 9.19 de Laravel cambio la herramienta para compilar los recursos de Javascript, dejando "Laravel Mix" a un lado, e integrando "Vite" como la herramienta oficial para esta tarea en Laravel.
Las diferencias entre estas es que "Vite" te da un entorno de desarrollo y compilación mas rápido que "Laravel Mix" y "Webpack".
Aquí puedes obtener información sobre Vite:
https://vitejs.dev/guide/why.html
https://laravel.com/docs/9.x/vite
Configuración
Para integrar Vite a un proyecto ya existente, solamente necesitamos instalar dos paquetes; para lograr esto debemos ejecutar lo siguiente:
npm install --save-dev vite laravel-vite-plugin
También necesitaremos instalar el plugin de Vite para Vue:
npm install --save-dev @vitejs/plugin-vue
Creamos el archivo "vite.config.js":
touch vite.config.js && nano vite.config.js
Lo editamos con el siguiente contenido:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
vue()
],
});
Actualizamos el archivo "package.json" en su sección de "scripts" con lo siguiente:
"scripts": {
"dev": "vite",
"build": "vite build"
},
Configuración en código
Otro requerimiento para que funcione correctamente "Vite", es quitar en el proyecto los "require y sustituirlos por "import". Además los archivos de los componentes en los "import" deben terminar con ".vue", Ejemplos:
//bootstrap.js
import axios from 'axios';
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
//app.js
import './bootstrap';
import PokedexNav from "./components/PokedexNav.vue";
import PokedexContent from "./components/PokedexContent.vue";
import PokedexFooter from "./components/PokedexFooter.vue";
Ahora, reemplazaremos "mix()" o "asset()" por "@vite" en el "layout.blade":
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pokedex</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
Eliminamos Laravel Mix y su configuración:
npm remove laravel-mix && rm webpack.mix.js
Configuramos Tailwind:
npx tailwindcss init -p
Configurar Sail
Para que Vite se ejecute en el contenedor de Sail, necesitamos realizar unas configuraciones para que funcione la integración.
Nos aseguramos que en el archivo "docker-compose.yml" tenga esta línea en el servicio "laravel.test":
- '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
Abrimos el "vite.config.js" y agregamos lo siguiente en la sección de "defineConfig":
server: {
host: '0.0.0.0',
hmr: {
host: 'localhost',
},
},
Vite por default tiene configurado un host, y asignándole dicha configuración va a convivir con el contenedor de Sail.
Nota: La configuración "hmr" sirve para cuando se usa WSL2 en Windows.
Borramos caché y ejecutamos Vite:
sailartisan optimize:clear && sail npm run dev
Y Voila!, ya tenemos corriendo el Pokedex con Vite y nuestros recursos de Javascript se compilan casi al instante.
Otra de las ventaja de tener Vite en nuestro proyecto, es que el "hot reload" lo hace casi instantáneo en cuanto guardas los cambios de algún archivo.
Si quieres ver la diferencia de archivos para esta configuración lo puedes consultar aquí:
Top comments (0)