Saltar al contenido principal

Vite

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Usar TypeORM en un proyecto Vite es bastante sencillo. Sin embargo, al utilizar migraciones, encontrarás errores del tipo "...migration name is wrong. Migration class name should have a JavaScript timestamp appended." al ejecutar la compilación de producción. En las compilaciones de producción, los archivos se optimizan por defecto, lo que incluye ofuscar tu código para minimizar los tamaños de archivo.

Tienes 3 opciones para solucionar esto. Estas opciones se muestran a continuación como diferencias respecto a este vite.config.ts básico.

import legacy from "@vitejs/plugin-legacy"
import vue from "@vitejs/plugin-vue"
import path from "path"
import { defineConfig } from "vite"

// https://vitejs.dev/config/
export default defineConfig({
    build: {
        sourcemap: true,
    },
    plugins: [vue(), legacy()],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./src"),
        },
    },
})

Opción 1: Desactivar la minificación​

Es la opción más cruda y generará archivos significativamente más grandes. Añade build.minify = false a tu configuración.

--- basic vite.config.ts
+++ disable minify vite.config.ts
@@ -7,6 +7,7 @@
 export default defineConfig({
   build: {
     sourcemap: true,
+    minify: false,
   },
   plugins: [vue(), legacy()],
   resolve: {

Opción 2: Desactivar la ofuscación de identificadores en esbuild​

Vite usa esbuild como minificador predeterminado. Puedes desactivar la ofuscación de identificadores añadiendo esbuild.minifyIdentifiers = false a tu configuración. Esto generará archivos más pequeños, pero dependiendo de tu base de código obtendrás rendimientos decrecientes al mantener todos los identificadores a su longitud completa.

--- basic vite.config.ts
+++ disable esbuild minify identifiers vite.config.ts
@@ -8,6 +8,7 @@
   build: {
     sourcemap: true,
   },
+  esbuild: { minifyIdentifiers: false },
   plugins: [vue(), legacy()],
   resolve: {

Opción 3: Usar terser como minificador manteniendo solo los nombres de clases de migración​

Vite admite usar terser como minificador. Terser es más lento que esbuild, pero ofrece un control más granular sobre qué minificar. Agrega minify: 'terser' con terserOptions.mangle.keep_classnames: /^Migrations\d+$/ y terserOptions.compress.keep_classnames: /^Migrations\d+$/ a tu configuración. Estas opciones asegurarán que los nombres de clase que comienzan con "Migrations" y terminan con números no sean renombrados durante la minificación.

Asegúrate de tener terser disponible como dependencia de desarrollo en tu proyecto: npm add -D terser.

--- basic vite.config.ts
+++ terser keep migration class names vite.config.ts
@@ -7,6 +7,11 @@
 export default defineConfig({
   build: {
     sourcemap: true,
+    minify: 'terser',
+    terserOptions: {
+      mangle: { keep_classnames: /^Migrations\d+$/ },
+      compress: { keep_classnames: /^Migrations\d+$/ },
+    },
   },
   plugins: [vue(), legacy()],
   resolve: {