2016-05-13 7 views
0

Ich habe die Fähigkeit, erforscht eine ExtJS Anwendung ohne Sencha minify und die nächstgelegene ich gekommen bin, um diesen Link ist:Wie kann ich ein ExtJs 5 Projekt ohne Sencha minimieren?

Is there a way to minify an ExtJS application without Sencha CMD?

Ich bin aber nicht sicher, wie die Datei in einem der zur Ausführung spätere Kommentare. Ich benutze das Minify-Maven-Plugin mit com.samaxes.maven und der CLOSURE Engine. Ich war in der Lage, die minimierte js-Datei des gesamten Projekts zu generieren, aber ich bekomme Fehler, wenn ich versuche, die Webseite zu laden.

Ich konnte überprüfen, ob die Webseite die richtige Datei aufgerufen hat. Ich habe den Fehler "TypeError: q is undefined" erhalten ... überhaupt nicht hilfreich. Ohne die minimierte Datei läuft die Webanwendung einwandfrei. Also, die generierte minimierte Datei muss etwas falsch damit haben.

Der Vorschlag am unteren Rand des obigen Links zeigt die Reihenfolge der Dateien, die ich enthalten sollte, aber ich habe keine Ahnung, wie Sie das tatsächlich implementieren. Außerdem gibt es wahrscheinlich über hundert Javascript-Dateien, die minimiert werden müssen, so dass ich nicht jede Datei in die JSB-Datei eingeben muss.

Gibt es irgendwelche Vorschläge, wie man mein gesamtes Projekt zur Bauzeit mit Maven minimieren kann?

Antwort

0

Ich benutze Grunt, um das Projekt zu erstellen, aber es ist nicht wirklich wichtig, da alles, was Sie brauchen, ist, Dateien zu kombinieren, so Maven sollte mehr als fähig sein.

Ich wollte, dass meine Entwicklerversion immer noch auf Extjs dynamischen Klassenlader angewiesen ist, so dass ich das Projekt nicht immer neu erstellen muss, wenn ich eine Datei modifiziere und nur die Produktionsversion in eine einzige Datei verkleinere. Es gab ein paar Fallstricke, bevor ich es funktionierte, hier ist, womit ich endete. Auch das ist für ExtJS6, aber es sollte wahrscheinlich immer noch das gleiche sein.

Es wird alles durch die Backend-Variable dev gesteuert, die bei Verwendung von false veraltete Quellen verwendet.

index.html (ich verwende einige Meta-Template-Sprache als Beispiel)

<html> 
<head> 
    {{if dev}} 
     <script src="/ext/ext-all-debug.js"></script> 
    {{else}} 
     <script src="/ext/ext-all.js"></script> 
    {{/if}} 

    <script> 
     var dev = {{dev}}; 
     Ext.Loader.setConfig({enabled: dev}); 
    </script> 

    {{if dev}} 
     <script src="/app.min.js"></script> 
    {{else}} 
     <script src="/app.js"></script> 
    {{/if}} 
</head> 
<body></body> 
<html> 

App Dateien, requires Richtlinie nicht gut funktioniert, wenn der dynamische Lader deaktiviert ist, so hatte ich Bedingungen hinzufügen wie dies überall:

Ext.define('MyApp.view.Panel', { 
    extend: 'MyApp.view.GenericPanel', 
    requires: dev ? [ 
     'MyApp.view.AnotherView', 
    ] : [], 
    ... 
}); 

Gruntfile.js (wenn Sie nur Verkettung ersetzen uglify mit concat überall benötigen)

module.exports = function(grunt) { 
    grunt.initConfig({ 
     pkg : grunt.file.readJSON('package.json'), 
     uglify : { 
      build: { 
       files: { 
        '../app.min.js': ['../app/view/GenericPanel.js', '../app/**/*.js', '../app.js'], 
       } 
      } 
     }, 
    }); 

    grunt.loadNpmTasks('grunt-contrib-uglify'); 
    grunt.registerTask('default', [ 'uglify' ]); 
}; 

Grunt project.json:

{ 
    "name": "My App", 
    "version": "1.0.0", 
    "devDependencies": { 
    "grunt": "~0.4.5", 
    "grunt-contrib-concat": "^1.0.1", 
    "grunt-contrib-uglify": "^1.0.1" 
    } 
} 

Die Reihenfolge der Dateien Materie, werden standardmäßig Grunzen alphabetischer Reihenfolge verwenden. Wenn Sie eine Klasse erweitern, muss die Elternklasse höher eingeschlossen werden. app.js sollte am Ende sein. Ansonsten funktioniert es gut in einer einzelnen gemischten Datei, so dass ich die Dateireihenfolge nicht weiter anpassen musste. Grunt hat ziemlich mächtig path patterns, wenn Sie also sicherstellen müssen, dass einige Dateien zuerst enthalten sind, dann listen Sie sie einfach vor anderen Pfadmustern auf und es wird schlau genug sein, es nicht zweimal einzubeziehen.

Ich empfehle Ihnen, mit einer einfachen Verkettung ohne Verfälschung zu beginnen, und nur wenn das funktioniert, versuchen Sie es zu minimieren. Beim Minimieren müssen Sie möglicherweise mit globalen Funktionen und Variablen vorsichtig umgehen, da sie umbenannt werden können, wenn der Minifier zu aggressiv ist. Grunts Minifier funktionierte für mich fast mit den Standardeinstellungen, ich musste nur einige kleine Änderungen an meinem Code vornehmen (bezogen auf globale Funktionen).

+0

+1 @serg. Dies ist eine großartige Information! Ich habe die Maven-Dokumentation durchgesehen und festgestellt, was los war. Der Minifier versuchte nur, einen bestimmten Ordner zu minimieren, und nicht den Ordner, der verkleinert werden musste. Ich musste den Quellordner ändern, den ich verkleinern wollte. Ich musste auch sicherstellen, dass ich die Ordner in der richtigen Reihenfolge minimierte, mit app.js am Ende, genau wie du gesagt hast. Ich fügte auch die Bedingungen zu den erforderlichen Aussagen hinzu, das war eine große Hilfe! Dadurch konnte ich eine Konfigurationsdatei erstellen, um entweder die minimierte App oder die normale App zur Fehlerbehebung zu verwenden. – evanrich3891

0

Während ich nicht sicher bin, warum Sie das wollen, ist die Hauptsache, die Sie brauchen, der sogenannte Abhängigkeitsbaum - der Ihnen die Reihenfolge der Quelldateien mitteilt.

Dann können Sie alle Dateien (ExtJS-Quelle, Bibliotheken, ggf. auch Ihre eigenen Ansichten) in einer großen Datei in der richtigen Reihenfolge ablegen. Diese Datei sollte dann genauso funktionieren wie die 500 verschiedenen Dateien. (Es tat für mich.)

Das getan, können Sie nach einem funktionierenden Minifier suchen. Nicht jeder Minifier kann den ExtJS-Code minimieren, und ich kann mich nicht an meine letzten Ergebnisse erinnern, bevor wir uns entschieden haben, zu Sencha Cmd zu wechseln, aber ich denke, dass Microsoft Javascript Minifier einer war, der für uns arbeitete.

Abgesehen davon ist minimiertes JavaScript wirklich lesbar. Sie sollten die Quelle des Fehlers mit 200 Zeichen vor und 200 Zeichen nach dem Fehler angeben, und ich denke, hier kann jemand sagen, was dort vor sich geht.

+0

Ich möchte die Dateien minimieren, weil ExtJS langsam ist und optimiert werden muss. Ich wollte nicht manuell alle Dateien eingeben, aber es scheint, dass ich das nicht tun kann, da ich immer eine Menge Fehler bekomme. Ich benutze derzeit den Minifier für meine CSS-Dateien, was großartig funktioniert. Alle Dateien, die ich mit ExtJS verwende, sind * .js-Dateien. Ich gehe also das gesamte Projekt durch und versuche herauszufinden, in welcher Reihenfolge die Dateien geladen werden. Und dann ändern Sie die pom.xml-Datei, um die richtige Reihenfolge zu haben. Danke für die Antwort, ich schätze es wirklich. Ich komme dieser anstrengenden Aufgabe nahe! – evanrich3891

Verwandte Themen