Vite zu Ihrer bestehenden Web-App hinzufügen | CSS-Tricks

Schnell (ausgesprochen „veet“) ist ein neuer JavaScript-Bundler. Es wird mit Batterien geliefert, erfordert fast keine Konfiguration, um nützlich zu sein, und bietet viele Konfigurationsoptionen. Oh – und es ist schnell. Unglaublich schnell.

In diesem Beitrag erfahren Sie, wie Sie ein vorhandenes Projekt in Vite konvertieren. Wir werden Dinge wie Aliasse, die dotenv-Behandlung von Shimming-Webpacks und Server-Proxys behandeln. Mit anderen Worten, wir untersuchen, wie Sie ein Projekt von seinem bestehenden Bundler nach Vite verschieben. Wenn Sie stattdessen ein neues Projekt starten möchten, möchten Sie Springe zu ihrer Dokumentation.

Lange Rede, kurzer Sinn: Die CLI fragt nach dem Framework Ihrer Wahl – React, Preact, Svelte, Vue, Vanilla oder sogar lit-html – und ob Sie TypeScript wünschen, und liefert Ihnen dann ein voll funktionsfähiges Projekt.

Gerüst zuerst! Wenn Sie mehr über die Integration von Vite in ein Legacy-Projekt erfahren möchten, würde ich still empfehlen, ein leeres Projekt aufzubauen und ein wenig darin herumzustöbern. Manchmal füge ich einige Codeklumpen ein, aber das meiste davon kommt direkt aus der Vite-Standardvorlage.

Unser Anwendungsfall

Was wir uns ansehen, basiert auf meiner eigenen Erfahrung bei der Migration des Webpack-Builds meiner Buchlistenprojekt (repo). Dieses Projekt hat nichts besonderes, aber es ist ziemlich groß und alt und stützt sich stark auf Webpack. In diesem Sinne ist es also eine gute Gelegenheit, einige der nützlicheren Konfigurationsoptionen von Vite in Aktion zu sehen, während wir darauf umstellen.

Was wir Gewohnheit müssen

Einer der überzeugendsten Gründe, Vite zu verwenden, ist, dass es bereits eine Menge von Anfang an bietet und viele der Verantwortlichkeiten anderer Frameworks übernimmt, so dass es weniger Abhängigkeiten und eine etabliertere Basis für Konfigurationen und Konventionen gibt.

Anstatt also damit anzufangen, was wir brauchen, um loszulegen, lassen Sie uns alle gängigen Webpack-Dinge durchgehen, die wir brauche nicht weil Vite sie uns kostenlos zur Verfügung stellt.

Statisches Laden von Assets

Normalerweise müssen wir in Webpack so etwas hinzufügen:

{
  test: /.(png|jpg|gif|svg|eot|woff|woff2|ttf)$/,
  use: [
    {
      loader: "file-loader"
    }
  ]
}

Dadurch werden alle Verweise auf Schriftartdateien, Bilder, SVG-Dateien usw. in Ihren dist-Ordner kopiert, damit sie von Ihren neuen Bundles referenziert werden können. Dies ist Standard in Vite.

Stile

Ich sage hier absichtlich “Stile” im Gegensatz zu “css”, weil Sie mit Webpack so etwas haben könnten:

{
  test: /.s?css$/,
  use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
},

// later

new MiniCssExtractPlugin({ filename: "[name]-[contenthash].css" }),

…die es der Anwendung ermöglicht, CSS zu importieren oder SCSS-Dateien. Sie werden es leid werden, mich das sagen zu hören, aber Vite unterstützt dies sofort. Stellen Sie einfach sicher, dass Sie Sass selbst in Ihrem Projekt installieren, und Vite erledigt den Rest.

Transpilation / TypeScript

Wahrscheinlich verwendet Ihr Code TypeScript und/oder nicht standardmäßige JavaScript-Funktionen wie JSX. Wenn dies der Fall ist, müssen Sie Ihren Code transpilieren, um diese Dinge zu entfernen und einfaches altes JavaScript zu erstellen, das ein Browser (oder ein JavaScript-Parser) verstehen kann. Im Webpack würde das ungefähr so ​​aussehen:

{
  test: /.(t|j)sx?$/,
  exclude: /node_modules/,
  loader: "babel-loader"
},

…mit einer entsprechenden Babel-Konfiguration, um die entsprechenden Plugins anzugeben, die für mich so aussahen:

{
  "presets": ["@babel/preset-typescript"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ]
}

Obwohl ich diese ersten beiden Plugins wahrscheinlich schon vor Jahren hätte aufhören können, spielt es keine Rolle, da Vite das alles für uns erledigt, wie Sie sicher schon vermutet haben. Es nimmt Ihren Code, entfernt TypeScript und JSX und erzeugt Code, der von modernen Browsern unterstützt wird.

Wenn Sie ältere Browser unterstützen möchten (und ich sage nicht, dass Sie das sollten), dann dafür gibt es ein Plugin.

node_modules

Überraschenderweise erfordert Webpack, dass Sie es anweisen, Importe von aufzulösen node_modules, was wir damit machen:

resolve: {
  modules: [path.resolve("./node_modules")]
}

Vite tut dies erwartungsgemäß bereits.

Produktionsmodus

Eines der häufigsten Dinge, die wir in Webpack tun, ist die Unterscheidung zwischen Produktions- und Entwicklungsumgebungen, indem wir manuell a . übergeben mode Eigentum, wie folgt:

mode: isProd ? "production" : "development",

…was wir normalerweise so vermuten:

const isProd = process.env.NODE_ENV == "production";

Und natürlich legen wir diese Umgebungsvariable über unseren Build-Prozess fest.

Vite handhabt dies etwas anders und gibt uns andere Befehle für Entwicklungs-Builds als für Produktions-Builds, auf die wir gleich eingehen werden.

Dateierweiterungen

Auf die Gefahr hin, den Punkt zu vertiefen, werde ich schnell feststellen, dass Vite auch nicht verlangt, dass Sie jede von Ihnen verwendete Dateierweiterung angeben.

resolve: {
  extensions: [".ts", ".tsx", ".js"],
}

Richten Sie einfach das richtige Vite-Projekt ein und Sie können loslegen.

Rollup-Plugins sind kompatibel!

Dies ist ein so wichtiger Punkt, den ich in einem eigenen Abschnitt hervorheben wollte. Wenn Sie immer noch mit einigen Webpack-Plugins enden, die Sie in Ihrer Vite-App ersetzen müssen, wenn Sie diesen Blog-Beitrag beendet haben, versuchen Sie, ein gleichwertiges Rollup-Plugin zu finden und zu verwenden das. Sie haben richtig gelesen: Rollup-Plugins sind bereits (oder normalerweise zumindest) mit Vite kompatibel. Einige Rollup-Plugins natürlich Dinge tun die nicht mit der Funktionsweise von Vite kompatibel sind – aber im Allgemeinen sollten sie einfach funktionieren.

Für mehr Information, schau dir die dokumente an.

Ihr erstes Vite-Projekt

Denken Sie daran, dass wir ein vorhandenes Legacy-Webpack-Projekt nach Vite verschieben. Wenn du etwas Neues baust, ist es besser, Starten Sie ein neues Vite-Projekt und geh von dort aus. Das heißt, der anfängliche Code, den ich Ihnen zeige, ist im Grunde genommen sowieso direkt von den Vite-Gerüsten eines neuen Projekts kopiert, daher könnte es für Sie auch eine gute Idee sein, sich einen Moment Zeit zu nehmen, um ein neues Projekt zu erstellen, um Prozesse zu vergleichen.

Der HTML-Einstiegspunkt

Ja, du hast richtig gelesen. Anstatt die HTML-Integration hinter ein Plugin zu stecken, wie es bei Webpack der Fall ist, ist Vite HTML an erster Stelle. Es erwartet eine HTML-Datei mit einem script-Tag für Ihren JavaScript-Einstiegspunkt und generiert alles von dort aus.

Hier ist die HTML-Datei (die Vite erwartet, dass sie aufgerufen wird index.html) wir beginnen mit:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>The GOAT of web apps</title>
  </head>
  <body>
    <div id="home"></div>
    <script type="module" src="https://css-tricks.com/reactStartup.tsx"></script>
  </body>
</html>

Notiere dass der <script> Tag zeigt auf /reactStartup.tsx. Passen Sie dies bei Bedarf an Ihren eigenen Eintrag an.

Lassen Sie uns ein paar Dinge installieren, z. B. ein React-Plugin:

npm i vite @vitejs/plugin-react @types/node

Wir erstellen auch Folgendes vite.config.ts direkt neben dem index.html Datei im Projektverzeichnis.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()]
});

Zuletzt fügen wir ein paar neue npm-Skripte hinzu:

"dev": "vite",
"build": "vite build",
"preview": "vite preview",

Starten wir nun den Entwicklungsserver von Vite mit npm run dev. Es ist unglaublich schnell und erstellt inkrementell alles, was benötigt wird, basierend auf den Anforderungen.

Aber leider scheitert es. Zumindest für jetzt.

Screenshot eines Terminalbildschirms mit dunklem Hintergrund und hellem Text. Beim Lesen ist ein Fehler aufgetreten, der besagt, dass beim Starten des Entwicklungsservers ein Fehler aufgetreten ist.

Wir werden gleich darauf eingehen, wie man Aliasse einrichtet, aber jetzt ändern wir stattdessen unsere reactStartup Datei (oder wie auch immer Ihre Eingabedatei heißt) wie folgt:

import React from "react";
import { render } from "react-dom";

render(
  <div>
    <h1>Hi there</h1>
  </div>,
  document.getElementById("home")
);

Jetzt können wir es laufen lassen npm run dev Befehl und navigieren Sie zu localhost:3000.

Hot Module Reload (HMR)

Nachdem der Entwicklungsserver jetzt ausgeführt wird, versuchen Sie, Ihren Quellcode zu ändern. Die Ausgabe sollen Update fast sofort über Vites HMR. Dies ist eine der schönsten Funktionen von Vite. Es macht die Entwicklungserfahrung so viel angenehmer, wenn sich Änderungen sofort widerspiegeln, anstatt warten zu müssen oder sie sogar selbst auslösen.

Der Rest dieses Beitrags befasst sich mit all den Dingen, die ich tun musste, um meine eigene App zum Erstellen und Ausführen mit Vite zu erhalten. Ich hoffe, einige davon sind für Sie relevant!

Aliasse

Es ist nicht ungewöhnlich, dass Webpack-basierte Projekte eine Konfiguration wie diese haben:

resolve: {
  alias: {
    jscolor: "util/jscolor.js"
  },
  modules: [path.resolve("./"), path.resolve("./node_modules")]
}

Dadurch wird ein Alias ​​für eingerichtet jscolor unter dem angegebenen Pfad und weist Webpack an, beide im Stammordner (./) und in node_modules bei der Importabwicklung. Dies ermöglicht uns Importe wie folgt:

import { thing } from "util/helpers/foo"

…überall in unserem Komponentenbaum, vorausgesetzt, es gibt a util Ordner ganz oben.

Vite erlaubt Ihnen nicht, einen ganzen Ordner für eine solche Auflösung bereitzustellen, aber es erlaubt Ihnen, Aliasse anzugeben, die denselben Regeln folgen wie die @rollup/plugin-alias:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

import path from "path";

export default defineConfig({
  resolve: {
    alias: {
      jscolor: path.resolve("./util/jscolor.js"),
      app: path.resolve("./app"),
      css: path.resolve("./css"),
      util: path.resolve("./util")
    }
  },
  plugins: [react()]
});

Wir haben a . hinzugefügt resolve.alias Abschnitt, einschließlich Einträgen für alles, was wir zum Aliasing benötigen. Unsere jscolor util ist auf das entsprechende Modul gesetzt, und wir haben Aliase für unsere Top-Level-Verzeichnisse. Jetzt können wir importieren von app/, css*/*, und util/ von jeder Komponente, überall.

Beachten Sie, dass diese Aliase nur für das Stammverzeichnis des Imports gelten, z util/foo. Wenn du welche hast andere util-Ordner tiefer in Ihrem Baum, und Sie verweisen darauf:

import { thing } from "./helpers/util";

…dann wird der obige Alias nicht vermassel das. Diese Unterscheidung ist nicht gut dokumentiert, aber man kann sie sehen im Rollup-Alias-Plugin. Der Alias ​​von Vite stimmt mit demselben Verhalten überein.

Umgebungsvariablen

Vite natürlich, unterstützt Umgebungsvariablen. Es liest Konfigurationswerte aus Ihrem .env Dateien in Entwicklung oder process.env, und fügt sie in Ihren Code ein. Leider funktionieren die Dinge etwas anders, als Sie es vielleicht gewohnt sind. Erstens ersetzt es nicht process.env.FOO aber eher import.meta.env.FOO. Nicht nur das, es ersetzt auch nur Variablen mit dem Präfix VITE_ standardmäßig. So, import.meta.env.VITE_FOO würde eigentlich ersetzt werden, aber nicht mein original FOO. Dieses Präfix kann konfiguriert, aber nicht auf eine leere Zeichenfolge gesetzt werden.

Für ein Legacy-Projekt können Sie alle Ihre zu verwendenden Umgebungsvariablen grep und ersetzen import.meta.env, dann füge a hinzu VITE_ Präfix, aktualisieren Sie Ihre .env -Dateien und aktualisieren Sie die Umgebungsvariablen in dem von Ihnen verwendeten CI/CD-System. Oder Sie konfigurieren das klassischere Verhalten des Ersetzens process.env.ANYTHING mit Werten von a .env Datei in Entwicklung, oder die reale process.env Wert in der Produktion.

Hier ist wie. Vites define Funktion ist im Grunde das, was wir brauchen. Dies registriert globale Variablen während der Entwicklung und ersetzt Rohtext für die Produktion. Wir müssen die Dinge so einrichten, dass wir unsere manuell lesen .env Datei im Entwicklungsmodus und die process.env Objekt im Produktionsmodus, und fügen Sie dann das entsprechende define Einträge.

Lassen Sie uns das alles in ein Vite-Plugin einbauen. Erster Lauf npm i dotenv.

Schauen wir uns nun den Code für das Plugin an:

import dotenv from "dotenv";

const isProd = process.env.NODE_ENV === "production";
const envVarSource = isProd ? process.env : dotenv.config().parsed;

export const dotEnvReplacement = () => {
  const replacements = Object.entries(envVarSource).reduce((obj, [key, val]) => {
    obj[`process.env.${key}`] = `"${val}"`;
    return obj;
  }, {});

  return {
    name: "dotenv-replacement",
    config(obj) {
      obj.define = obj.define || {};
      Object.assign(obj.define, replacements);
    }
  };
};

Vite-Sets process.env.NODE_ENV für uns, also müssen wir nur überprüfen, in welchem ​​Modus wir uns befinden.

Jetzt erhalten wir die tatsächlichen Umgebungsvariablen. Wenn wir in der Produktion sind, greifen wir process.env selbst. Wenn wir in der Entwicklung sind, bitten wir dotenv, uns zu schnappen .env Datei, parsen Sie sie und erhalten Sie ein Objekt mit allen Werten zurück.

Unser Plugin ist eine Funktion, die ein Vite-Plugin-Objekt zurückgibt. Wir injizieren unsere Umweltwerte in ein neues Objekt, das process.env. vor dem Wert, und dann geben wir unser eigentliches Plugin-Objekt zurück. Es stehen eine Reihe von Haken zur Verfügung. Hier brauchen wir aber nur die config Hook, der es uns ermöglicht, das aktuelle Konfigurationsobjekt zu ändern. Wir fügen hinzu define Eintrag, wenn keiner vorhanden ist, fügen Sie alle unsere Werte hinzu.

Aber bevor ich fortfahre, möchte ich anmerken, dass die Einschränkungen der Umgebungsvariablen von Vite, an denen wir arbeiten, aus einem bestimmten Grund existieren. Der obige Code ist, wie Bundler sind häufig konfiguriert, aber das bedeutet immer noch einen zufälligen Wert in process.env steckt in Ihrem Quellcode, wenn dieser Schlüssel existiert. Es gibt potenzielle Sicherheitsbedenken, also denken Sie bitte daran.

Server-Proxy

Wie sieht Ihre bereitgestellte Webanwendung aus? Wenn es nur JavaScript/CSS/HTML bereitstellt – wobei buchstäblich alles über separate Dienste passiert, die sich an anderer Stelle befinden – dann gut! Sie sind effektiv fertig. Was ich Ihnen gezeigt habe, sollte alles sein, was Sie brauchen. Der Entwicklungsserver von Vite wird Ihre Assets nach Bedarf bedienen, der alle Ihre Dienste wie zuvor pingt.

Aber was ist, wenn Ihre Web-App klein genug ist, dass einige Dienste direkt auf Ihrem Webserver ausgeführt werden? Für das Projekt, das ich umwandele, läuft auf meinem Webserver ein GraphQL-Endpunkt. Für die Entwicklung beginne ich mein äußern Server, der zuvor wusste, wie die vom Webpack generierten Assets bereitgestellt werden. Ich starte auch eine Webpack-Überwachungsaufgabe, um diese Assets zu generieren.

Aber da Vite seinen eigenen Entwicklungsserver ausliefert, müssen wir diesen Express-Server starten (auf einem anderen Port als den von Vite verwendeten) und dann Proxy-Aufrufe an /graphql nach dort:

server: {
  proxy: {
    "/graphql": "http://localhost:3001"
  }
} 

Dies teilt Vite mit, dass alle Anfragen für /graphql sollte gesendet werden an http://localhost:3001/graphql.

Beachten Sie, dass wir es tun nicht setze den Proxy auf http://localhost:3001/graphql in der Konfig. Stattdessen setzen wir es auf http://localhost:3001 und verlassen Sie sich auf Vite, um das hinzuzufügen /graphql Teil (sowie alle Abfrageargumente) an den Pfad.

Bibliotheken erstellen

Lassen Sie uns als schnellen Bonusabschnitt kurz das Erstellen von Bibliotheken besprechen. Was ist beispielsweise, wenn Sie nur eine JavaScript-Datei erstellen möchten, zB eine Bibliothek wie Redux. Es gibt keine zugehörige HTML-Datei, daher müssen Sie Vite zuerst mitteilen, was zu erstellen ist:

build: {
  outDir: "./public",
  lib: {
    entry: "./src/index.ts",
    formats: ["cjs"],
    fileName: "my-bundle.js"
  }
}

Teilen Sie Vite mit, wo das generierte Bundle abgelegt werden soll, wie es heißen soll und welche Formate es erstellen soll. Beachten Sie, dass ich hier CommonJS anstelle von ES-Modulen verwende, da die ES-Module (zum jetzigen Zeitpunkt) aufgrund von Bedenken, dass es das Tree-Shaking unterbrechen könnte, nicht minimiert werden.

Sie würden diesen Build mit ausführen vite build. Um eine Uhr zu starten und die Bibliothek bei Änderung neu aufzubauen, würden Sie ausführen

vite build --watch.

Einpacken

Vite ist ein unglaublich spannendes Werkzeug. Es nimmt nicht nur den Schmerz und die Tränen aus der Bündelung von Web-Apps, sondern verbessert auch die Leistung dabei erheblich. Es wird mit einem blitzschnellen Entwicklungsserver geliefert, der mit Hot-Modul-Neuladen geliefert wird und alle wichtigen JavaScript-Frameworks unterstützt. Wenn Sie Webentwicklung betreiben – sei es zum Spaß, es ist Ihr Job oder beides! – kann ich es nicht stark genug empfehlen.

The source: https://nguyendiep.com
Category: Marketing

Thanks for Reading

Enjoyed this post? Share it with your networks.

Get more stuff

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.

Leave a Feedback!