如何在bower项目中包含javascript并使JSHint发挥作用

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

本文关键字：JSHint 并使 作用 javascript 包含 bower 项目      更新时间：2023-09-26

我正在尝试使用一个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-build注释是关于什么的，所以我把它放在了head标签的末尾：

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

问题是：我的script.js文件中的代码没有传递JSHint，甚至第一行使用了纸库中的东西，比如：

var circle = new Path();

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

我知道我可以告诉JSHint忽略每一个纸符号，但（a）它们很多，（b）我宁愿解决问题，也不愿掩盖它。

我是不是打算以错误的方式添加这个bower库？有没有一种方法可以添加它，以便在我的脚本中知道符号？

当你将库作为全局变量导入时，就像你对纸质库所做的那样，你需要告诉JSHint

{
    "predef": [ "paper" ]
}

添加到.jshintrc配置文件（如果有），或者将/* globals paper */添加到使用图纸库的文件顶部；那么你应该可以做这样的事情，而不会让门楣抱怨：

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

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

相关文章：