No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Vite.js

Curso de Vite.js

Diana Mart铆nez

Diana Mart铆nez

Vite Config

13/19
Recursos

Con el archivo vite.config.js podremos tomar el control de todo lo que hace Vite y poder reescribir sus configuraciones por defecto, desde cambiar la carpeta, ra铆z del proyecto, configuraciones al servidor, uso de plugins, opciones para el build, entre muchas m谩s.

Configurando Vite

Para empezar a configurar el comportamiento de Vite tendr铆amos que crear en la ra铆z del proyecto un archivo con el nombre de vite.config.js. Te recomiendo visitar la documentaci贸n oficial de Vite en la parte de config para ver todas las configuraciones disponibles. Este es el enlace.

1 m茅todo de configuraci贸n

Existen varias formas de configurar Vite, la m谩s sencilla es exportando un JSON. En este caso podr铆amos configurar las opciones del servidor, empezando por cambiar el puerto donde se ejecuta nuestro proyecto. Como puedes ver mi proyecto est谩 corriendo en el puerto 5173.

vite-default-localhost.png

Ahora abrimos las opciones de server y dentro de este escribimos la opci贸n port, en esta opci贸n podr谩s definir un nuevo puerto como el 8080.

export default { server: { port: 8080, }, };

Como podr谩s ver estamos retornando un JSON y ahora nuestro proyecto corre en un puerto diferente.

vite-newlocalhost.png

2 m茅todo de configuraci贸n

En algunas ocasiones puede que necesites hacer algo mas complejo, por ejemplo usar TS, para esto Vite nos ofrece otro m茅todo de configuraci贸n, uno donde el c贸digo en TS es autocompletado.

Este m茅todo es empleando defineConfig, una funci贸n importada desde Vite. Solo debes de exportar la funci贸n y dentro de esta tu configuraci贸n en un formato JSON.

``` import { defineConfig } from "vite";

export default defineConfig({ server: { port: 8080, }, }); ```

Como podr谩s ver, con este m茅todo nuestra configuraci贸n tambi茅n es v谩lida. Pero tambi茅n a cambio de pasar el JSON, podemos pasar una funci贸n con variables, funciones y otra l贸gica bastante 煤til.

``` import { defineConfig } from "vite";

export default defineConfig(() => { const port = 8080;

return { server: { port }, }; }); ```

En el ejemplo anterior estamos pasando un arrow function y dentro de esta retornamos nuestra configuraci贸n, pero si observamos no estamos definiendo el puerto directamente en el JSON, sino que lo estamos definiendo en una variable.

Contribuci贸n creada por: Jofay Zhan Segura

Aportes 6

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

La funcion defineConfig recibe unos parametros para saber en que entorno de trabajo estamos. Yo lo uso para compilar diferentes estrategias. Abajo dejo un ejemplo:

import { defineConfig, splitVendorChunkPlugin } from 'vite'
import react from '@vitejs/plugin-react'
const path = require('path')

function getAliases() {
  return {
    '@api': path.resolve(__dirname, './src/main/services/api'),
    '@assets': path.resolve(__dirname, './src/library/assets'),
    '@components': path.resolve(__dirname, './src/library/components'),
    '@pages': path.resolve(__dirname, './src/pages'),
    '@services': path.resolve(__dirname, './src/main/services'),
  }
}

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  if (command === 'serve' && mode === 'development') {
    return {
      // dev specific config
      plugins: [react()],
      resolve: {
        alias: getAliases(),
      },
    }
  } else {
    // command === 'build' && mode === 'production'
    return {
      // build specific config
      plugins: [react(), splitVendorChunkPlugin()],
      build: {
        outDir: 'build',
        chunkSizeWarningLimit: 1000,
        minify: 'esbuild',
      },
      resolve: {
        alias: getAliases(),
      },
    }
  }
})

Resumen de la clase:
Vite viene configurado para que no tengas que hacerlo tu pero puedes configurar de forma manual.
Podemos configurar:

  • La carpeta ra铆z del proyecto.
  • La url base
  • El modo ( desarrollo o producci贸n)
  • Uso de pluggins.
  • El servidor en modo desarrollo
  • El build

Una forma de trabajar:

/** @type {import('vite').UserConfig} */
export default {
    server:{
        port: 3000
    }
}

Otra forma de trabajo:

import { defineConfig } from 'vite'
/** @type {import('vite').UserConfig} */
export default defineConfig({
    server:{
        port: 3000
    }
})

Una tercera forma de trabajo:

import { defineConfig } from 'vite'
/** @type {import('vite').UserConfig} */
export default defineConfig(()=>{
    const port = 3000;

    return {
        server:{
            port
        }
    }
})

Muchas gracias profe Diana! Con esta clase pude configurar mi Laravel + Vite para poder generar un entorno de desarrollo usando una conexi贸n segura SSL, para poder habilitar la opci贸n de navigator.clipboard (que se ejecuta en modo seguro). Comparto mi configuraci贸n de Laravel + Vite a continuaci贸n.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

import fs from 'fs'; 
const host = 'appweb.test'; // Local development host

export default defineConfig({

    server: { 
        host, 
        hmr: { host },
        https: { 
            key: fs.readFileSync(`C:/laragon/etc/ssl/laragon.key`), // [!tl add]
            cert: fs.readFileSync(`C:/laragon/etc/ssl/laragon.crt`), // [!tl add]
        }, 
    },

    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

En caso de que quieran utilizar TS en React, no olviden descargar: @types/node con $npm i -D @types/node.

Y tambi茅n actualizar su archivo tsconfig.json con los paths que agregaron en vite.config.ts.

Deber铆a quedar algo como lo siguiente:
Ya nada m谩s agregan o eliminan las rutas que necesiten.

vite.config.ts

import * as path from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src/') },
      { find: '@assets', replacement: path.resolve(__dirname, 'src/assets') },
      { find: '@components', replacement: path.resolve(__dirname, 'src/components') },
      { find: '@hooks', replacement: path.resolve(__dirname, 'src/hooks') },
      { find: '@pages', replacement: path.resolve(__dirname, 'src/pages') },
      { find: '@styles', replacement: path.resolve(__dirname, 'src/styles') },
      { find: '@utils', replacement: path.resolve(__dirname, 'src/utils') },
    ],
  },
})

tsconfig.json

{
  "compilerOptions": {
    // "baseUrl": "src",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "types": [
      "node"
    ],
    "paths": {
      "@*": [
        "./src/*"
      ],
      "assets/*": [
        "./src/assets/*"
      ],
      "components/*": [
        "./src/components/*"
      ],
      "hooks/*": [
        "./src/hooks/*"
      ],
      "pages/*": [
        "./src/pages/*"
      ],
      "styles/*": [
        "./src/styles/*"
      ],
      "utils/*": [
        "./src/utils/*"
      ]
    }
  },
  "include": [
    "src"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ],
}

Estoy muy contento con la evoluci贸n de Diana como profesora 鈥 sin decir que los cursos anteriores fueran malos, de hecho son muy buenos, pero ahora la veo desenvolvi茅ndose mucho mejor. Ahora con respecto a este curso en espec铆fico 鈥 personalemente Vite es lo mejor que he usado, sobre todo a la hora de trabajar con Vue, es r谩pido, sencillo y tiene un ecosistema cada vez m谩s completo, vitest por ejemplo

Para los que quieran ver r谩pido la info:

Configurando Vite

Al ejecutar vite desde la l铆nea de comandos, Vite intentar谩 autom谩ticamente resolver un archivo de configuraci贸n llamado vite.config.js dentro de la ra铆z del proyecto (tambi茅n se admiten otras extensiones de JS y TS).

El archivo de configuraci贸n m谩s b谩sico se ve as铆:

// vite.config.js
export default {
  // opciones de configuraci贸n
}

Ten en cuenta que Vite admite el uso de la sintaxis de los m贸dulos ES en el archivo de configuraci贸n, incluso si el proyecto no utiliza ESM de nodo nativo, por ejemplo type: 鈥渕odule鈥 en el package.json. En este caso, el archivo de configuraci贸n se preprocesa autom谩ticamente antes de cargarlo.

Tambi茅n puedes especificar expl铆citamente un archivo de configuraci贸n para usar con la opci贸n CLI --config (resuelta relativa a cwd):

vite --config my-config.js

Configuraci贸n de Intellisense

Dado que Vite se distribuye con tipados de TypeScript, puedes aprovechar el intellisense de tu IDE con sugerencias de tipo jsdoc:

/** @type {import('vite').UserConfig} */
export default {
  // ...
}

Alternativamente, puedes usar el helper defineConfig que deber铆a proporcionar intellisense sin necesidad de anotaciones jsdoc:

import { defineConfig } from 'vite'

export default defineConfig({
  // ...
})

Vite tambi茅n es compatible directamente con los archivos de configuraci贸n de TypeScript. Tambi茅n puedes usar vite.config.ts con el helper defineConfig.

Configuraci贸n condicional

Si la configuraci贸n necesita determinar condicionalmente las opciones basadas en el comando (dev/serve o build), el modo que se est谩 utilizando, o si es una compilaci贸n SSR (ssrBuild), puedes exportar una funci贸n en su lugar:

export default defineConfig(({ command, mode }) => {
  if (command === 'serve') {
    return {
      // configuraci贸n de desarrollo espec铆fico
    }
  } else {
    // command === 'build'
    return {
      // configuraci贸n de compilaci贸n espec铆fico
    }
  }
})

Es importante tener en cuenta que en la API de Vite, el valor de command es serve durante el desarrollo (en el cli vite, vite dev y vite serve son alias) y build cuando se compila para producci贸n (vite build).

ssrBuild es experimental. Solo est谩 disponible durante la compilaci贸n en lugar de un indicador ssr m谩s general porque, durante el desarrollo, la configuraci贸n es compartida por el servidor 煤nico que maneja las solicitudes SSR y no SSR. El valor podr铆a ser undefined para las herramientas que no tienen comandos separados para el navegador y la compilaci贸n de SSR, as铆 que usa una comparaci贸n expl铆cita con true y false.

Configuraci贸n de funciones as铆ncronas

Si la configuraci贸n necesita llamar a funciones as铆ncronas, puedes exportar una funci贸n as铆ncrona en su lugar. Y esta funci贸n as铆ncrona puede ser pasada como defineConfig para mejorar el soporte intellisense.

export default defineConfig(async ({ command, mode }) => {
  const data = await asyncFunction()
  return {
    // configuraci贸n de vite
  }
})

Utilizando variables de entorno en Configuraci贸n

Las variables de ambiente se pueden obtener de process.env como de costumbre.

Ten en cuenta que Vite no carga archivos .env de forma predeterminada, ya que los archivos que se cargar谩n solo se pueden determinar despu茅s de evaluar la configuraci贸n de Vite, por ejemplo, las opciones root y envDir afectan el comportamiento de carga. Sin embargo, puedes usar el helper loadEnv exportado para cargar el archivo .env espec铆fico si es necesario.

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // Carga el archivo env basado en el `modo` en el directorio de trabajo actual.
  // Coloca el tercer par谩metro en '' para cargar todos los env independientemente del prefijo `VITE_`.
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // configuraci贸n de vite
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
  }
})