Zum Hauptinhalt springen

Vite

Inoffizielle Beta-Übersetzung

Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →

Die Verwendung von TypeORM in einem Vite-Projekt ist recht unkompliziert. Wenn Sie jedoch Migrationen verwenden, werden Sie beim Ausführen des Produktions-Builds auf Fehler wie "...migration name is wrong. Migration class name should have a JavaScript timestamp appended." stoßen. Bei Produktions-Builds werden Dateien standardmäßig optimiert, was das Verschleiern (Mangling) Ihres Codes zur Verringerung der Dateigrößen umfasst.

Es gibt drei Lösungsansätze für dieses Problem. Die Optionen werden unten als Diff zu dieser Basis-vite.config.ts dargestellt:

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"),
        },
    },
})

Option 1: Minify deaktivieren​

Einfachste Lösung, führt aber zu deutlich größeren Dateien. Fügen Sie build.minify = false zu Ihrer Konfiguration hinzu.

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

Option 2: Identifier-Mangling in esbuild deaktivieren​

Vite nutzt standardmäßig esbuild als Minifier. Sie können das Mangling von Identifiers deaktivieren, indem Sie esbuild.minifyIdentifiers = false zu Ihrer Konfiguration hinzufügen. Dies führt zu kleineren Dateigrößen, aber abhängig von Ihrer Codebasis werden die Vorteile abnehmen, da alle Bezeichner in voller Länge erhalten bleiben.

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

Option 3: Terser als Minifier verwenden und nur Migrations-Klassennamen beibehalten​

Vite unterstützt Terser als Minifier. Terser ist langsamer als esbuild, bietet aber feinere Kontrolle über die Minifizierung. Fügen Sie in Ihrer Konfiguration minify: 'terser' mit terserOptions.mangle.keep_classnames: /^Migrations\d+$/ und terserOptions.compress.keep_classnames: /^Migrations\d+$/ hinzu. Diese Optionen stellen sicher, dass Klassennamen, die mit "Migrations" beginnen und mit Zahlen enden, während der Minifizierung nicht umbenannt werden.

Stellen Sie sicher, dass Terser als Dev-Abhängigkeit in Ihrem Projekt verfügbar ist: 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: {