emberコンポーネントからグローバルライブラリを参照する

Question

私はを使用しています。マークダウン解析とシンタックスハイライトの両方をプロジェクトに追加したいからです。 highlightjs-line-numbers.js

私は次のようにember-remarkableのmd-textコンポーネントをオーバーライドします：

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); 
    }); 
    } 
}); 

すべてがの作品、それが欠けている唯一のことは、私はこのライブラリを使用して追加したい行番号、です！しかし、私の編集者はhljsが定義されていないと訴えています。

このエラーを回避するにはどうすればよいですか？

Answer 1

ES6モジュールの場合は、インポートするだけです。それ以外の場合はwindow.hljsとして使用できます。

ブラウザでjsコードを実行すると、windowがグローバル変数のルートになります。したがって、window.hljsとしてアクセスできます。

コードをFastbootで実行する場合は、これがグローバルオブジェクトにアクセスするより良い方法です：(window || Fastboot || global).hljs。

一方、グローバルオブジェクトコンテナを使用する代わりに、linterがこのエラーを出さないようにすることができます。 eslintについては、Specifying Globalsの設定を参照してください。

Answer 2

作品ファイルの先頭にこれを置くようになっています場合、

/* global hljs */ 

ないことが正しいことを行う方法か:)

Answer 3

ある場合は、明示的に依存関係をインポートする必要があります確認してください将来の読者とコミュニケーションする以外の理由はありません。 import hljs from 'highlightjs-line-numbers'