你如何一起使用 JSHint 和 Browserify？

Question

我正在尝试使用 Angular 和 Browserify 构建一个项目。我的controllers.js 文件看起来像这样...

'use strict';

module.exports.testController = function($scope){
    $scope.message = 'Controller 1';
    console.log( 'hello' );
};

如您所料，这会产生三个 linting 错误。

• 使用 Strict 的函数形式
• “模块”未定义
• “控制台”未定义

我确实找到了一些解决方案 here，它可以通过将 jslint node: true 放在文件顶部来让 JSHint 处理 Node.js 文件，就像这样

   /*jslint node: true */
   'use strict';

    module.exports.testController = function($scope){
        $scope.message = 'Controller 1';
        console.log( 'hello' );
    };

但是，这显然修复了太多； 'console.log(...)' 应该仍然是未定义的。

有谁知道如何将 JSHint 与 Browserify 一起使用？

Answer 1

从 2.5.3 版本开始，JSHint 支持 browserify 标志。

像所有标志一样，您可以直接在源文件中使用它：

/*jshint browserify: true */
// browserify code here

或将其添加到.jshintrc 文件中：

{
   "browserify": true
}

Answer 2

我讨厌回答自己的问题，感觉就像是在偷窃，但是，这就是答案。有几种方法可以给这只猫剥皮，但这个解决方案可能是最“正确”的...

---

修改.jshintrc

你应该做的第一件事是修改你的 .jshintrc

"globals": {
    "define": false
}

变成

"globals": {
    "define": false,
    "module": false
}

---

修改代码

现在你需要像这样修改代码

module.exports = (function(){

    'use strict';

    var myComponent = {};

    myComponent.testController = function($scope){

        $scope.message = 'hello';
        console.log( 'Hello' );

    };

    myComponent.testDirective= function($scope){

        $scope.message = 'hello';
        console.log( 'Hello' );

    };

    return myComponent;

}());

现在 JSHint 将显示 console.log 的 linting 错误，但不会显示 modules 的 linting 错误。这是由.jshintrc ammend 提供的。

use strict linting 错误已修复，我将所有代码包装在一个函数中。

---

要求（）

更进一步，由于我们使用的是 browserify，我们还需要 require()。所以我需要再修改一次.jshintrc。

"globals": {
    "module": false,
    "require": false
}

注意：我已经从全局变量中删除了define，因为我没有使用它。