Heim > Web-Frontend > js-Tutorial > Hauptteil

Warum sollten Sie Ihren Umgebungsvariablen immer Typsicherheit hinzufügen?

Mary-Kate Olsen
Freigeben: 2024-09-24 06:25:02
Original
652 Leute haben es durchsucht

Ein kleiner Hintergrund

Wenn Sie schon eine Weile programmieren, wissen Sie, wie wichtig Umgebungsvariablen und welche Rolle sie spielen, aber auch, wie mühsam es ist, einen Fehler herauszufinden, der nur dadurch verursacht wurde, dass in Ihrem Projekt keine verdammte Umgebungsvariable festgelegt wurde , lol!

Anfang dieses Jahres habe ich bei einem produktbasierten Startup als Full-Stack-Entwickler-Praktikant gearbeitet. Mit dem Wachstum des Projekts wuchs auch die Anzahl der Umgebungsvariablen. Und jeder arbeitete an separaten Funktionen in separaten Zweigen, sodass wir keine Ahnung hatten, ob jemand eine neue Umgebungsvariable in seinem Zweig eingeführt hatte, die später mit dem Hauptzweig zusammengeführt wurde. Dies führte zu Problemen, als ich versuchte, meine Zweige bereitzustellen. Ich hatte die Idee, dass dem Projekt eine neue Umgebungsvariable hinzugefügt wurde.

Dann, später, lernte ich den T3-Stack kennen und er hatte eine brillante Lösung zum Hinzufügen von Typsicherheit zu Env-Variablen. Ich wusste nicht einmal, dass es eine solche Lösung überhaupt gibt. Es ist immer ein gutes Gefühl, etwas Neues zu lernen, wenn man es am wenigsten erwartet. Der T3-Stack verwendet zod und das Paket @t3-oss/env-nextjs, um Ihren Anwendungen Typsicherheit zu verleihen, was mir sehr gut gefallen hat. Danach habe ich mir vorgenommen, meine Env-Variablen immer typsicher zu machen, egal was passiert.

Wenn Sie ein neues Projekt starten oder bereits in einem Team arbeiten, würde ich Ihnen dringend empfehlen, Ihren Envs Typsicherheit hinzuzufügen. Wenn Sie nur dies hinzufügen, ersparen Sie sich die Mühe, Probleme in Ihrer Codebasis herauszufinden.

Hier erfahren Sie, wie Sie es zu Ihrem Projekt hinzufügen können. Es ist ziemlich einfach.

Was heißt zod?

Zod ist eine schlanke, schnelle Schema-Deklarations- und Validierungsbibliothek. Ein Schema kann alles sein, von einer einfachen Zeichenfolge, einer Zahl bis hin zu einem komplexen Objekttyp.

Grundlegende Verwendung

import {z} from 'zod';

const myBoolean = z.boolean();

myBoolean.parse('true'); // throws error
myBoolean.parse(true) // valid

Nach dem Login kopieren

Erstellen eines verschachtelten Objektschemas

import { z } from 'zod';

const userSchema = z.object({
    name: z.string(),
    age: z.number(),
    address: z.object({
        house_no: z.string(),
        locality: z.string(),
        city: z.string(),
        state: z.string(),
    })
});
Nach dem Login kopieren

Sie können ein einfaches Objektschema oder ein verschachteltes Objektschema erstellen.

Was ist t3-oss/env-nextjs?

Es handelt sich lediglich um ein Paket, das uns dabei hilft, Typsicherheit zu Env-Variablen hinzuzufügen

Lassen Sie uns typsichere Umgebungsvariablen erstellen

Erstellen Sie eine env.js-Datei im Stammverzeichnis Ihres Projekts.

import {createEnv} from "@t3-oss/env-nextjs"; import {z} from "zod";

export const env = createEnv({
  /*
   * Serverside Environment variables, not available on the client.
   * Will throw if you access these variables on the client.
   */
  server: {
    DB_URI: z.string().url(),
  },
  /*
   * Environment variables available on the client (and server).
   *
   * You'll get type errors if these are not prefixed with NEXT_PUBLIC_.
   */
  client: {
    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
  },
  /*
   * Due to how Next.js bundles environment variables on Edge and Client,
   * we need to manually destructure them to make sure all are included in bundle.
   *
   * You'll get type errors if not all variables from `server` & `client` are included here.
   */
  runtimeEnv: {
    DB_URI: process.env.DATABASE_URL,
    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
      process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
  },
});
Nach dem Login kopieren

Verwendung

import {env} from '@/env';

const CLERK_PUBLISHABLE_KEY = env.NEXT_PUBLISHABLE_KEY;

Nach dem Login kopieren

Wenn Sie Ihren Cursor über NEXT_PUBLISHABLE_KEY bewegen, können Sie sehen, dass dieser Wert als Zeichenfolge eingegeben wurde, was bedeutet, dass unsere Umgebungsvariablen jetzt eingegeben werden.

Wir haben typsichere Umgebungsvariablen hinzugefügt, diese werden jedoch nicht bei jeder Build-Zeit ausgeführt. Wir müssen unsere neu erstellte Datei in unsere Datei next.config.js importieren. Sie können dafür das Paket unjs/jiti verwenden.

Installieren Sie zunächst das Jiti-Paket von npm.

import { fileURLToPath } from "node:url";
import createJiti from "jiti";
const jiti = createJiti(fileURLToPath(import.meta.url));

jiti("./app/env");
Nach dem Login kopieren

Wenn Sie mit import.meta.url arbeiten, wird die URL der Datei angezeigt, in der Sie gerade arbeiten. Es enthält jedoch ein file:///-Präfix, das Sie möglicherweise nicht möchten. Um dieses Präfix zu entfernen, können Sie die Funktion „fileURLToPath“ aus dem Modul „node:url“ verwenden.

Zum Beispiel:

import {fileURLToPath} from 'node:url';

// Convert the file URL to a path
const filename = fileURLToPath(import.meta.url);

Nach dem Login kopieren

Wenn Sie nun nicht über die erforderlichen Umgebungsvariablen verfügen, wird ein Fehler wie dieser angezeigt -

Why you should always add type safety to your environment variables?

Wie füge ich Env-Variablen in Node.js-Projekten Typsicherheit hinzu?

import dotenv from "dotenv";
import { z } from "zod";

dotenv.config();

const schema = z.object({
  MONGO_URI: z.string(),
  PORT: z.coerce.number(),
  JWT_SECRET: z.string(),
  NODE_ENV: z
    .enum(["development", "production", "test"])
    .default("development"),
});

const parsed = schema.safeParse(process.env);

if (!parsed.success) {
  console.error(
    "❌ Invalid environment variables:",
    JSON.stringify(parsed.error.format(), null, 4)
  );
  process.exit(1);
}

export default parsed.data;

Nach dem Login kopieren

In Node.js-Projekten erstellen wir einfach ein Zod-Schema und analysieren es anhand unserer Process.env, um zu überprüfen, ob alle Umgebungsvariablen festgelegt sind oder nicht.

Verwendung

import express from "express";
import env from "./env";

const app = express();
const PORT = env.PORT || 5000; // PORT is type safe here....

app.listen(PORT, () => {
console.log("Connected to server on PORT ${PORT}");
connectDB();
});

Nach dem Login kopieren

So fügen Sie Ihren Umgebungsvariablen Typsicherheit hinzu. Ich hoffe, Sie haben in diesem Tutorial etwas Neues gelernt.

Viel Spaß beim Codieren!! ?

Das obige ist der detaillierte Inhalt vonWarum sollten Sie Ihren Umgebungsvariablen immer Typsicherheit hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!