Schritte zum Erstellen eines Vite-Projekts

Vorwort

Mit der Veröffentlichung und zunehmenden Stabilität von Vite2 versuchen nun immer mehr Projekte, es zu verwenden. Wenn wir Vite verwenden, nutzen wir normalerweise die folgenden Befehle, um ein Projekt zu erstellen:

// Verwenden von npm
npm init @vitejs/app
// Garn verwenden
Garn erstellen @vitejs/app

 
// Wenn Sie den Projektnamen angeben und eine Vorlage für ein bestimmtes Framework verwenden möchten, können Sie dies wie folgt tun // npm
npm init @vitejs/app meine-vue-app --template vue
//Garn
Garn erstellen @vitejs/app my-vue-app --template vue

Nach dem Ausführen dieser Befehle wird ein Projektordner generiert. Für die meisten Leute mag es ausreichen, ein Projekt normal zu erstellen, aber ich frage mich, warum beim Ausführen dieser Befehle ein Projektordner generiert wird. Hier verwenden wir Garn als Beispiel, um ein Projekt zu erstellen.

Was macht Yarn Create?

Viele Leute fragen sich vielleicht, warum viele Projekte mit dem Befehl „yarn create“ erstellt werden. Zusätzlich zu Vite erstellen wir hier auf die gleiche Weise ein React-Projekt: yarn create react-app my-app .
Was macht dieser Befehl also? Eigentlich macht er zwei Dinge:

yarn global hinzufügen erstellen-reagieren-App
Erstellen-Reagieren-App Meine App

Weitere Informationen zur Garnherstellung finden Sie hier

Quellcodeanalyse

Nachdem yarn create @vitejs/app ausgeführt wurde, wird der Code in @vitejs/create-app ausgeführt. Schauen wir uns zunächst die Projektstruktur dieser Datei an

Die Ordner, die mit template beginnen, sind alle Projektvorlagen für verschiedene Frameworks und entsprechende Typescript-Versionen. Wir müssen uns nicht allzu viele Gedanken darüber machen. Die Logik zum Erstellen eines Projekts befindet sich vollständig in der Datei index.js. Schauen wir uns an, was hier gemacht wurde

Projektabhängigkeiten

Das erste ist die Einführung von Abhängigkeiten

const fs = erfordern('fs')
const Pfad = require('Pfad')
const argv = erfordern('minimist')(Prozess.argv.slice(2))
const prompts = erfordern('prompts')
Konstante {
  Gelb,
  Grün,
  Cyan,
  Blau,
  Magenta,
  hellrot,
  Rot
} = erfordern('Kolorist')

fs und path sind integrierte Module von Nodejs, während minimist, prompts und kolorist jeweils Abhängigkeitsbibliotheken von Drittanbietern sind.

• minimist: ist ein Tool zum Parsen von Befehlszeilenargumenten. dokumentieren
• prompts: ist ein interaktives Befehlszeilentool. dokumentieren
• kolorist: ist ein Tool, das die Befehlszeilenausgabe bunt macht. dokumentieren

Vorlagenkonfiguration

Als Nächstes werden die Konfigurationsdateien verschiedener Framework-Vorlagen generiert und schließlich ein Array mit Vorlagennamen generiert.

// Hier schreiben wir nur die Konfiguration der Vue- und React-Frameworks, bei den anderen unterscheidet es sich nicht sehr. Bei Interesse können Sie zum Quellcode gehen.
const FRAMEWORKS = [
  ......
  
  {
    Name: "vue",
    Farbe: grün,
    Varianten: [
      {
        Name: "vue",
        Anzeige: 'JavaScript',
        Farbe: gelb
      },
      {
        Name: 'vue-ts',
        Anzeige: "TypeScript",
        Farbe: blau
      }
    ]
  },
  {
    Name: "reagieren",
    Farbe: Cyan,
    Varianten: [
      {
        Name: "reagieren",
        Anzeige: 'JavaScript',
        Farbe: gelb
      },
      {
        Name: "react-ts",
        Anzeige: "TypeScript",
        Farbe: blau
      }
    ]
  },
  
  ......
]

//Liste mit Ausgabevorlagennamen const TEMPLATES = FRAMEWORKS.map(
  (f) => (f.Varianten && f.Varianten.map((v) => v.Name)) || [f.Name]
).reduce((a, b) => a.concat(b), [])

Zweitens wird aufgrund der Besonderheit der .gitignore-Datei zunächst unter jeder Framework-Projektvorlage eine _gitignore-Datei erstellt und dann bei einer späteren Projekterstellung durch .gitignore ersetzt. Daher wird im Code ein Objekt vordefiniert, um die umzubenennenden Dateien zu speichern:

const renameFiles = {
  _gitignore: ".gitignore"
}

Hilfsfunktionen

Bevor wir über die Kernfunktionen sprechen, werfen wir einen Blick auf die im Code definierten Toolfunktionen. Am wichtigsten sind die drei Funktionen, die sich auf Dateioperationen beziehen.

Kopie

Funktion kopieren(Quelle, Ziel) {
  const stat = fs.statSync(Quelle)
  wenn (stat.isDirectory()) {
    Kopierverzeichnis(Quelle, Ziel)
  } anders {
    fs.copyFileSync(Quelle, Ziel)
  }
}

Mit der Kopierfunktion wird die Datei oder der Ordner src in den angegebenen Ordner dest kopiert. Zuerst wird der Status stat von src abgerufen. Wenn src ein Ordner ist, d. h. stat.isDirectory() wahr ist, wird die unten eingeführte Funktion copyDir aufgerufen, um die Dateien im Ordner src in den Ordner dest zu kopieren. Wenn es sich bei src hingegen um eine Datei handelt, wird die Funktion fs.copyFileSync direkt aufgerufen, um die src-Datei in den Zielordner zu kopieren.

Kopierverzeichnis

Funktion Kopierverzeichnis(Quellverzeichnis, Zielverzeichnis) {
  fs.mkdirSync(Zielverzeichnis, { rekursiv: true })
  für (const-Datei von fs.readdirSync(srcDir)) {
    const srcFile = Pfad.auflösen(srcDir, Datei)
    const destFile = Pfad.resolve(Zielverzeichnis, Datei)
    kopieren(Quelldatei, Zieldatei)
  }
}

Die Funktion copyDir wird verwendet, um Dateien in einem Ordner srcDir in den angegebenen Ordner destDir zu kopieren. Zuerst wird die Funktion fs.mkdirSync aufgerufen, um den angegebenen Ordner zu erstellen. Anschließend wird fs.readdirSync aufgerufen, um die Dateien aus dem Ordner srcDir abzurufen und sie nacheinander zu durchlaufen und zu kopieren. Schließlich wird die Kopierfunktion zum Kopieren aufgerufen. Hier wird Rekursion verwendet, da sich im Ordner möglicherweise Dateien oder Ordner befinden.

leeresVerzeichnis

Funktion emptyDir(dir) {
  if (!fs.existsSync(dir)) {
    zurückkehren
  }
  für (const Datei von fs.readdirSync(dir)) {
    const abs = Pfad.resolve(Verzeichnis, Datei)
    wenn (fs.lstatSync(abs).isDirectory()) {
      emptyDir(abs)
      fs.rmdirSync(abs)
    } anders {
      fs.unlinkSync(abs)
    }
  }
}

Mit der Funktion „emptyDir“ wird der Code im Ordner „dir“ gelöscht. Zuerst wird ermittelt, ob der Ordner „dir“ existiert. Wenn dies der Fall ist, werden die Dateien im Ordner durchsucht und der Dateipfad abs erstellt. Wenn abs ein Ordner ist, wird rekursiv die Funktion emptyDir aufgerufen, um die Dateien im Ordner zu löschen, und anschließend fs.rmdirSync aufgerufen, um den Ordner zu löschen. Wenn abs eine Datei ist, wird die Funktion fs.unlinkSync aufgerufen, um die Datei zu löschen.

Kernfunktionen

Als nächstes folgt die Init-Funktion, die die Kernfunktionalität implementiert.

Befehlszeileninteraktion und Erstellen von Ordnern

Der erste Schritt besteht darin, die Befehlszeilenparameter abzurufen

let targetDir = argv._[0]
lass Vorlage = argv.Vorlage || argv.t

const defaultProjectName = !Zielverzeichnis ? 'vite-project' : Zielverzeichnis

argv._[0] stellt den ersten Parameter nach @vitejs/app dar
template ist der Name der zu verwendenden Vorlage
defaultProjectName ist der Name des von uns erstellten Projekts.
Der nächste Schritt besteht darin, das Prompts-Paket zu verwenden, um die Abfrage in der Befehlszeile auszugeben, und zwar wie folgt:

Der spezifische Code lautet wie folgt:

// Einige Codes zur Befehlszeileninteraktion sind hier nicht alle aufgeführt. Wenn Sie interessiert sind, können Sie zum Quellcode gehen let result = {}

Ergebnis = Auf Eingabeaufforderungen warten (
  [
    {
      Typ: Zielverzeichnis ? null : 'Text',
      Name: "Projektname",
      Nachricht: 'Projektname:',
      initial: Standardprojektname,
      onState: (Status) =>
        (Zielverzeichnis = Status.Wert.Trim() || Standardprojektname)
    },
    ......
    
  ]
)

const { Framework, Überschreiben, Paketname, Variante} = Ergebnis

const root = Pfad.join(cwd, Zielverzeichnis)

if (überschreiben) {
  leeresVerzeichnis(Stammverzeichnis)
} sonst wenn (!fs.existsSync(root)) {
  fs.mkdirSync(Stamm)
}

Vorlage = Variante || Rahmen || Vorlage

// Projektordnerpfad ausgeben console.log(`\nScaffolding project in ${root}...`)

const templateDir = Pfad.join(__dirname, `template-${template}`)

Nach Abschluss der Auswahl wird das Ergebnis unserer Auswahl zurückgegeben
root ist der vollständige Dateipfad, der von der Funktion path.join erstellt wurde.
overwrite ist für den Fall gedacht, dass bereits eine Datei mit demselben Namen vorhanden ist, die wir erstellen möchten, und ob diese überschrieben werden soll. Wenn Sie überschreiben, rufen Sie die vorherige Funktion emptyDir auf, um den Ordner zu leeren. Wenn der Ordner nicht existiert, rufen Sie fs.mkdirSync auf, um den Ordner zu erstellen
templateDir Der Name des ausgewählten Vorlagenordners

Schreiben in eine Datei

const write = (Datei, Inhalt) => {
  const targetPath = renameFiles[Datei]
    ? Pfad.beitreten(root, renameFiles[Datei])
    : Pfad.Join(Root, Datei)
  wenn (Inhalt) {
    fs.writeFileSync(Zielpfad, Inhalt)
  } anders {
      kopieren(Pfad.verbinden(Vorlagenverzeichnis, Datei), Zielpfad)
  }
}

const-Dateien = fs.readdirSync(templateDir)
für (const Datei von Dateien.Filter((f) => f !== 'package.json')) {
  schreiben(Datei)
}

const pkg = erfordern(Pfad.Join(Vorlagenverzeichnis, `package.json`))

pkg.name = Paketname

schreiben('package.json', JSON.stringify(pkg, null, 2))

const pkgManager = /yarn/.test(process.env.npm_execpath) ? 'Garn' : 'npm'

// Gibt einige Eingabeaufforderungen aus, um Sie darüber zu informieren, dass das Projekt erstellt wurde, und um Ihnen den Befehl mitzuteilen, den Sie ausführen müssen, um das Projekt als Nächstes zu starten console.log(`\nFertig. Jetzt ausführen:\n`)
wenn (root !== cwd) {
Konsole.log(` cd ${Pfad.relative(cwd, root)}`)
}
Konsole.log(` ${pkgManager === 'yarn' ? `yarn` : `npm install`}`)
Konsole.log(` ${pkgManager === 'yarn' ? `yarn dev` : `npm run dev`}`)
konsole.log()

Die Schreibfunktion akzeptiert zwei Parameter, Datei und Inhalt, und hat zwei Funktionen:

• Schreiben Sie den angegebenen Inhalt in die angegebene Datei und rufen Sie die Funktion fs.writeFileSync auf, um den Inhalt in die Datei zu schreiben.
• Kopieren Sie die Dateien im Vorlagenordner in den angegebenen Ordner und rufen Sie die zuvor eingeführte Kopierfunktion auf, um die Dateien zu kopieren.

Rufen Sie dann fs.readdirSync auf, um die Dateien im Vorlagenordner zu lesen, sie zu durchlaufen und nacheinander in den Projektordner zu kopieren (die Datei package.json muss gefiltert werden, da das Namensfeld darin geändert werden muss); schreiben Sie sie schließlich in die Datei package.json.

Zusammenfassung

Die Implementierung des Create-App-Pakets von Vite umfasst nur etwa 320 Codezeilen, berücksichtigt jedoch die Kompatibilität verschiedener Szenarien. Nachdem Sie sich damit vertraut gemacht haben, ist es nicht schwierig, ein solches CLI-Tool selbst zu implementieren.

Dies ist das Ende dieses Artikels über die Implementierungsschritte zur Erstellung eines Vite-Projekts. Weitere relevante Inhalte zur Erstellung eines Vite-Projekts finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!