Verweise auf globale Bibliotheken von einer Ember-Komponente

Question

Ich benutze ember-remarkable, weil ich Markdown Parsing und Syntaxhervorhebung zu meinem Projekt hinzufügen möchte. Das einzige, was es fehlt, ist die Zeilennummern, die ich mit Hilfe dieser Bibliothek hinzufügen möchten: highlightjs-line-numbers.js

I außer Kraft setzen ember-remarkable ‚s md-text Komponente mit den folgenden:

import MDTextComponent from 'ember-remarkable/components/md-text'; 

export default MDTextComponent.extend({ 
    tagName: null, 

    didRender() { 
    this._super(...arguments); 

    this.$("code[class*='language-']").each((i, block) => { 
     this.$(block).addClass('hljs'); 
     hljs.lineNumbersBlock(block); 
    }); 
    } 
}); 

Alles funktioniert! Mein Editor beklagt sich jedoch, dass hljs nicht definiert ist, obwohl es auf der Seite verfügbar ist.

Wie vermeide ich diesen Fehler?

Answer 1

Wenn es ES6-Module ist, importieren Sie es einfach. Ansonsten können Sie es als window.hljs verwenden.

Wenn Sie Ihren js-Code im Browser ausführen, ist window der Stamm der globalen Variablen. So können Sie es als window.hljs zugreifen. Wenn Sie Ihren Code in Fastboot ausführen, sollte dies eine bessere Methode sein, um auf globale Objekte zuzugreifen: (window || Fastboot || global).hljs.

Auf der anderen Seite, anstatt den globalen Objektcontainer zu verwenden, können Sie verhindern, dass linter diesen Fehler gibt. Für eslint, sehen Sie diese Konfiguration: Specifying Globals.

Answer 2

sieht wie folgt aus der Datei an der Spitze setzen funktioniert:

/* global hljs */ 

Nicht sicher, ob das der richtige Weg, es zu tun ist oder nicht :)

Answer 3

Sie ausdrücklich Ihre Abhängigkeiten importieren sollen, wenn aus keinem anderen Grund, als mit zukünftigen Lesern zu kommunizieren. import hljs from 'highlightjs-line-numbers'