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

Sitios multi-página

15/19
Recursos

Aportes 4

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Sitios Multi páginas

Se pueden generar sitios de multi páginas de inicio, normalmente en un proyecto el archivo principal es el index sin embargo hay proyectos donde se puede llegar a usar otro punto de entrada o un segundo sitio, que no se comporte como una página aparte principal si no como una página independiente.

Para esto debemos hacer uso de la configuración de Rollup y Vite.
Recordemos que el archivo de Config de Vite es para poder tomar el control del mismo

import { defineConfig, loadEnv } from 'vite'
import { resolve } from 'path' // Use NodeJS

export default defineConfig(({command, mode}) => {
	
	const env = loadEnv(mode, process.cwd())

	if(mode === 'development') {
			return {
                server: {
                port: env.VITE_PORT
                }
	    }
    }
  else {
			console.log("Mode production")
			return {
					build: {
						// Configuration de Rollup
						rollupOptions: {
								// Configuration rollup, not vite
								input: {
										main: resolve(__dirname, 'index.html'),
                                        hel: resolve(__dirname, 'help', 'help.html'),
									}
								}
						}
				}
			}
  })

Vite esta pensando en una tendencia que esta creciendo a día de hoy que es MicroFrameworks, es decir que todos los Frameworks se puedan integrar

Me aparecía un error al momento de ejecutar el comando “npm run build” que decía “ReferenceError: __dirname is not defined”.
Lo pude arreglar declarando la variable __dirname de esta forma.

import {resolve,dirname } from 'path';
const __dirname = resolve(dirname(''));

y con eso ya pude construir a producción.

Yo estoy creando la configuración inicial para trabajar con React + TS (tomando como base la que ya fué creada por la comunidad), pero igual alguno de estos tips les puede servir, trabajando con react solo, o incluso con vanila JS.

  • Función para crear alias
  • Crear un objeto con las configuraciones iniciales, y dependiendo del modo ir agregando diferentes propiedades, como en el código siguiente:
import * as path from 'path'
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

// Add the paths you need as alias
const paths = [
  "assets",
  "components",
  "hooks",
  "pages",
  "styles",
  "utils",
]

/**
 * Function to create the aliases
 * @returns An array with the aliases
 */
const getAliases = () => paths.map(p => ({ find: `@${p}`, replacement: path.resolve(__dirname, `src/${p}`) }))

interface config {
  resolve: object;
  plugins: any[]
  [key: string]: any;
}

/**
 * Initial configuration for Vite
 */
export default defineConfig(({ command, mode }) => {
  console.log({ command, mode })

  const config: config = {
    plugins: [react()],
    resolve: {
      alias: getAliases(),
    }
  }

  if (mode === 'development') {
    const env = loadEnv(mode, process.cwd())
    
    config.server = {
      port: env.VITE_PORT,
    }
  }

  return config
})
  • Para aquellos que el __dirname les de un error la razon se encuentra en el archivo package.json.

  • Cuando configura type: module en package.json Node tratará todos los archivos JS como módulo ES y __dirname no está disponible en el módulo ES. Necesitas escribir tu propia __dirname variable o borrar dicha propiedad de la configuracion.

En caso contrario pueden usar las soluciones de los otro compañeros.
O esta:

import { dirname } from 'path'
import { fileURLToPath } from 'url'

const _dirname = typeof __dirname !== 'undefined'
  ? __dirname
  : dirname(fileURLToPath(import.meta.url))