ionic-framework
Ionic - Analysieren Sie Ihre App mit jshint und gulp-jshint als Teil Ihres Build-Prozesses

Android Angular 2 AngularJS Cordova CSS HTML ionic2 iOS JavaScript TypeScript
Suche…


Bemerkungen

Wenn Sie Ihre ionische App vor dem Ausführen fusseln, hat dies enorme Vorteile. Es analysiert den Code auf mögliche Fehler und spart enorm viel Zeit.

Was ist Flusen und wie werden die erforderlichen Pakete installiert?

"Linting ist das Ausführen eines Programms, das Code auf mögliche Fehler analysiert." - siehe Was ist "Linting"?

Ihre ionische App enthält eine package.json-Datei. Gehen Sie in einer Befehlszeile / im Terminal zum Stammverzeichnis Ihrer App und installieren Sie die folgenden Pakete: 

npm install jshint --save-dev
npm install jshint-stylish --save-dev
npm install gulp-jshint --save-dev

Fügen Sie eine Schluckaufgabe hinzu

Im Stammverzeichnis Ihrer ionischen App befindet sich eine Datei gulpfile.js. Öffnen Sie es in einem Editor und fügen Sie die folgende "Schluckaufgabe" ein: 

gulp.task('lint', function() {
    return gulp.src(['./www/js/**/*.js']) 
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('jshint-stylish')) 
        .pipe(jshint.reporter('fail'))
});

Dies sucht nach einem Ordner namens 'js' im Ordner 'www'. Wenn Sie andere Ordner mit JavaScript-Dateien haben, fügen Sie diese ebenfalls hinzu. Fügen Sie beispielsweise einen Ordner mit dem Namen 'views' hinzu: 

gulp.task('lint', function() {
    return gulp.src(['./www/js/**/*.js','./www/views/**/*.js'])
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('jshint-stylish')) 
        .pipe(jshint.reporter('fail'))
});

Erklärungen: 

1) /**/*.js - This syntax means to look at all the js files in the subfolders too
2) .jshintrc - This is a configuration file that we will create in the next example.

.Jshintrc-Datei erstellen (optional)

Erstellen Sie im Stammverzeichnis Ihrer App eine Datei mit dem Namen '.jshintrc', in der package.json ist.

* Hinweis für Windows: Erstellen Sie eine Datei mit dem Namen "jshintrc.txt". Benennen Sie es dann in ".jshintrc" um. (beachte den Punkt am Ende).

Dies ist eine Konfigurationsdatei. Es kann beispielsweise jshint anweisen, bestimmte Variablen und viele andere Dinge zu ignorieren. Hier ist mein: 

{
    "predef": [ 
        "window",
        "console",
        "cordova",
        "device",
        "alert",
        "document",
        "debug",
        "setServiceVars",
        "StatusBar",
        "config"
    ],
    "globals": {
        "angular"        : false,
        "myApp"            : false,
        "myControllers"    : false,
        "myDirectives"    : false,
        "localStorage"     : false,
        "navigator"         : false, 
        "emit"             : false, 
        "atob"             : false,  
        "moment"        : false,
        "btoa"            : false
    },
    "node"          : true
}

Makefile hinzufügen

  1. Erstellen Sie eine Datei mit dem Namen "Makefile" (ohne Erweiterung) im Stammverzeichnis Ihrer App

  2. Öffnen Sie es in einem Texteditor und fügen Sie Folgendes hinzu: 

android:
    gulp lint
    gulp sass
    ionic run android --device

ios:
    gulp lint
    gulp sass
    ionic build ios

Dies wird Ihre App lint und wenn dies erfolgreich ist, wird es sass kompilieren und Ihre App erstellen.

Verwendung: Führen Sie die folgenden Befehle aus, um Ihre App anstelle des regulären "ionic run android --device" auszuführen: 

Android: make android
iOS    : make ios


Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow