如何在 Aurelia ViewModel 中引用已在应用程序级别定义的库

Question

Sytemjs 是在 index.html 中定义的，因此从技术上讲，您可以在应用程序的任何位置执行 System.import，它会起作用。但是在构建过程中，我的组件在使用时动态导入库，但出现错误：

error TS2304: Cannot find name 'System'

组件代码如下：

import { bindable, bindingMode, customElement, noView } from 'aurelia-framework';

@noView()
@customElement('scriptinjector')
export class ScriptInjector {
  @bindable public url;
  @bindable public isLocal;
  @bindable public isAsync;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) protected scripttag;
  private tagId = 'bootTOCscript';

  public attached() {
    if (this.url) {
      if (this.isLocal) {
        System.import(this.url);
        return;
      }

      this.scripttag = document.createElement('script');
      if (this.isAsync) {
        this.scripttag.async = true;
      }

      this.scripttag.setAttribute('src', this.url);
      document.body.appendChild(this.scripttag);
    }
  }

  public detached() {
    if (this.scripttag) {
      this.scripttag.remove();
    }
  }
}

尽管有错误，项目构建和运行都很好，我尝试通过添加解决这个问题：

import System from 'systemjs';

对于确实解决了错误但在运行时的组件，此导入导致 Systemjs 在不正确的应用程序构建包中查找自身。 System.js 代码单独导出。有没有办法解决这个问题并且没有错误消息并让它在运行时工作？

Answer 1

在访问隐式存在于全局范围内的事物时，这实际上更像是一个普遍的 TypeScript 问题。您可以做的是声明变量而不实际导入它，如下所示：

declare var System: System;

（系统的实际类型将取决于您的 .d.ts 的外观）

如何在 Aurelia ViewModel 中引用已在应用程序级别定义的库

How to reference library already defined at app level in Aurelia ViewModel

systemjs

aurelia