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

时间:2016-07-24 01:45:53

标签: javascript bower paperjs

我试图使用我根据说明安装的凉亭库:

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();

生成警告,因为&#34;路径未定义&#34;。

我理解我可以告诉JSHint忽略每个纸质符号,但(a)有很多纸质符号,(b)我宁愿修复问题而不是掩盖它。

我是否打算以错误的方式添加这个凉亭库?有没有办法可以添加它,以便在我的脚本中知道符号?

1 个答案:

答案 0 :(得分:1)

当您将库导入为全局变量时,就像您使用纸质库一样,您需要告诉JSHint。你可以通过添加

来做到这一点
{
    "predef": [ "paper" ]
}

到您的.jshintrc配置文件(如果有的话),或者将/* globals paper */添加到使用纸质库的文件顶部;那么你应该能够做这样的事情,而没有盲目的抱怨:

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

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