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).
+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