vorsichtig! Die Fallstricke beim Zusammenführen und Komprimieren von Dateien mit AngularJS in Kombination mit RequireJS_javascript-Kenntnissen

Das AngularJS-Framework wurde im Projekt verwendet und RequireJS wurde für das asynchrone Laden von Modulen (AMD) verwendet. Beim Zusammenführen und Komprimieren von Dateien bin ich auf einige Fallstricke gestoßen, aber ich habe die Gründe nicht verstanden.

Diese Gruben
1. Die Pfade in build.js müssen mit denen in main.js übereinstimmen.

Diese build.js ist die von r.js verwendete Konfigurationsdatei und main.js ist die Hauptdatei von RequireJS. Beim Zusammenführen und Komprimieren müssen die Pfade auch in die Datei build.js geschrieben werden, und sie sind immer noch dieselben wie in main.js. Ich bin sehr überrascht, warum die Pfade von require.config in main nicht erkannt werden können, um sie zu speichern die Notwendigkeit, die Pfade beim Zusammenführen zu kopieren (ich habe versucht, dass es in build.js keine Pfade gibt und es nicht zusammengeführt werden kann). (-_-!!!)

2. Einige abhängige Bibliotheken müssen vor dem Zusammenführen den gesamten relativen Pfad schreiben.

Im Projekt verwende ich eine Bibliothek eines Drittanbieters namens Layer (die Bibliothek wurde mit requireJS define geschrieben. Als ich am Anfang nur die Entwicklung durchführte, musste ich nach der Konfiguration des Pfads in Pfaden nur die Abkürzung verwenden). (definieren), um diese Bibliothek abhängig von der Zeit zu verwenden. Beim Zusammenführen wurde mir jedoch mitgeteilt, dass die Datei nicht existierte (da die Abkürzung direkt zur Schreibweise der Dateiadresse verwendet wurde, konnte ich nur die Verwendung dieser Bibliothek ändern.) Der gesamte relative Pfad wurde zu diesem Zeitpunkt entwickelt. Es ist nichts Falsches daran, zusammenzuführen.

3. Es kann nach dem Zusammenführen ausgeführt werden, jedoch nicht nach der Komprimierung.

Dies ist das schwerwiegendste Problem, das schwerwiegendste Problem, das schwerwiegendste Problem. Nachdem die Dateien zusammengeführt und komprimiert wurden, läuft AngularJS bei der Verwendung der Dateien abnormal und meldet immer einen Modulinitialisierungsfehler. Fehler beim Instanziieren des gemeinsamen Moduls aufgrund von: Fehler: [$injector:unpr] Unbekannter Anbieter: e , wie unten gezeigt.

Ein sehr wichtiger Punkt ist, dass es ohne Komprimierung verwendet werden kann. Nach der Komprimierung (Standardkomprimierung wird verwendet) wird bei Verwendung ein Fehler gemeldet. Ich denke also, dass etwas „zerquetscht“ werden muss. In einigen Artikeln im Internet heißt es, dass Sie AngularJS-Controller, -Anweisungen usw. wie folgt schreiben müssen und die verwendeten Dienste in Zeichenfolgen definiert sind.

commonModule.controller( "broswerCtrl" ,["$scope" ,"$sce" , function ($scope,$sce){

Aber meine gesamte Anwendung ist auf diese Weise definiert und es besteht keine Möglichkeit, dass Fehler darin eingeschleust werden. Am Ende blieb mir nichts anderes übrig, als mangle: false zu konfigurieren, ohne die Variablennamen zu verwechseln. Danach können die zusammengeführten und komprimierten Dateien korrekt verwendet werden! ! !

PS: Um es einfach auszudrücken: Zusammenführen und Komprimieren sind möglich, aber Variablennamen dürfen nicht verwechselt werden (ich habe immer das Gefühl, dass es für das Problem vorerst keine Lösung gibt).

4. Die zweite Anforderungsebene kann beim Zusammenführen nicht zusammengeführt werden.

Wenn Sie beispielsweise das Modul wie folgt in main.js laden, werden Sie feststellen, dass die zweite Anforderungsebene beim Zusammenführen nicht zusammengeführt wurde.

require([ "COMMON"], function(){
  require([ "angular", "LOGIN" ], function(angular){
   //....
  });
});

Zu diesem Zeitpunkt müssen Sie findNestedDependencies: true zu build.js hinzufügen, und dann wird die zweite Ebene zusammengeführt.

Zusammenführungsvorbereitung

1. Installieren Sie nodejs

Das Zusammenführen und Komprimieren von Dateien basiert auf NodeJS. Installieren Sie daher zuerst NodeJS.

2. Laden Sie r.js herunter

r.js arbeitet mit der Schreibmethode des Moduls requirejs zusammen, um Dateien zusammenzuführen und zu komprimieren.

Einfache Konfiguration

Am besten schreiben Sie eine build.js für die Konfigurationsdatei wie folgt:

({
  baseUrl:"../",
  paths: {
   //...
  },
  shim: {
   //...
  },
  optimize: "uglify2",
  uglify2: {
  mangle: false //false 不混淆变量名
  },
  findNestedDependencies: true,
  name: "js/main",
  out: "../js/main-built.js"
})

Hier sind einige Schlüsselattribute:

baseUrl: Alle Module (normalerweise js) existieren relativ zu diesem Pfad.

optimieren: So optimieren Sie Skriptdateien. Nachfolgend finden Sie fünf Wertmethoden.

• uglify: (Standard) Komprimiert mit UglifyJS.
  
• uglify2: Komprimiert mit UglifyJS2 (2.1.2).
  
• Abschluss: Verwenden Sie den einfachen Optimierungsmodus des Closure Compilers von Google, um Dateien zu komprimieren. Dies ist nur gültig, wenn das Optimierungstool Java verwendet.
  
• closure.keepLines: Identisch mit dem Schließungsparameter, außer dass Zeilenumbrüche beibehalten werden.
  
• keine: Keine Komprimierung.

findNestedDependencies: Suchen Sie nach Abhängigkeiten, die in require() aufgerufen werden oder sich definieren.

PS: Es gibt noch viele weitere Konfigurationsattribute, daher werde ich nicht auf Details eingehen. Wenn die Dateien konfiguriert sind, führen Sie den Befehl zum Zusammenführen und Komprimieren

aus

node r.js -o build.js

Zusammenfassung

Das Zusammenführen und Komprimieren von RequireJS-Modulen ist relativ einfach, aber wenn es um AngularJS geht, gibt es einige Probleme mit der Komprimierung und es wurde bisher kein besserer Weg gefunden.

Das Obige ist der detaillierte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.