javascript - 从 ember 组件引用全局库

Question

我正在使用ember-remarkable因为我想在我的项目中添加 markdown 解析和语法突出显示。它唯一缺少的是行号，我想通过使用这个库来添加行号: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 .