javascript - 如何在 Bower 项目中包含 javascript 并使 JSHint 工作

Question

我正在尝试使用我按照说明安装的 Bower 库:

bower install paper --save

这添加了一个 Bower 组件，我将此行添加到我的 index.html 文件中:

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/paper/dist/paper-full.js"></script>  <-- I added
<!-- endbower -->
<!-- endbuild -->

根据纸张使用说明，我可以将所有绘图代码放在一个js文件中并包含它。文档不清楚在 index.html 中的何处执行此操作，而且我不太明白这些 Bower 构建注释的含义，因此我将其包含在 head 标记的末尾:

    <script type="text/paperscript" src="scripts/script.js" canvas="canvas"></script>
</head>

问题是:我的 script.js 文件中的代码没有通过 JSHint，即使是使用纸张库中的内容的第一行，例如:

var circle = new Path();

生成警告，因为“路径未定义”。

我知道我可以告诉 JSHint 忽略每个纸质符号，但是 (a) 它们有很多，并且 (b) 我宁愿解决问题而不是掩盖它。

我是否会以错误的方式添加这个 bower 库？有没有办法添加它以便在我的脚本中识别这些符号？

Answer 1

当您将库作为全局变量导入时(就像处理纸质库一样)，您需要将其告知 JSHint。您可以通过添加来做到这一点

{
    "predef": [ "paper" ]
}

到您的 .jshintrc 配置文件(如果有)，或者通过将 /* globals paper */ 添加到使用该纸张的文件的顶部图书馆;那么你应该能够做这样的事情而不需要 linter 提示:

var Path = paper.Path;
var circle = new Path();

<小时/>

避免像这样定义全局变量的主要方法是使用全局变量之外的一些替代设置来加载模块:有许多替代的 AMD(例如 requireJS)CommonJS(例如 Webpack)或 ES6 模块。