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?
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 (e.g. requireJS) CommonJS (e.g. Webpack), or ES6 modules.