如何在 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();

生成警告，因为 "Path is not defined"。

我知道我可以告诉 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模块。

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

How to include javascript in a bower project and make JSHint work

javascript

paperjs

bower