Pokedex: Migración de Mix a Vite
Tags: laravel, vite, vue, javascript
Published: 2022-09-08 17:48:27

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í:

[https://github.com/krsrk/pokedex-laravel/pull/8](https://github.com/krsrk/pokedex-laravel/pull/8)