Hinzufügen von VITE zu Ihrer vorhandenen Web -App

Vite, ausgesprochen "Veet", ist ein moderner JavaScript -Bundler, der für seine Geschwindigkeit und Benutzerfreundlichkeit bekannt ist. Es ist ein leistungsstarkes Tool, das minimale Konfiguration erfordert und dennoch umfassende Anpassungsoptionen bietet. In diesem Artikel wird beschrieben, dass ein vorhandenes Projekt von einem anderen Bundler (wie WebPack) bis vite migriert wird. Für neue Projekte finden Sie in der offiziellen VITE -Dokumentation. Selbst für Legacy -Migrationen wird das Gerüst eines einfachen Vite -Projekts zuerst für ein besseres Verständnis seiner Struktur empfohlen.

Migration von Webpack zu vite

Dieser Leitfaden spiegelt die Erfahrung der Migration eines wesentlichen, langjährigen Webpack-Projekts wider. Der Prozess zeigt die Konfigurationsfunktionen von Vite während des Übergangs.

Unnötige Webpackkonfigurationen in vite

VITE übernimmt von Natur aus viele Aufgaben, die normalerweise umfangreiche Webpackkonfigurationen erfordern. Dadurch müssen viele gemeinsame Webpack -Plugins und -einstellungen erforderlich sind.

Statische Vermögensverhandlung

WebPack erfordert häufig eine explizite Konfiguration zum Laden statischer Assets (Bilder, Schriftarten usw.):

 {
  Test: /\
  verwenden: [
    {
      Loader: "Dateilader"
    }
  ]
}

Vite verwaltet dies automatisch.

Styling (CSS/SCSS)

Die Styling -Konfiguration von WebPack kann komplex sein:

 {
  Test: /\.s?css$/,,
  Verwendung: [minicssextractPlugin.loader, "CSS-Lader", "Sass-Loader"]
},

// später

Neue minicsSextractPlugin ({Dateiname: "[Name]-[ContentHash] .css"}),

VITE unterstützt CSS und SCSS nativ; Installieren Sie einfach Sass und Vite griff den Rest ab.

Transpilation (TypeScript/JSX)

WebPack -Anforderungen zur Transpilation von TypeScript und JSX:

 {
  Test: /\.(t|J)Sx?$/,,
  ausschließen: /node_modules /,,
  Loader: "Babel-Loader"
},

... mit einer entsprechenden Babel -Konfiguration. Vite behandelt diese Out-of-the-Box und unterstützt moderne JavaScript-Funktionen und Typenkript. Ein Plugin ist für den älteren Browserunterstützung erhältlich.

Knotenmodule Auflösung

WebPack erfordert eine explizite Konfiguration für die Lösung node_modules :

 lösen: {
  Module: [path.resolve ("./ node_modules")]]
}

Vite behandelt dies automatisch.

Produktions-/Entwicklungsmodi

Webpack verwendet häufig mode , um zwischen Umgebungen zu unterscheiden:

 Modus: ISProd? "Produktion": "Entwicklung",

VITE verwendet separate Befehle ( vite für die Entwicklung, vite build für die Produktion).

Dateierweiterungen

Das Webpack erfordert häufig die Angabe von Dateierweiterungen:

 lösen: {
  Erweiterungen: [".ts", ".tsx", ".js"],
}

VITE behandelt automatisch gemeinsame Erweiterungen.

Rollup -Plugin -Kompatibilität

Viele Rollup -Plugins sind mit vite kompatibel und bieten einen reibungslosen Übergang für vorhandene Plugins. Wenden Sie sich an die Vite -Dokumentation, um Kompatibilitätsinformationen zu erhalten.

Einrichten Ihres ersten Vite -Projekts einrichten

Beginnen Sie für die Migration eines vorhandenen Projekts mit einem HTML -Einstiegspunkt (z. B. index.html ) auf Ihre JavaScript -Eintragsdatei. Installieren Sie die erforderlichen Plugins (z. B. @vitejs/plugin-react für React-Projekte). Erstellen Sie eine vite.config.ts -Datei:

 importieren {definconfig} aus "vite";
Importieren Sie von "@vitejs/Plugin-React";

Standard default DefinoConfig ({{
  Plugins: [React ()]
});

Fügen Sie NPM -Skripte hinzu:

 "Dev": "vite",
"Build": "Vite Build",
"Vorschau": "Vite Preview",

Starten Sie den Entwicklungsserver mit npm run dev .

Erweiterte Konfiguration: Aliase, Umgebungsvariablen und Proxys

Aliase

Webpack -Aliase können mit resolve.alias in vite repliziert werden:

 lösen: {
  alias: {
    jscolor: path.resolve ("./ util/jscolor.js"),
    App: path.resolve ("./ App"),
    // ... mehr Aliase
  }
},

Umgebungsvariablen

Vite verwendet import.meta.env für Umgebungsvariablen, die normalerweise mit VITE_ vorangestellt sind. Für Legacy -Projekte wird möglicherweise ein benutzerdefiniertes Plugin benötigt, um vorhandenen process.env zu verarbeiten.

Server -Proxying

Für stellvertretende Anfragen zur Backend -Dienste während der Entwicklung:

 Server: {
  Proxy: {
    "/graphql": "http: // localhost: 3001"
  }
}

Baubibliotheken

Konfigurieren Sie zum Erstellen von Bibliotheken die build -Option in vite.config.ts : (Beispiel für die Kürze weggelassen, jedoch ähnlich dem ursprünglichen Beispiel).

Abschluss

Vite bietet eine erhebliche Verbesserung der Entwicklung von Webanwendungen und bietet Geschwindigkeit und Benutzerfreundlichkeit. Die Funktionen und die Kompatibilität mit Rollup -Plugins machen die migrierenden Projekte relativ einfach.

Das obige ist der detaillierte Inhalt vonHinzufügen von VITE zu Ihrer vorhandenen Web -App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!