Fragen zu Vorstellungsgesprächen im Bereich Front-End-Engineering

Welche Ergebnisse exportiert das folgende Modul?

exports.a = 'a';
module.exports.b = 'b';
this.c = 'c';
module.exports = {
      
      
  d: 'd'
}

Referenzantwort:

{
       
        d: 'd' }

Erzählen Sie mir etwas über Ihr Verständnis von Front-End-Engineering, Modularisierung und Komponentisierung?

Referenzantwort:

Unter den dreien stellt die Modularisierung die Grundlage dar. Ohne Modularisierung gäbe es keine Komponentisierung und kein Engineering.

Das Aufkommen der Modularisierung hat die beiden Hauptprobleme des Front-Ends gelöst: globale Verschmutzung und Abhängigkeitsverwirrung, was eine feine Aufteilung von Front-End-Projekten ermöglicht.

Das Aufkommen des Engineering hat den Widerspruch zwischen den inkonsistenten Anforderungen der Front-End-Entwicklungsumgebung und der Produktionsumgebung gelöst. In der Entwicklungsumgebung hoffen wir, dass die Codeverwendung so weit wie möglich unterteilt ist und das Codeformat so einheitlich und standardisiert wie möglich ist. In der Produktionsumgebung hoffen wir, dass der Code so weit wie möglich komprimiert und verschleiert wird, und die Größe wird so weit wie möglich optimiert. Das Aufkommen des Engineering soll diesen Widerspruch lösen. Es ermöglicht uns, bequem Code in der Entwicklungsumgebung zu schreiben und ihn dann zu verpacken, um den am besten geeigneten Code für die Produktionsumgebung zu generieren. Dadurch wird die Energie der Entwickler freigesetzt und Entwickler können sich einfach mehr auf das konzentrieren Entwicklungsumgebung.

Komponentenentwicklung ist ein Konzept, das von einigen Front-End-Frameworks bereitgestellt wird. Es unterteilt eine Webseite, eine Website oder sogar eine komplette Produktlinie in mehrere kleine Komponenten. Eine Komponente ist eine wiederverwendbare Einheit, die eine bestimmte volle Funktionalität des Bereichs enthält. Auf diese Weise erhält das Frontend die Möglichkeit, komplexe Anwendungen zu entwickeln.
Was ist der Unterschied zwischen Webpack und Gulp?

Live-Erklärung

Referenzantwort:

Webpack ist ein modulares Build-Tool und gulp ist ein Workflow-basiertes Build-Tool.

Webpack ist ein Paketierer. Es verwendet einen Eintrag als Ausgangspunkt, um das Abhängigkeitsdiagramm des gesamten Projekts zu erstellen, und packt und führt es dann zusammen, um das Paketierungsergebnis zu generieren.

Gulp ist ein Prozessmanager. Was jeder Schritt bewirkt, hängt vollständig davon ab, wie der Entwickler ihn konfiguriert. Jeder Schritt ist miteinander verbunden, um eine vollständige Build-Pipeline zu bilden.

Es gibt keinen Widerspruch zwischen den beiden. Sie können Webpack und Gulp gleichzeitig in einem Projekt verwenden und Webpack als Link in der Gulp-Pipeline verwenden.
Was ist der Unterschied zwischen dem Loader-Attribut und dem Plugins-Attribut im Webpack?

Referenzantwort:

Sie alle sind Erweiterungspunkte für die Webpack-Funktionalität.

Loader ist ein Loader, der hauptsächlich für die Codekonvertierung verwendet wird, z. B. JS-Code-Downgrade, CSS-Vorkompilierung, Modularisierung usw.

Plugins sind Plug-Ins. Jeder Link im Webpack-Verpackungsprozess stellt Hook-Funktionen bereit. Sie können diese Hook-Funktionen verwenden, um am Verpackungslebenszyklus teilzunehmen und bestimmte Funktionen von Webpack zu ändern oder hinzuzufügen, z. B. das Generieren von Seiten und CSS-Dateien sowie das Komprimieren von Verpackungsergebnissen , usw.
Was sind die Kernkonzepte von Webpack?
Referenzantwort:
- Lader
  
  Loader, der hauptsächlich für die Codekonvertierung verwendet wird, z. B. JS-Code-Downgrade, CSS-Vorkompilierung, Modularisierung usw.
- Plugin
  
  Plug-Ins: Jeder Link im Webpack-Verpackungsprozess stellt Hook-Funktionen bereit. Sie können diese Hook-Funktionen verwenden, um am Verpackungslebenszyklus teilzunehmen, bestimmte Funktionen von Webpack zu ändern oder hinzuzufügen, z. B. das Generieren von Seiten und CSS-Dateien, das Komprimieren von Verpackungsergebnissen usw .
- Modul
  
  Modul. Webpack behandelt alle Abhängigkeiten als Module, egal ob es sich um JS, CSS, HTML oder Bilder handelt, sie sind alle Module.
- Eintrag
  
  Eingang. Beim Konzept des Verpackungsprozesses verwendet Webpack eine oder mehrere Dateien als Einstiegspunkt für die Analyse der gesamten Abhängigkeitsbeziehung.
- Brocken
  
  Das Konzept des Verpackungsprozesses. Ein Block ist ein relativ unabhängiger Verpackungsprozess. Er verwendet eine oder mehrere Dateien als Einstiegspunkt, analysiert die gesamte Abhängigkeitsbeziehung und schließt schließlich die Verpackung und Zusammenführung ab.
- bündeln
  
  Ergebnisse der Webpack-Verpackung
- Baum zittert
  
  Optimierung des Baumrüttelns. Entfernen Sie in den gepackten Ergebnissen nicht verwendeten Code.
- HMR
  
  Heißes Update. Dies bedeutet, dass bei Codeänderungen während des Betriebs kein Neustart des gesamten Projekts erforderlich ist und nur der geänderte Teil des Codes aktualisiert wird.
- Entwicklungsserver
  
  Entwicklungsserver. Ein temporärer Server, der in die Entwicklungsumgebung integriert ist, um den Zugriff auf gepackte Ergebnisse zu hosten
Was ist der Unterschied zwischen CommonJS- und ES6-Modulen?
Referenzantwort:
1. CMJ ist ein Community-Standard und ESM ist ein offizieller Standard
2. CMJ ist Modularität, die durch API erreicht wird, und ESM ist Modularität, die durch neue Syntax erreicht wird
3. CMJ wird nur in der Knotenumgebung unterstützt und ESM wird in allen Umgebungen unterstützt.
4. CMJ ist eine dynamische Abhängigkeit und ESM unterstützt sowohl dynamische als auch statische Abhängigkeiten.
5. ESM verfügt beim Import über eine Symbolbindung, CMJ ist nur ein normaler Funktionsaufruf und eine normale Zuweisung
Wie implementiert man modulares asynchrones Laden in ES6?

Referenzantwort:

Verwenden Sie einfach den dynamischen Import. Nach dem Import erhalten Sie ein Versprechen. Nach Abschluss erhalten Sie ein Modulobjekt, das alle Exportergebnisse enthält.
Was sind die Implementierungsprinzipien mehrerer Hashes im Webpack?
Referenzantwort:
- Hash
  
  Hash bezieht sich auf die Konstruktion des gesamten Projekts. Solange es Dateiänderungen im Projekt gibt, ändert sich der Hash-Wert der gesamten Projektkonstruktion, und alle Dateien haben denselben Hash-Wert.
- Chunkhash
  
  Jeder Verpackungsprozess hat einen separaten Hashwert. Wenn ein Projekt mehrere Einträge hat, verwaltet jeder Eintrag seinen eigenen Chunkhash.
- Inhaltshash
  
  Jeder Dateiinhalt verfügt über einen separaten Hash-Wert, der sich auf den Inhalt der Verpackungsergebnisdatei bezieht. Solange der Dateiinhalt unverändert bleibt, bleibt der Inhaltshash unverändert.
Wenn Webpack Hash-Benennung verwendet, wird der Hash dann jedes Mal neu generiert?

Referenzantwort:

Gewohnheit. Es hängt davon ab, ob sich der zugehörige Inhalt geändert hat. Wenn keine Änderung vorliegt, ändert sich der Hash nicht. Insbesondere bezieht sich Contenthash auf den Inhalt der jeweiligen Verpackungsdatei, Chunthash auf den Inhalt, der ab einem bestimmten Eintrag am Verpackungsprozess beteiligt ist, und Hash auf den Inhalt aller Module im gesamten Projekt.
Wie werden Bilder im Webpack verarbeitet? (Douyin Live-Übertragung)

Referenzantwort:

Webpack selbst verarbeitet keine Bilder. Es analysiert den Bildinhalt als JS-Code. Das Ergebnis ist ein Fehler und ein Verpackungsfehler. Wenn Sie Bilder verarbeiten möchten, müssen Sie sie über den Loader verarbeiten. Unter anderem konvertiert der URL-Loader das Bild in die Base64-Kodierung und ruft dann eine Daten-URL ab, und der File-Loader generiert das Bild im Verpackungsverzeichnis und ruft dann einen Ressourcenpfad ab. Aber egal um welche Art von Loader es sich handelt, ihre Kernfunktion besteht darin, den Bildinhalt in JS-Code umzuwandeln, denn nur wenn er in JS-Code konvertiert wird, kann Webpack ihn erkennen.
Warum wird der Stil am Anfang und das Skript am Ende des von Webpack gepackten HTML platziert?

Hinweis: Bei der Formulierung dieser Frage liegt ein Problem vor. Webpack selbst packt kein HTML. Im Gegenteil, wenn es auf HTML-Code stößt, schlägt das Packen direkt fehl, da Webpack selbst nur JS erkennen kann. Der Grund, warum HTML-Dateien gepackt werden können, liegt in der Rolle von Plug-Ins oder Loadern. Unter ihnen ist das gebräuchlichste Plug-In das HTML-Webpack-Plugin. Die korrekte Aussage dieser Frage sollte also lauten: „Warum wird der Stil am Anfang und das Skript am Ende des vom HTML-Webpack-Plugin gepackten HTML platziert?“

Referenzantwort:

Wenn der Browser HTML analysiert, analysiert er es von oben nach unten. Wenn er auf Stile und JS stößt, stoppt er die HTML-Analyse und wechselt zum Parsen von Stilen und zur Ausführung von JS. Wir hoffen oft, dass der HTML-Code analysiert wird, nachdem die Stilanalyse der Seite abgeschlossen ist, um ein Flackern der Seite zu vermeiden. Auf dieser Grundlage sollte der Stil oben platziert werden. Im Gegenteil, wir hoffen, JS nach der Analyse des HTML auszuführen , damit der Benutzer so schnell wie möglich auf die Seite zugreifen kann, um die Seite anzuzeigen, und JS außerdem ermöglicht, bei der Ausführung den vollständigen DOM-Baum abzurufen. Auf dieser Grundlage sollte der JS-Code unten platziert werden.

Die Attribute „async“ und „defer“ erscheinen jedoch in HTML5. Durch die Verwendung dieser Attribute können JS-Probleme besser gelöst werden. Wir können das Skript oben platzieren, damit der Browser es so schnell wie möglich herunterladen kann, die Ausführung jedoch verzögert wird. Tatsächlich ist dies in neuen Versionen des HTML-Webpack-Plugins bereits der Fall.
Wie konfiguriere ich Webpack so, dass die Entwicklungsumgebung kein CDN und die Produktionsumgebung CDN verwendet?
Um ein CDN zu konfigurieren, sind zwei Schritte erforderlich:
1. Fügen Sie einen CDN-Verweis direkt zur HTML-Vorlage hinzu
2. Fügen Sie in der Webpack-Konfiguration externalsdie Konfiguration hinzu, um Webpack anzuweisen, die Module nicht zu packen und stattdessen globale Variablen zu verwenden.
Wenn Sie CDN nicht in der Entwicklungsumgebung verwenden möchten, müssen Sie lediglich verschiedene Umgebungen anhand von Umgebungsvariablen beurteilen und unterschiedliche Verpackungsprozesse durchführen.
1. Verwenden Sie die EJS-Vorlagensyntax zur Beurteilung von HTML-Vorlagen und führen Sie CDN nur in der Produktionsumgebung ein
2. In der Webpack-Konfiguration können Sie anhand der Umgebungsvariablen in bestimmen, ob die Konfiguration process.envverwendet werden sollexternals
3. package.jsonLegen Sie im Skript verschiedene Umgebungsvariablen fest, um die Paketierung oder den Entwicklungsstart abzuschließen .
Bitte stellen Sie den Workflow des Tree-Shaking in Webpack4 vor?

Empfohlene Lektüre: https://tsejx.github.io/webpack-guidebook/principle-analysis/operational-principle/tree-shaking
Referenzantwort:

Tree-Shaking unterstützt nur die statische Importsyntax von ESM. Tree-Shaking wird für den dynamischen Import in CMJ oder ESM nicht unterstützt.

Der spezifische Prozess ist hauptsächlich in zwei Schritte unterteilt: Markieren und Löschen
1. markieren
  
  Wenn Webpack Abhängigkeiten analysiert, verwendet es Kommentare, um Importe und Exporte zu markieren. Exporte im Modul, die nicht von anderen Modulen verwendet werden, werden als nicht verwendeter Harmony-Export markiert.
2. löschen
  
  Führen Sie dann im Schritt Uglifyjs (oder einem anderen ähnlichen Tool) eine Codeoptimierung durch und löschen Sie den als nutzlos markierten Code.
Sagen Sie mir, welche Rolle der Webpack-Loader spielt?

Referenzantwort:

Wird zum Konvertieren von Codes verwendet. Manchmal liegt es daran, dass Webpack bestimmte Inhalte wie Bilder, CSS usw. nicht erkennen kann und vom Loader in JS-Code konvertiert werden muss. Manchmal liegt es daran, dass ein Code eine spezielle Verarbeitung erfordert, z. B. eine JS-Kompatibilitätsverarbeitung, die vom Loader weiter konvertiert werden muss. Unabhängig von der Situation hat der Loader nur eine Rolle, nämlich die Konvertierung des Codes.
Wenn während des Entwicklungsprozesses ein bestehendes Modul erweitert werden muss, wie kann die Entwicklung durchgeführt werden, um sicherzustellen, dass der Aufrufer nicht beeinträchtigt wird?

Referenzantwort:

Tatsächlich handelt es sich um ein Versionsverwaltungsproblem.

Wenn dieses Modul-Upgrade nur einige Fehler behebt, kann es als Patch-Version aktualisiert werden, ohne dass sich dies auf die Hauptversion und die Nebenversionsnummer auswirkt.

Wenn dieses Modul-Upgrade einige neue Inhalte hinzufügt und vollständig mit der vorherigen API kompatibel ist, kann es als Nebenversion aktualisiert werden.

Wenn dieses Modul-Upgrade die vorherige API ändert, wird sie als Hauptversion aktualisiert.

Lassen Sie das Projekt bei der Entwicklung eines Projekts von der Hauptversion des Moduls abhängen. Wenn das Modul aktualisiert wird, kann das Projekt daher die Modulversion problemlos aktualisieren, ohne Code zu ändern, solange die Hauptversion nicht aktualisiert wird. Wenn es sich jedoch um ein größeres Versionsupdate handelt, kann das Projekt dieses Versionsupdate vollständig ignorieren und weiterhin die alte Version verwenden, ohne Code zu ändern. Natürlich kann auch die Hauptversion aktualisiert werden, es sind jedoch Codeänderungen erforderlich, was einem Upgrade gleichkommt vue2. Der Wechsel zu vue3 wird viele Änderungen mit sich bringen.

Bei der Entwicklung von Modulen muss die API zu Beginn sorgfältig entworfen werden. Versuchen Sie sicherzustellen, dass die API-Schnittstelle stabil ist, und ändern Sie die Hauptversionsnummer nicht häufig. Wenn Sie die Hauptversion wirklich aktualisieren möchten, müssen Sie zwei Versionen (neue Hauptversion, alte Hauptversion) für einen bestimmten Zeitraum gleichzeitig verwalten, um anderen Projekten eine gewisse Zeit für das Upgrade zu geben.
Was ist der Unterschied zwischen Export und Exportstandard?

Referenzantwort:

Export ist ein normaler Export, auch benannter Export genannt. Wie der Name schon sagt, müssen die exportierten Daten benannt werden, z. B. Variablendefinitionen und Funktionsdefinitionen. Im exportierten Modulobjekt ist der Name der Attributname des Modulobjekts. In einem Modul können mehrere benannte Exporte vorhanden sein

export default ist der Standardexport. Der Name im Modulobjekt ist als Standard festgelegt, sodass keine Benennung erforderlich ist. Normalerweise wird ein Ausdruck oder ein Literal exportiert. In einem Modul kann es nur einen Standardexport geben.
Was ist das Verpackungsprinzip von Webpack?
Referenzantwort:
1. Initialisierungsparameter : Parameter aus Konfigurationsdateien und Shell-Anweisungen lesen und zusammenführen, um endgültige Parameter zu erhalten
2. Kompilierung starten : Initialisieren Sie das Compiler-Objekt mit den im vorherigen Schritt erhaltenen Parametern, laden Sie alle konfigurierten Plug-Ins und führen Sie rundie Methode des Objekts aus, um die Kompilierung zu starten.
3. Eintrag ermittelnentry : Finden Sie alle Eintragsdateien entsprechend der Konfiguration
4. Kompilieren Sie das Modul : Rufen Sie ausgehend von der Eintragsdatei alle Konfigurationen auf, loaderdie für die Übersetzung des Moduls konfiguriert sind, und konvertieren Sie dann den übersetzten Inhalt in AST. Finden Sie die Module heraus, von denen das Modul abhängt, indem Sie den AST analysieren, und fahren Sie mit diesem Schritt fort, bis alle Einträge vorliegen. Abhängige 递归Dateien werden nach diesem Verarbeitungsschritt verarbeitet
5. Vollständige Modulkompilierung : Nach der Übersetzung aller Module mit Schritt 4 loaderwerden der endgültige übersetzte Inhalt jedes Moduls und die Beziehungen zwischen ihnen erhalten.依赖关系图
6. Ausgaberessourcen : Montieren Sie sie entsprechend den Abhängigkeiten zwischen dem Eintrag und dem Modul in mehrere Module Chunk, konvertieren Sie dann jeden Chunk in eine separate Datei und fügen Sie ihn der Ausgabeliste hinzu. Dieser Schritt ist die letzte Möglichkeit, den Ausgabeinhalt zu ändern.
7. Ausgabe abgeschlossen : Bestimmen Sie nach dem Bestimmen des Ausgabeinhalts den Ausgabepfad und den Dateinamen gemäß der Konfiguration und schreiben Sie den Dateiinhalt in das Dateisystem
Was ist das Prinzip des Webpack-Hot-Updates?
Referenzantwort:

Wenn das Hot-Update aktiviert ist, wird ein Websocket-Skript in die Seite eingebettet. Gleichzeitig stellt der Entwicklungsserver auch eine Websocket-Kommunikation mit dem Client her. Wenn sich der Quellcode ändert, führt Webpack die folgende Verarbeitung durch:
1. Webpack neu verpacken
2. webpack-dev-server erkennt Moduländerungen und benachrichtigt den Client über webscoket, dass die Änderungen vorgenommen wurden
3. Nach Erhalt der Nachricht sendet der Client über Ajax eine Anfrage an den Entwicklungsserver und fordert vom Server eine JSON-Datei mit dem in der Vergangenheit gepackten Hash-Wert an.
4. Der Server teilt dem Client mit, welche Module sich geändert haben, und teilt dem Client auch den neuen Hashwert mit, der durch diese Verpackung generiert wird.
5. Der Client verwendet erneut den vergangenen Hashwert, um das geänderte Modul in JSONP anzufordern.
6. Der Server antwortet mit einem Funktionsaufruf, der den Code des Moduls aktualisiert
7. Zu diesem Zeitpunkt wurde der Modulcode aktualisiert. Der Client führt die Callback-Funktion nach der entsprechenden Moduländerung gemäß der vorherigen Listening-Konfiguration aus.
Wie kann die Verpackungsgeschwindigkeit von Webpack optimiert werden?
Referenzantwort:
1. noParse
  
  Viele Bibliotheken von Drittanbietern selbst sind bereits gepackter Code. Diese Art von Code muss nicht analysiert werden. Sie können die noParse-Konfiguration verwenden, um diese Bibliotheken von Drittanbietern auszuschließen.
2. Äußerlichkeiten
  
  CDN kann für einige bekannte Bibliotheken von Drittanbietern verwendet werden. Diese Bibliotheken können so konfiguriert werden, dass sie nicht über externe Pakete gepackt werden.
3. Beschränken Sie den Umfang des Loaders
  
  Wenn Sie den Loader verwenden, können Sie durch Ausschließen einige unnötige Kompilierungen ausschließen. Babel-Loader muss beispielsweise die gepackten Bibliotheken von Drittanbietern nicht herunterstufen und kann ausgeschlossen werden.
4. Loader-Cache aktivieren
  
  Sie können cache-loaderzwischengespeicherte Loader-Kompilierungsergebnisse verwenden, um eine wiederholte Kompilierung zu vermeiden, wenn sich der Quellcode nicht geändert hat.
5. Aktivieren Sie die Multithread-Kompilierung
  
  Sie können thread-loaderdie Multithread-Kompilierung verwenden, um die Kompilierungseffizienz zu verbessern.
6. Dynamische Link Bibliothek
  
  Für einige Bibliotheken von Drittanbietern, die gepackt werden müssen, können Sie die DLL verwenden, um sie separat zu packen. Anschließend integriert DLLPlugin sie in das aktuelle Projekt, sodass diese Bibliotheken während der Entwicklung nicht häufig gepackt werden müssen.
Wie implementiert Webpack den dynamischen Import?

Referenzantwort:

Wenn im Code eine dynamische Importanweisung auftritt, ordnet Webpack das importierte Modul und seine Abhängigkeiten einem separaten Block zum Packen zu und bildet so ein separates Packergebnis. Die dynamisch importierte Anweisung wird in einen gewöhnlichen Funktionsaufruf kompiliert. Wenn die Funktion ausgeführt wird, verwendet sie JSONP, um das getrennte Paket dynamisch in die Modulsammlung zu laden.
Lassen Sie uns darüber sprechen, welche Arten von Datei-Fingerabdrücken das Webpack hat.
Referenzantwort:
- Hash
  
  Hash bezieht sich auf die Konstruktion des gesamten Projekts. Solange es Dateiänderungen im Projekt gibt, ändert sich der Hash-Wert der gesamten Projektkonstruktion, und alle Dateien haben denselben Hash-Wert.
- Chunkhash
  
  Jeder Verpackungsprozess hat einen separaten Hashwert. Wenn ein Projekt mehrere Einträge hat, verwaltet jeder Eintrag seinen eigenen Chunkhash.
- Inhaltshash
  
  Jeder Dateiinhalt verfügt über einen separaten Hash-Wert, der sich auf den Inhalt der Verpackungsergebnisdatei bezieht. Solange der Dateiinhalt unverändert bleibt, bleibt der Inhaltshash unverändert.
Was sind die am häufigsten verwendeten Webpack-Loader?
Referenzantwort:
- Cache-Loader: Kompilierungs-Cache aktivieren
- Thread-Loader: Multithread-Kompilierung aktivieren
- CSS-Loader: CSS-Code in JS kompilieren
- Dateilader: Speichern Sie die Datei im Ausgabeverzeichnis und konvertieren Sie den Dateiinhalt in einen Dateipfad
- postcss-loader: CSS-Code mit postcss kompilieren
- URL-Loader: Dateiinhalt in Daten-URL konvertieren
- Less-Loader: Konvertieren Sie weniger Code in CSS-Code
- Sass-Loader: Konvertieren Sie Sass-Code in CSS-Code
- vue-loader: Kompilieren Sie einzelne Dateikomponenten
- babel-loader: JS-Code herunterstufen
Sagen Sie mir, was sind die am häufigsten verwendeten Plug-Ins für Webpack?
Referenzantwort:
- clean-webpack-plugin: Löschen Sie das Ausgabeverzeichnis
- copy-webpack-plugin: Dateien in das Ausgabeverzeichnis kopieren
- html-webpack-plugin: HTML-Dateien generieren
- Mini-CSS-Extract-Plugin: Ein Plug-In, das CSS in separate Dateien packt
- HotModuleReplacementPlugin: Hot-Update-Plugin
- purifycss-webpack: Unbrauchbaren CSS-Code entfernen
- Optimize-CSS-Assets-Webpack-Plugin: CSS-Verpackungsvolumen optimieren
- uglify-js-plugin: JS-Code komprimieren und verschleiern
- Komprimierungs-Webpack-Plugin: GZIP-Komprimierung
- Webpack-Bundle-Analyzer: Analyse der Verpackungsergebnisse
Welche Probleme gibt es bei der Verwendung von babel-loader und wie kann dieser optimiert werden?
Referenzantwort:
1. Wenn keine spezielle Verarbeitung durchgeführt wird, stuft babel-loader alle passenden Module herunter, was für die Bibliotheken von Drittanbietern, die sich bereits mit Kompatibilitätsproblemen befasst haben, überflüssig ist. Daher können Sie die Ausschlusskonfiguration verwenden, um diese Bibliotheken von Drittanbietern auszuschließen.
2. In der alten Version von babel-loader ist die Konvertierung in ESM standardmäßig aktiviert, was dazu führt, dass das Tree Shaking von Webpack ungültig wird. Da Tree Shaking die ESM-Syntax beibehalten muss, muss die ESM-Konvertierung deaktiviert werden babel-loader. In der neuen Version ist es standardmäßig deaktiviert.
Wie kompiliert Babel Klassen?
Referenzantwort:

Im Wesentlichen wird die Klassensyntax in eine gewöhnliche Konstruktordefinition konvertiert und die folgende Verarbeitung durchgeführt:
1. Erkennung dessen, worauf dies hinweist, hinzugefügt
2. Machen Sie Prototypen und statische Methoden nicht aufzählbar
3. Fügen Sie den gesamten Code in die Funktion zur sofortigen Ausführung ein und geben Sie nach der Ausführung den Konstruktor selbst zurück
Erklären Sie, welche Rolle Babel-Polyfill spielt.

veranschaulichen:

babel-polyfill ist bereits ein sehr altes Projekt. Babel unterstützt es ab Version 7.4 nicht mehr und verwendet stattdessen die leistungsfähigeren Core-JS. Diese Frage eignet sich auch für die Frage „Welche Rolle spielen Core-JS?“

Referenzantwort:

Standardmäßig konvertiert babel selbst nur neue Syntax und verarbeitet keine neuen APIs. Da neue APIs in der alten Umgebung nicht unterstützt werden können, beispielsweise IE6 die Fetch-API nicht unterstützen kann, ist ein Patch erforderlich, um die neue API unter Verwendung der Funktionen der alten Sprache zu implementieren. Hierzu wird babel-polyfill verwendet.
Erklären Sie, wofür der &-Operator von less verwendet wird.

Referenzantwort:

Der Inhalt nach dem kaufmännischen Und wird mit dem übergeordneten Selektor zusammengeführt, d. h. in der Mitte werden keine Leerzeichen hinzugefügt.
Welche Optimierungsaspekte können im Frontend Engineering durchgeführt werden?
Referenzantwort:
1. Optimierung der Übertragungsleistung
  - Komprimierung und Verschleierung
    
    Verwenden Sie Uglifyjs oder andere ähnliche Tools, um die Verpackungsergebnisse zu komprimieren und zu verschleiern, wodurch die Paketgröße effektiv reduziert werden kann.
  - Baum zittert
    
    Verwenden Sie ESM so oft wie möglich im Projekt, um die Optimierung des Baumschüttelns effektiv zu nutzen und die Paketgröße zu reduzieren.
  - Gemeinsame Module extrahieren
    
    Packen Sie einige öffentliche Codes separat, damit Sie den Browser-Cache vollständig nutzen können. Nach anderen Codeänderungen ist der öffentliche Code nicht betroffen und der Browser kann den öffentlichen Code direkt aus dem Cache finden.
    
    Es gibt viele spezifische Methoden wie DLL, SplitChunks
  - Asynchrones Laden
    
    Bei einigen Modulen, deren Ausführung verzögert werden kann, können Sie sie mithilfe des dynamischen Imports asynchron laden, sodass sie in den Verpackungsergebnissen ein separates Paket bilden. Gleichzeitig müssen sie nicht geladen werden, wenn die Seite geladen wird Zunächst wird die Seite analysiert, aber nachdem die Seitenanalyse abgeschlossen ist, werden sie während der Ausführung von JS geladen.
    
    Dies kann die Reaktionsfähigkeit der Seite deutlich verbessern und ist besonders bei Single-Page-Anwendungen nützlich.
  - CDN
    
    Die Verwendung von CDN für einige bekannte Bibliotheken kann nicht nur Verpackungszeit sparen, sondern auch die Ladegeschwindigkeit der Bibliothek erheblich verbessern.
  - gzip
    
    Derzeit unterstützen Browser im Allgemeinen das gzip-Format, sodass statische Dateien mit gzip komprimiert werden können.
  - Umgebungsanpassung
    
    Einige Paketergebnisse enthalten viel Kompatibilitätscode, dieser Code ist jedoch in neuen Browserversionen bedeutungslos. Daher können Browser in mehrere Ebenen unterteilt werden und Browsern auf verschiedenen Ebenen können unterschiedliche Verpackungsergebnisse gegeben werden.
2. Optimierung des Verpackungsprozesses
  - noParse
    
    Viele Bibliotheken von Drittanbietern selbst sind bereits gepackter Code. Diese Art von Code muss nicht analysiert werden. Sie können die noParse-Konfiguration verwenden, um diese Bibliotheken von Drittanbietern auszuschließen.
  - Äußerlichkeiten
    
    CDN kann für einige bekannte Bibliotheken von Drittanbietern verwendet werden. Diese Bibliotheken können so konfiguriert werden, dass sie nicht über externe Pakete gepackt werden.
  - Beschränken Sie den Umfang des Loaders
    
    Wenn Sie den Loader verwenden, können Sie durch Ausschließen einige unnötige Kompilierungen ausschließen. Babel-Loader muss beispielsweise die gepackten Bibliotheken von Drittanbietern nicht herunterstufen und kann ausgeschlossen werden.
  - Loader-Cache aktivieren
    
    Sie können cache-loaderzwischengespeicherte Loader-Kompilierungsergebnisse verwenden, um eine wiederholte Kompilierung zu vermeiden, wenn sich der Quellcode nicht geändert hat.
  - Aktivieren Sie die Multithread-Kompilierung
    
    Sie können thread-loaderdie Multithread-Kompilierung verwenden, um die Kompilierungseffizienz zu verbessern.
  - Dynamische Link Bibliothek
    
    Für einige Bibliotheken von Drittanbietern, die gepackt werden müssen, können Sie die DLL verwenden, um sie separat zu packen. Anschließend integriert DLLPlugin sie in das aktuelle Projekt, sodass diese Bibliotheken während der Entwicklung nicht häufig gepackt werden müssen.
3. Optimierung der Entwicklungserfahrung
  - Fussel
    
    Verwenden Sie Tools wie eslint und stylelint, um sicherzustellen, dass der Codestil des Teams konsistent ist
  - HMR
    
    Verwenden Sie Hot Replacement, um Statusverluste durch Seitenaktualisierungen zu vermeiden und die Entwicklungserfahrung zu verbessern
Wenn ein Projektpaket besonders groß ist – wie kann man es optimieren?
Referenzantwort:
1. CDN
  
  Wenn im Projekt einige bekannte Bibliotheken von Drittanbietern verwendet werden, können Sie die Verwendung von CDN anstelle der Paketierung in Betracht ziehen.
2. Gemeinsame Module extrahieren
  
  Wenn im Projekt einige große öffentliche Bibliotheken verwendet werden, können Sie erwägen, diese aufzuteilen und separat zu packen.
3. Asynchrones Laden
  
  Für die Module, die nicht zu Beginn ausgeführt werden müssen, können Sie den dynamischen Import in Betracht ziehen, um sie asynchron zu laden und so die Größe des Hauptpakets zu minimieren.
4. Komprimierung, Verschleierung
5. Baum zittert
  
  Versuchen Sie, die ESM-Syntax für den Import und Export zu verwenden und nutzen Sie Tree Shaking voll aus, um nutzlosen Code zu entfernen.
6. gzip
  
  Aktivieren Sie die gzip-Komprimierung, um die Paketgröße weiter zu reduzieren
7. Umgebungsanpassung
  
  Einige Paketergebnisse enthalten viel Kompatibilitätscode, dieser Code ist jedoch in neuen Browserversionen bedeutungslos. Daher können Browser in mehrere Ebenen unterteilt werden und Browsern auf verschiedenen Ebenen können unterschiedliche Verpackungsergebnisse gegeben werden.
Wie optimiert Webpack das Laden des ersten Bildschirms?
Referenzantwort:
1. CDN
  
  Wenn im Projekt einige bekannte Bibliotheken von Drittanbietern verwendet werden, können Sie die Verwendung von CDN anstelle der Paketierung in Betracht ziehen.
2. Gemeinsame Module extrahieren
  
  Wenn im Projekt einige große öffentliche Bibliotheken verwendet werden, können Sie erwägen, diese aufzuteilen und separat zu packen.
3. Asynchrones Laden
  
  Für die Module, die nicht zu Beginn ausgeführt werden müssen, können Sie den dynamischen Import in Betracht ziehen, um sie asynchron zu laden und so die Größe des Hauptpakets zu minimieren.
4. Komprimierung, Verschleierung
5. Baum zittert
  
  Versuchen Sie, die ESM-Syntax für den Import und Export zu verwenden und nutzen Sie Tree Shaking voll aus, um nutzlosen Code zu entfernen.
6. gzip
  
  Aktivieren Sie die gzip-Komprimierung, um die Paketgröße weiter zu reduzieren
7. Umgebungsanpassung
  
  Einige Paketergebnisse enthalten viel Kompatibilitätscode, dieser Code ist jedoch in neuen Browserversionen bedeutungslos. Daher können Browser in mehrere Ebenen unterteilt werden und Browsern auf verschiedenen Ebenen können unterschiedliche Verpackungsergebnisse gegeben werden.
Webpack-Scope-Hebung einführen?

Referenzantwort:

Scope-Hoisting ist eine integrierte Webpack-Optimierung. Es handelt sich um eine Optimierung für Module, die beim Packen in der Produktionsumgebung automatisch aktiviert wird.

Wenn das Anheben des Bereichs nicht aktiviert ist, platziert Webpack den Code jedes Moduls in einer unabhängigen Funktionsumgebung, um sicherzustellen, dass sich die Bereiche der Module nicht gegenseitig beeinträchtigen.

Die Rolle des Bereichshebens ist genau das Gegenteil: Es besteht darin, den Code mehrerer Module zur Ausführung in einer Funktionsumgebung zusammenzuführen. Während dieses Vorgangs führt Webpack die Modulcodes in der richtigen Reihenfolge zusammen und behandelt die beteiligten Bezeichner entsprechend, um doppelte Namen zu vermeiden.

Dies hat den Vorteil, dass Funktionsaufrufe reduziert, die Betriebseffizienz verbessert und auch das Verpackungsvolumen reduziert werden.

Es gibt jedoch Voraussetzungen, damit das Scope-Heben aktiviert wird. Wenn einige Module mehrfach von anderen Modulen referenziert werden oder dynamisch importierte Module verwendet werden oder Nicht-ESM-Module verwendet werden, findet das Scope-Heben nicht statt.
Wie funktioniert der Webpack-Proxy? Warum kann er domänenübergreifende Probleme lösen?

veranschaulichen:

Streng genommen ist Webpack nur ein Verpackungstool und hat weder die Funktion eines Proxys noch die Funktion eines Servers. Der Grund, warum Sie die Proxy-Konfiguration in Webpack verwenden können, liegt in den Funktionen eines seiner Plug-Ins, webpack-dev-server.

Daher sollte diese Frage gestellt werden: „Wie funktioniert der Webpack-Dev-Server? Warum kann er domänenübergreifende Probleme lösen?“

Referenzantwort:

Zunächst einmal ist die Proxy-Konfiguration für die Entwicklungsumgebung gedacht und hat für die Produktionsumgebung keine Bedeutung.

Wenn wir den Entwicklungsserver über den Webpack-Dev-Server starten, können alle Verpackungsressourcen durch Zugriff auf den Entwicklungsserver abgerufen werden.

Gleichzeitig haben wir einen Proxy konfiguriert. Wenn wir eine bestimmte Adresse vom Entwicklungsserver anfordern, leitet der Entwicklungsserver diese per Proxy an die Zieladresse weiter. Daher können nachfolgende Anfragen an die Proxy-Adresse in direkte Anfragen an den Entwicklungsserver geändert werden.

Auf diese Weise haben die Domäne, in der wir die statische Seite anfordern, und die Domäne, in der wir die Proxy-Adresse anfordern, dieselbe Quelle. Da beide den Entwicklungsserver anfordern, treten keine domänenübergreifenden Probleme auf.
Müssen alle Projekte, die auf dieser Komponentenbibliothek basieren, aktualisiert werden, wenn die Komponente veröffentlicht wird?

Referenzantwort:

Tatsächlich handelt es sich um ein Versionsverwaltungsproblem.

Wenn dieses Modul-Upgrade nur einige Fehler behebt, kann es als Patch-Version aktualisiert werden, ohne dass sich dies auf die Hauptversion und die Nebenversionsnummer auswirkt.

Wenn dieses Modul-Upgrade einige neue Inhalte hinzufügt und vollständig mit der vorherigen API kompatibel ist, kann es als Nebenversion aktualisiert werden.

Wenn dieses Modul-Upgrade die vorherige API ändert, wird sie als Hauptversion aktualisiert.

Lassen Sie das Projekt bei der Entwicklung eines Projekts von der Hauptversion des Moduls abhängen. Wenn das Modul aktualisiert wird, kann das Projekt daher die Modulversion problemlos aktualisieren, ohne Code zu ändern, solange die Hauptversion nicht aktualisiert wird. Wenn es sich jedoch um ein größeres Versionsupdate handelt, kann das Projekt dieses Versionsupdate vollständig ignorieren und weiterhin die alte Version verwenden, ohne Code zu ändern. Natürlich kann auch die Hauptversion aktualisiert werden, es sind jedoch Codeänderungen erforderlich, was einem Upgrade gleichkommt vue2. Der Wechsel zu vue3 wird viele Änderungen mit sich bringen.

Bei der Entwicklung von Modulen muss die API zu Beginn sorgfältig entworfen werden. Versuchen Sie sicherzustellen, dass die API-Schnittstelle stabil ist, und ändern Sie die Hauptversionsnummer nicht häufig. Wenn Sie die Hauptversion wirklich aktualisieren möchten, müssen Sie zwei Versionen (neue Hauptversion, alte Hauptversion) für einen bestimmten Zeitraum gleichzeitig verwalten, um anderen Projekten eine gewisse Zeit für das Upgrade zu geben.
Wie entwerfe ich öffentliche Komponenten während des Entwicklungsprozesses? (ByteDance)
Referenzantwort:
1. Bestimmen Sie Nutzungsszenarien
  
  Klären Sie, wie der Bedarf für diese öffentliche Komponente entsteht, welche aktuellen Nutzungsszenarien sie hat und welche Nutzungsszenarien in der Zukunft auftreten können.
  
  Es ist sehr wichtig, das Nutzungsszenario zu klären. Es bestimmt, wo die Nutzungsgrenze dieser Komponente liegt und inwieweit sie universell ist, und bestimmt so die Schwierigkeit bei der Entwicklung dieser Komponente.
2. Funktionalität der Designkomponente
  
  Entwerfen Sie die Eigenschaften, Ereignisse und Nutzungsdokumentation der Komponente basierend auf ihren Nutzungsszenarien.
3. Testfall
  
  Schreiben Sie Komponententestfälle gemäß der Nutzungsdokumentation
4. Komplette Entwicklung
  
  Komplette Entwicklung gemäß Gebrauchsanweisungsdokumenten und Testfällen
Sagen Sie mir, welche Webpack-Optimierungen im Projekt vorgenommen wurden (ByteDance)
Referenzantwort:
1. Optimierung der Übertragungsleistung
  - Komprimierung und Verschleierung
    
    Verwenden Sie Uglifyjs oder andere ähnliche Tools, um die Verpackungsergebnisse zu komprimieren und zu verschleiern, wodurch die Paketgröße effektiv reduziert werden kann.
  - Baum zittert
    
    Verwenden Sie ESM so oft wie möglich im Projekt, um die Optimierung des Baumschüttelns effektiv zu nutzen und die Paketgröße zu reduzieren.
  - Gemeinsame Module extrahieren
    
    Packen Sie einige öffentliche Codes separat, damit Sie den Browser-Cache vollständig nutzen können. Nach anderen Codeänderungen ist der öffentliche Code nicht betroffen und der Browser kann den öffentlichen Code direkt aus dem Cache finden.
    
    Es gibt viele spezifische Methoden wie DLL, SplitChunks
  - Asynchrones Laden
    
    Bei einigen Modulen, deren Ausführung verzögert werden kann, können Sie sie mithilfe des dynamischen Imports asynchron laden, sodass sie in den Verpackungsergebnissen ein separates Paket bilden. Gleichzeitig müssen sie nicht geladen werden, wenn die Seite geladen wird Zunächst wird die Seite analysiert, aber nachdem die Seitenanalyse abgeschlossen ist, werden sie während der Ausführung von JS geladen.
    
    Dies kann die Reaktionsfähigkeit der Seite deutlich verbessern und ist besonders bei Single-Page-Anwendungen nützlich.
  - CDN
    
    Die Verwendung von CDN für einige bekannte Bibliotheken kann nicht nur Verpackungszeit sparen, sondern auch die Ladegeschwindigkeit der Bibliothek erheblich verbessern.
  - gzip
    
    Derzeit unterstützen Browser im Allgemeinen das gzip-Format, sodass statische Dateien mit gzip komprimiert werden können.
  - Umgebungsanpassung
    
    Einige Paketergebnisse enthalten viel Kompatibilitätscode, dieser Code ist jedoch in neuen Browserversionen bedeutungslos. Daher können Browser in mehrere Ebenen unterteilt werden und Browsern auf verschiedenen Ebenen können unterschiedliche Verpackungsergebnisse gegeben werden.
2. Optimierung des Verpackungsprozesses
  - noParse
    
    Viele Bibliotheken von Drittanbietern selbst sind bereits gepackter Code. Diese Art von Code muss nicht analysiert werden. Sie können die noParse-Konfiguration verwenden, um diese Bibliotheken von Drittanbietern auszuschließen.
  - Äußerlichkeiten
    
    CDN kann für einige bekannte Bibliotheken von Drittanbietern verwendet werden. Diese Bibliotheken können so konfiguriert werden, dass sie nicht über externe Pakete gepackt werden.
  - Beschränken Sie den Umfang des Loaders
    
    Wenn Sie den Loader verwenden, können Sie durch Ausschließen einige unnötige Kompilierungen ausschließen. Babel-Loader muss beispielsweise die gepackten Bibliotheken von Drittanbietern nicht herunterstufen und kann ausgeschlossen werden.
  - Loader-Cache aktivieren
    
    Sie können cache-loaderzwischengespeicherte Loader-Kompilierungsergebnisse verwenden, um eine wiederholte Kompilierung zu vermeiden, wenn sich der Quellcode nicht geändert hat.
  - Aktivieren Sie die Multithread-Kompilierung
    
    Sie können thread-loaderdie Multithread-Kompilierung verwenden, um die Kompilierungseffizienz zu verbessern.
  - Dynamische Link Bibliothek
    
    Für einige Bibliotheken von Drittanbietern, die gepackt werden müssen, können Sie die DLL verwenden, um sie separat zu packen. Anschließend integriert DLLPlugin sie in das aktuelle Projekt, sodass diese Bibliotheken während der Entwicklung nicht häufig gepackt werden müssen.
3. Optimierung der Entwicklungserfahrung
  - Fussel
    
    Verwenden Sie Tools wie eslint und stylelint, um sicherzustellen, dass der Codestil des Teams konsistent ist
  - HMR
    
    Verwenden Sie Hot Replacement, um Statusverluste durch Seitenaktualisierungen zu vermeiden und die Entwicklungserfahrung zu verbessern
Lassen Sie uns im Detail über die Nutzungsszenarien und Nutzungsmethoden von Splithunksplugin sprechen. (ByteDance)
Referenzantwort:
1. Öffentliches Modul
  
  Einige mehrseitige Anwendungen verfügen beispielsweise über mehrere Einträge und bilden somit mehrere Blöcke, und in diesen Blöcken werden einige gemeinsame Module verwendet. Um die Gesamtpaketgröße zu reduzieren, können Sie das Splithunksplugin verwenden, um die gemeinsamen Module zu trennen.
  
  MinChunks können so konfiguriert werden, dass sie angeben, auf wie viele Chunks es bei der Unterauftragsvergabe verweist.
2. paralleler Download
  
  Da HTML5 Defer und Async unterstützt, können mehrere JS-Dateien gleichzeitig heruntergeladen werden, um die Bandbreite vollständig auszunutzen. Wenn das Verpackungsergebnis eine große Datei ist, können Sie diesen Vorteil nicht nutzen.
  
  Sie können das Splithunks-Plug-in zum Teilen der Datei verwenden und das Attribut maxSize konfigurieren, um die Größe des zu teilenden Pakets anzugeben.
Beschreiben Sie den Webpack-Erstellungsprozess? (CVTE)
Referenzantwort:
1. Initialisierungsparameter : Parameter aus Konfigurationsdateien und Shell-Anweisungen lesen und zusammenführen, um endgültige Parameter zu erhalten
2. Kompilierung starten : Initialisieren Sie das Compiler-Objekt mit den im vorherigen Schritt erhaltenen Parametern, laden Sie alle konfigurierten Plug-Ins und führen Sie rundie Methode des Objekts aus, um die Kompilierung zu starten.
3. Eintrag ermittelnentry : Finden Sie alle Eintragsdateien entsprechend der Konfiguration
4. Kompilieren Sie das Modul : Rufen Sie ausgehend von der Eintragsdatei alle Konfigurationen auf, loaderdie für die Übersetzung des Moduls konfiguriert sind, und konvertieren Sie dann den übersetzten Inhalt in AST. Finden Sie die Module heraus, von denen das Modul abhängt, indem Sie den AST analysieren, und fahren Sie mit diesem Schritt fort, bis alle Einträge vorliegen. Abhängige 递归Dateien werden nach diesem Verarbeitungsschritt verarbeitet
5. Vollständige Modulkompilierung : Nach der Übersetzung aller Module mit Schritt 4 loaderwerden der endgültige übersetzte Inhalt jedes Moduls und die Beziehungen zwischen ihnen erhalten.依赖关系图
6. Ausgaberessourcen : Montieren Sie sie entsprechend den Abhängigkeiten zwischen dem Eintrag und dem Modul in mehrere Module Chunk, konvertieren Sie dann jeden Chunk in eine separate Datei und fügen Sie ihn der Ausgabeliste hinzu. Dieser Schritt ist die letzte Möglichkeit, den Ausgabeinhalt zu ändern.
7. Ausgabe abgeschlossen : Bestimmen Sie nach dem Bestimmen des Ausgabeinhalts den Ausgabepfad und den Dateinamen gemäß der Konfiguration und schreiben Sie den Dateiinhalt in das Dateisystem
Erklären Sie das Implementierungsprinzip des Webpack-Plug-Ins? (CVTE)

Referenzantwort:

Im Wesentlichen ist ein Webpack-Plugin ein applyObjekt mit Funktionen. Nachdem Webpack das Compiler-Objekt erstellt hat, führt es die Apply-Funktion des registrierten Plug-Ins aus und übergibt das Compiler-Objekt als Parameter.

In der Apply-Funktion können Entwickler die Ausführung mehrerer Hook-Funktionen über das Compiler-Objekt überwachen. Verschiedene Hook-Funktionen entsprechen unterschiedlichen Phasen der Webpack-Kompilierung. Wenn das Webpack ein bestimmtes Stadium erreicht, werden diese Überwachungsfunktionen aufgerufen und das Kompilierungsobjekt übergeben. Entwickler können das Kompilierungsobjekt verwenden, um verschiedene Informationen zum Webpack abzurufen und zu ändern und so den Erstellungsprozess zu beeinflussen.
Haben Sie Plug-Ins für die Projektanalyse verwendet? (CVTE)

Referenzantwort:

Verwendet den Webpack-Bundle-Analyzer zur Analyse der Verpackungsergebnisse, der hauptsächlich zur Optimierung des Projektverpackungsvolumens verwendet wird
Was ist Babel und was bewirkt es?

Referenzantwort:

babel ist ein JS-Compiler, der hauptsächlich zum Kompilieren der nächsten Generation von JS-Sprachcode in kompatibleren Code verwendet wird.

Eigentlich macht es selbst nicht viel. Es ist für die Kompilierung von JS-Code in AST verantwortlich und verlässt sich dann auf verschiedene Plug-Ins in seinem Ökosystem, um die Syntax und API im AST zu verarbeiten.
Erklären Sie, was der Installationsmechanismus des NPM-Moduls ist.
Referenzantwort:
1. npm prüft, ob das Modul im lokalen Verzeichnis node_modules installiert wurde. Wenn es bereits installiert ist, wird es nicht erneut installiert.
2. npm prüft, ob sich das gleiche Modul im Cache befindet und liest in diesem Fall die Installation direkt aus dem Cache
3. Wenn es weder lokal noch im Cache vorhanden ist, lädt npm das Installationspaket von der in der Registrierung angegebenen Adresse herunter, schreibt es dann in das lokale Verzeichnis node_modules und speichert es gleichzeitig im Cache.

Fragen zu Vorstellungsgesprächen im Bereich Front-End-Engineering

Je suppose que tu aimes