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

Question

I'm trying to use a bower library which I've installed according the the instructions with:

bower install paper --save

This added a bower component, and I added this line to my index.html file:

<!-- 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 -->

According to the paper usage instructions, I can put all of my drawing code in a js file and include it, too. The docs weren't clear where in index.html to do this, and I don't really understand what those bower build comments are about, so I included it at the end of the head tag:

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

Here's the problem: The code in my script.js file doesn't pass JSHint, even the first line that uses something from the paper library, like:

var circle = new Path();

generates a warning because "Path is not defined".

I understand that I can tell JSHint to ignore each of the paper symbols, but (a) there's a lot of them, and (b) I'd rather fix the problem rather than covering it up.

Am I going about adding this bower library the wrong way? Is there a way I can add it so the symbols are known in my script?

Answer 1

When you import a library as a global variable, like you're doing with the paper library, you need to tell JSHint about it. You can do that either by adding

{
    "predef": [ "paper" ]
}

to your .jshintrc config file (if you have one), or else by adding /* globals paper */ to the top of your files that use the paper library; then you should be able to do things like this without the linter complaining:

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

---

The main way to avoid needing to define global variables like that, is to use some alternative setup for module loading other than global variables: there's a number of alternatives AMD (eg requireJS) CommonJS (eg Webpack), or ES6 modules.