Verwendung von JSLint/Hint mit requirejs

Question

Ich richte derzeit ein automatisiertes Build-Skript (mit gruntjs) für ein require.js getriebenes Projekt ein. Daher würde ich gerne jslint/jshint auf alle erforderlichen Dateien ausführen, bevor Sie es mit r.js verketten und minimieren. Da der Ordner js viele Entwicklungsdateien enthält, die ich nicht fusseln möchte, kann ich nicht einfach js/**/*.js an JSLint übergeben. Mein erster Gedanke war, r.js mit optimizer: 'none' auszuführen, füge die verkettete Datei hinzu und minimiere sie dann, aber dies ist aus zwei Gründen keine Option. Zuerst wird es Vendor-Bibliotheken enthalten, die ich nicht lint und zweitens die Zeile mit dem Fehler finden, seine Klasse finden, die passende js-Datei im dev-Ordner finden, sie dort reparieren, r.js erneut ausführen und schließlich flinten Auch das ist viel zu mühselig für unseren Workflow. Also suche ich nach einer Möglichkeit, den linting in den r.js optimizer-Prozess einzubinden oder zumindest eine Liste der requires dependency tree in irgendeiner Weise zu bekommen, die ich parsen und an lint übergeben kann. Oder irgendeine Lösung, die für einen automatisierten Prozess praktikabel ist, werden Sie sich vorstellen.

Answer 1

Diese Antwort Art von Umleitungen Grunt, aber es sollte funktionieren für das, was Sie tun möchten. Die Art, wie ich es tun würde, ist r.js zu betrachten und zu versuchen, eine Funktion zu überschreiben, die den Pfad zu den verschiedenen geladenen Modulen erhält, den Modulnamen abfängt und die Dateien lint, während r.js die Module lädt und kompiliert. Ich habe es getan, wie so:

var requirejs = require('requirejs'); 
var options = {/*r.js options as JSON*/}; 
var oldNewContext = requirejs.s.newContext; 
requirejs.s.newContext = function(){ 
    var context = oldNewContext.apply(this, arguments); 
    var oldLoad = context.Module.prototype.load; 
    context.Module.prototype.load = function(){ 
     var module = oldLoad.apply(this, arguments); 

     if(/\.js$/.test(this.map.url) && !/^empty:/.test(this.map.url)) 
      console.log(this.map.url); 

     return module; 
    } 
    return context; 
} 
requirejs.optimize(options) 

Dann, wenn Sie requirejs.optimize auf Ihre Module ausführen, sollten Sie alle nicht leeren JavaScript Urls der Konsole angemeldet bekommen. Anstatt sie auf der Konsole zu protokollieren, könnten Sie die URLs verwenden, um die Dateien zu filtern.

Answer 2

Flicken Sie zuerst, kompilieren Sie später. Seien Sie genau über die Dateien, die Sie flinken möchten und verwenden Sie die! Präfix, um bestimmte Dateien zu ignorieren:

Answer 3

Ich ziehe nicht r.js Methoden überschreiben, oder Sie können eine unerwünschte Abhängigkeit von einer bestimmten Version erstellen (Sie werden Ihren Code aktualisieren müssen sollte Änderung r.js)

Dies ist der Code verwende ich für der gleiche Zweck, der die onBuildRead-Funktion von require nutzt und die Tatsache, dass Objekte in Javascript als Referenz übergeben werden. Ich stelle sicher, dass ich zuerst das Require-Build ausführe und dann die js-Dateiquellen lint.

Der Nachteil ist, dass Sie nach Abschluss der Build flint. Für mein Setup ist das kein Problem.

module.exports = function(grunt) { 



var jsHintOptions = { 
     options: { 
      curly: true, 
      eqeqeq: true, 
      eqnull: true, 
      browser: true, 
      globals: { 
       jQuery: true 
      } 
     }, 
     all: [] // <--- note this is empty! We'll fill it up as we read require dependencies 
    }; 

var requirejsOptions = { 
     compile: { 
      options: { 
       paths: { 
        "jquery": "empty:" 
       }, 
       baseUrl: "./", 
       name: "src/mypackage/main", 
       mainConfigFile: "src/mypackage/main.js", 
       out: 'build/mypackage/main.js', 
       onBuildRead: function (moduleName, path, contents) { 
        jsHintOptions.all.push(path); // <-- here we populate the jshint path array 
        return contents; 
       } 
      } 
     } 
    }; 

grunt.initConfig({ 
    pkg: grunt.file.readJSON('packages/mypackage.package.json'), 
    requirejs: requirejsOptions, 
    jshint: jsHintOptions 
}); 

// load plugin that enabled requirejs 
grunt.loadNpmTasks('grunt-contrib-requirejs'); 

// load code quality tool 
grunt.loadNpmTasks('grunt-contrib-jshint'); 


grunt.registerTask('default', ['requirejs', 'jshint']); // <-- make sure your run jshint AFTER require 
}; 

Answer 4

Statt die lint Aufgabe verwenden, installieren, laden und grunt-contrib-jshint eingerichtet. Es verfügt über eine ignores Option, um bestimmte Dateien oder Dateipfadmuster zu ignorieren.

Hier ist meine Aufgabe:

jshint: { 
    options: { 
     // options here to override JSHint defaults 
     boss : true, // Suppress warnings about assignments where comparisons are expected 
     browser : true, // Define globals exposed by modern browsers (`document`, `navigator`) 
     curly : false, // Require curly braces around blocks 
     devel : false, // Define `console`, `alert`, etc. (poor-man's debugging) 
     eqeqeq : false, // Prohibit the use of `==` and `!=` in favor of `===` and `!==` 
     "-W041" : false, // Prohibit use of `== ''` comparisons 
     eqnull : true, // Suppress warnings about `== null` comparisons 
     immed : true, // Prohibit the use of immediate function invocations w/o wrapping in parentheses 
     latedef : true, // Prohibit the use of a var before it's defined 
     laxbreak: true, // Suppress warnings about possibly unsafe line breaks 
     newcap : true, // Require you to capitalize names of constructor functions 
     noarg : true, // Prohibit the use of `arguments.caller` and `arguments.callee` 
     shadow : true, // Suppress warnings about var shadowing (declaring a var that's declared somewhere in outer scope) 
     sub  : true, // Suppress warnings about using `[]` notation, e.g. `person['name']` vs. `person.name` 
     trailing: true, // Trailing whitespace = error 
     undef : false, // Prohibit the use of explicitly undeclared variables 
     unused : false, // Warn when you define and never use your variables 
     white : false, // Check JS against Douglas Crawford's coding style 
     jquery : true, // Define globals exposed by jQuery 
     // Define global functions/libraries/etc. 
     globals : { 
      amplify : true 
     }, 
     ignores: [ 
      'src/app/templates/template.js', 
      'src/scripts/plugins/text.min.js' 
     ] 
    }, 
    gruntfile: { 
     src: 'Gruntfile.js' 
    }, 
    app: { 
     src: 'src/app/**/*.js' 
    }, 
    scripts: { 
     src: 'src/scripts/**/*.js' 
    } 
}