Ein auf Vue-cli basierender Codesatz unterstützt mehrere Projekte

Anwendungsszenario

Im B2B-Geschäft verlangen Kunden mehr oder weniger individuelle Anpassungen für dasselbe Produkt. Von der Haut, den Bildern bis hin zu einigen kleinen funktionalen Unterschieden.
Die Frontpartie wird immer zuerst modifiziert. Wenn die Änderungen geringfügig sind, erhöht das Ziehen eines Zweigs die Wartungskosten. Wenn zu viele Zweige gezogen werden und ein Problem mit dem Hauptstamm vorliegt, entspricht dies dem Kopieren von n Kopien, was wirklich eine sehr schmerzhafte Erfahrung ist. Ist es also möglich, dass ein Codesatz mehrere Projekte unterstützt?

Vor einiger Zeit erhielt ich eine Anforderung und die ausgewählte Technologie war VUE, die mit vue-cli erstellt wurde. Ein Codesatz muss mehr als zehn Kunden unterstützen. Die Skins und Funktionen der einzelnen Kunden weisen einige geringfügige Unterschiede auf, aber der Hauptprozess ist ungefähr derselbe. Wir haben die Lösung in diesem Szenario untersucht.

Ideen

Die Grundidee besteht in der Modularisierung und darin, während der Kompilierung entsprechend den Eingabebefehlen direkt verschiedene Module zusammenzustellen, um die benötigten Seiten zu packen.
Hier gibt es zwei Probleme:

1. Wie unterteilt man Seiten und steuert die Granularität der Komponenten?

2. Wie führe ich eine differenzielle Kompilierung durch?

Projektstruktur

Dieselbe Seite hat einige gemeinsame und einige unterschiedliche Teile. Die Komponentenidee von Vue selbst macht es uns leicht, daran zu denken, die Seite in Komponenten aufzuteilen, dann die gemeinsamen zu extrahieren und sie separat zu verarbeiten.

Gesamtprojektstruktur

• bauen
  

Die Build-Struktur umfasst hauptsächlich einige Skriptkonfigurationen von Webpack

• Konfiguration
  

Die Konfigurationsdatei ist hauptsächlich eine projektbezogene Konfiguration. Wir verwenden sie häufig, um den Abhörport, den Paketausgabepfad und die Benennung zu konfigurieren, wenn ein Portkonflikt vorliegt.

• Quelle
  

Quellcodedateien.

• Vermögenswerte

Statische Ressourcen, normalerweise Bilder, Stile usw.

• weniger

Dabei werden die Styledateien nach verschiedenen Themengebieten unterteilt.

• Seiten

Auslagerungsdatei

• Router

Routenplanung

• util

Werkzeuge

• Komponenten

Die Ordner enthalten die Komponenten jedes Projekts. Das Komponentenverzeichnis enthält öffentliche Komponenten.

• statisch
  

Statische Ressourcen werden nicht von Webpack kompiliert. Legen Sie grundsätzlich externe Referenzdateien ab.

Webpack-Verpackungskonfiguration

Wie kompiliert man differenziell?

1.cross-env verwendet Umgebungsvariablen. Während der Kompilierungsphase werden verschiedene Komponenten entsprechend den für die Kompilierung übergebenen Variablen kompiliert.
Zuerst müssen wir die Datei package.json ändern

"Skripte": {
 "dev:gx": "umgebungsübergreifend BRANCH_ENV=gx-Knotenbuild/dev-server.js",
 "build:gx": "umgebungsübergreifende BRANCH_ENV=gx-Knotenbuild/build.js"
 },

Zu diesem Zeitpunkt können wir beim Kompilieren den entsprechenden Befehl eingeben, um die entsprechenden Umgebungsvariablen zu übergeben.
zB: npm run dev:gx übergibt BRANCH_ENV=gx.

2. Fügen Sie diese Umgebungsvariable in config/prod.env.js ein

modul.exporte = {
 NODE_ENV: '"Produktion"',
 API_PATH:'""',
 BRANCH_ENV: JSON.stringify(Prozess.Umgebung.BRANCH_ENV) || '"Basis"',
 ignoreCsrfToken:'"false"'
}

3.webpack.base.conf.js

 lösen: {
 Erweiterungen: ['', '.js', '.vue', '.json'],
 Fallback: [Pfad.Join(__Dirname, '../node_modules')],
 Alias: {
 "vue$": "vue/dist/vue.common.js",
 'src': Pfad.auflösen(__dirname, '../src'),
 'Assets': Pfad.Auflösen(__Verzeichnisname, '../src/assets/images/'+Prozess.Umgebung.BRANCH_ENV),
 'Komponenten': Pfad.Auflösen(__Verzeichnisname, '../src/Komponenten'),
 'componentsDif': Pfad.auflösen(__dirname, '../src/components/'+process.env.BRANCH_ENV),
 }
 },

Es ist ersichtlich, dass wir beim Einführen des Alias ​​die vom Kompilierungsbefehl eingefügten Umgebungsvariablen verwendet haben. Nehmen wir zum Beispiel an, der von mir eingegebene Kompilierbefehl lautet

npm-Ausführung build:gx

Zu diesem Zeitpunkt

„Assets“: Pfad.Auflösen(__Verzeichnisname, „../src/assets/images/“+Prozess.Umgebung.BRANCH_ENV)
// entspricht „assets“: path.resolve(__dirname, „../src/assets/images/gx“)

Seitenverweise

1. Bildreferenz

<img class="icon-arrow" src="~assets/arrow.png">
//Gemäß dem Kompilierungsbefehl. Die Bildreferenz lautet src/assets/images/gx/arrow.png

Hintergrund: URL (~assets/btn_1.png) keine Wiederholung;

PS: Denken Sie daran, das Zeichen ~ hinzuzufügen, wenn Sie einen Alias ​​verwenden

2. Komponentenreferenz

//Öffentliche Komponente importiere RuleTitle aus 'components/RuleTitle'
//Differenzierungskomponente importiere RuleContent aus 'componentsDif/RuleContent'

Zusammenfassen

Kurz gesagt besteht die Kernidee darin, dem Kompilierungsbefehl zu folgen, um Umgebungsvariablen zu übergeben, und die Konfiguration von Umgebungsvariablen und Aliasen zu verwenden, um die Verpackung zu differenzieren. Schwieriger ist die Steuerung der Granularität von Komponenten und die Aufteilung von Komponenten, die je nach Bedarf angepasst werden müssen.

Oben sind die Details eines Codesatzes auf Basis von Vue-cli zur Unterstützung mehrerer Projekte aufgeführt. Weitere Informationen zu einem Codesatz auf Basis von Vue-cli zur Unterstützung mehrerer Projekte finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!