繁体   English   中英

使用带有requirejs的JSLint / Hint

[英]Using JSLint/Hint with requirejs

我目前正在为驱动的项目设置一个自动构建脚本(带有 )。 因此我想在连接和缩小r.js之前对所有必需的文件运行 / 由于js文件夹包含很多我不想lint的开发文件,我不能只将js/**/*.js .js传递给JSLint。 我的第一个想法是用optimizer: 'none'运行r.js optimizer: 'none' ,lint连接文件然后缩小它,但这不是一个选项有两个原因。 首先它将包括我不想lint的供应商库,然后找到错误的行,找到它的类,在dev文件夹中找到相应的js文件,在那里修复它,再次运行r.js然后lint它再次,是我们的工作流程的麻烦。 所以我正在寻找一种可能将linting连接到r.js优化器进程或至少以某种方式获取requirejs依赖树的列表,我可以解析并将其传递给lint。 或者任何可行的自动化流程解决方案,您都会想到。

首先是Lint,稍后编译。 只是具体一点你要lint的文件并使用! 用于忽略特定文件的前缀:

grunt.initConfig({
  lint: {
    // Specify which files to lint and which to ignore
    all: ['js/src/*.js', '!js/src/notthisfile.js']
  },
  requirejs: {
    compile: {
      options: {
        baseUrl: 'js/src',
        name: 'project',
        out: 'js/scripts.js'
      }
    }
  }
});

// Load the grunt-contrib-requirejs module.
// Do `npm install grunt-contrib-requirejs` first
grunt.loadNpmTasks('grunt-contrib-requirejs');

// Our default task (just running grunt) will
// lint first then compile
grunt.registerTask('default', ['lint', 'requirejs']);

我不希望覆盖r.js的方法,或者您可能会在特定版本上创建不需要的依赖项(如果r.js更改,您需要更新代码)

这是我用于相同目的的代码,使用require的onBuildRead函数以及javascript中的对象通过引用传递的事实。 我确保首先运行require构建,然后lint js文件源。

缺点是在构建完成后你会发现lint。 对于我的设置,这不是一个问题。

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
};

这个答案绕过了Grunt,但它应该适用于你想做的事情。 我这样做的方法是查看r.js并尝试覆盖一个函数,该函数接收所加载的各种模块的路径,拦截模块名称,并在r.js加载和编译模块时lint文件。 我这样做了:

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)

然后,当您在模块上运行requirejs.optimize时,您应该将所有非空的JavaScript URL记录到控制台。 您可以使用网址来提取文件,而不是将它们记录到控制台。

而不是使用lint任务,安装,加载和设置grunt-contrib-jshint 它有一个ignores特定文件或文件路径模式的ignores选项。

这是我的任务:

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'
    }
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM