Wie Sie Javascript in einem Bower Projekt einzubeziehen und JSHint funktioniert

Question

Ich versuche, eine Laube Bibliothek zu verwenden, die ich die die Anweisungen mit nach installiert haben:

bower install paper --save 

Dieses eine Bower Komponente hinzugefügt, und ich diese Zeile in meiner index.html-Datei hinzugefügt:

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

nach dem Papierverbrauch Anweisungen, kann ich alle meine Zeichnung Code in einer js-Datei setzen und schließe es auch. Die Dokumente waren nicht klar, wo in index.html, dies zu tun, und ich verstehe nicht wirklich, was diese Bower bauen Kommentare sind etwa, so dass ich eingeschlossen es am Ende des Kopfes tag:

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

Hier das Problem: der Code in meiner script.js Datei nicht passieren JSHint, auch die erste Zeile, die etwas von der Papier-Bibliothek verwendet, wie:

var circle = new Path(); 

gibt eine Warnung aus, weil „Pfad nicht definiert ist“.

Ich verstehe, dass ich JSHint sagen kann, jedes der Papiersymbole zu ignorieren, aber (a) es gibt eine Menge von ihnen, und (b) Ich würde eher das Problem beheben, anstatt es zu vertuschen.

Werde ich diese Bower-Bibliothek falsch hinzufügen? Kann ich es so hinzufügen, dass die Symbole in meinem Skript bekannt sind?

Answer 1

Wenn Sie eine Bibliothek als globale Variable importieren, wie Sie es mit der Papierbibliothek tun, müssen Sie JSHint darüber informieren. Sie können das tun, indem

{ 
    "predef": [ "paper" ] 
} 

auf Ihre .jshintrc Konfigurationsdatei hinzugefügt (falls Sie eine haben), oder auch durch an die Spitze Ihrer Dateien hinzufügen, die die Papier Bibliothek verwenden; dann sollten Sie in der Lage sein, Dinge wie diese, ohne die Linter Jammern zu tun:

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

---

Der wichtigste Weg, um zu vermeiden, globale Variablen, so zu definieren, ist als global eine alternative Einrichtung für das Modul laden andere zu verwenden, Variablen: Es gibt eine Reihe von Alternativen AMD (zB requireJS) CommonJS (zB Webpack), oder ES6-Module.