angular2 TS用系统js导入cdn

Question

我在正确安装来自cdn的js时遇到了问题，在查看了10+的文章或帖子之后，我找不到一个很好的方法。

我想要安装用于我的角项目的js文件是http://player.twitch.tv/js/embed/v1.js。目前，我的index.html中只有一个脚本标记来加载它。

在一个组件文件中，我有一些代码，比如this.player = new Twitch.Player("video-player", options);，但是当我运行npm start时，我会得到一个错误错误TS2304:无法找到名称'Twitch‘。

奇怪的是，如果我注释掉了使用“Twitch”的行，我可以启动我的服务器，然后在服务器运行时取消对这些行的注释，然后应用程序就能正常工作，使用Twitch库就不会有任何问题。

我相信我需要在system.config.js文件中安装它，但是我找不到如何对来自cdn的js这样做(这不是通过npm提供的)。我已经为多个npm包这样做了，但是从cdn我有点迷路了。

我不确定我是否需要在系统js中这样做，所以如果这是不正确的，请忽略这篇文章的其余部分，并让我知道你的建议-我只需要在js文件中的to在我的整个应用程序中被识别和可用。

我找到了几种不同的方法来尝试这个。一个是直接从url加载模块。。

// index.html
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
  System.import('app').catch(function(err){ console.error(err); });
  System.import('http://player.twitch.tv/js/embed/v1.js');
</script>

// main.js
import {bootstrap}    from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';
import "angular2-materialize";
import "twitch-api";

使用这种方法，我不知道如何将其加载到我的应用程序中。import "twitch-api"不像npm包那样工作，比如angular2-物化，因为它没有映射到system.config.js文件中。不确定这条路是否可行。

另一种方式是将其加载到system.config.js文件中。使用此方法，我将带url的map对象添加到js文件中。我想也许整个system.config.js文件都是相关的，所以我会把它粘贴到下面。

在main.ts中，我执行与上面相同的操作，在进行这些更改后添加import "twitch-api";，在尝试启动服务器TS2304: Cannot find name 'Twitch'时仍然会收到相同的错误消息。

var map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular',
    "materialize-css":            "node-modules/materialize-css",
    "materialize":                "node_modules/angular2-materialize",
    "angular2-materialize":       "node_modules/angular2-materialize",
    "angular2-localstorage":      "node_modules/angular2-localstorage",
    "twitch-api":                 "http://player.twitch.tv/js/embed/v1.js"
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
    "materialize-css":            { main: "dist/js/materialize" },
    "materialize": { main: "dist/materialize-directive", defaultExtension: "js" },
    "angular2-localstorage": {main: "index.js", defaultExtension: 'js'},
    "twitch-api": {}
  };
  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
    ''
  ];
  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);

Answer 1

在做了更多的研究并更好地了解了正在发生的事情(在某种程度上)之后，我想提出一个可能更有意义的更新。在某种程度上，无论是原始的还是更新的，都有一些错误的信息。

更新中有一件事是错误的，那就是我关于VS代码对“导入”指令的不同处理的声明。正确的语句是SystemJS，而TypeScript编译器对“导入”指令的处理方式不同。在SystemJS的基本情况下(当它加载JS文件时)，它甚至看不到这些导入语句，它确实看到了导入语句的产品(根据在tsconfig.json文件中如何配置类型记录)。

因此，在这个问题中，“导入”语句中TypeScript和SystemJS之间的唯一“链接”是“twitch”。TypeScript将把.ts文件转换为一个.js文件，当页面加载时，SystemJS将读取该文件，并且它将查看其配置设置中的一个名为“twitch”的包。这就是为什么如果您注释掉了“the”对象的使用以使站点启动，然后取消对“the”对象的注释，SystemJS已经将该包加载到您的站点中，这就是为什么您的站点会正常工作的原因。

接下来是TypeScript编译器，当编译器遇到导入语句时，它有自己的一组规则(查找“如何TypeScript解析模块”一节)。基于此，我们看到TypeScript忽略了SystemJS，它只查看文件夹结构中的特定位置。

由于导入是非相对类型，它将在node_modules中查找与“twitch”匹配的文件，还将查找扩展名‘. to’、‘..tsx’、'.d.ts‘的文件。有趣的是，这是一个URL，文件夹结构中没有文件。在正常情况下，TypeScript需要这样做，这样才能正确地构建JS文件。不幸的是，for没有提供..ts/..tsx/ .d.ts文件，而DefinitelyTyped也没有为for提供.d.ts文件。

因此，我所做的工作就是为Twitch创建自己的.d.ts文件(不完整，也不正确)。因此，在我的"node_modules“文件夹中，我创建了一个名为”twitch“的文件夹，然后创建了文件"index.d.ts"，在该文件中，我将这个定义放入其中(再次说明，这不是定义代码，因为我不知道”Twitch.Player“(”视频播放器“，选项)方法是什么；”实际上返回，但它仍然工作，因为SystemJS没有使用定义文件)。

export class Twitch{
    static Player(type:string,options:{}):void;    
}

export class Player{
    constructor(type:string,options:{});
}

一旦这两件事就绪，我就可以使用一个完整的导入语句，如

import {Twitch,Player} from 'twitch-api'

在您的示例中，您可能需要为用于Twitch/Player对象的任何其他方法或属性向定义文件中添加更多内容。

最后，我不知道为什么您能够通过声明一个带有“to : any”的变量来解决这个问题。我认为这是因为“导入‘twitch’”会导致TypeScript编译器不执行它通常会执行的某些检查。这意味着它只需要知道什么是“抽搐”，而不会看得很深。这是我最好的猜测。

更新所以我的第一个猜测是完全错误的，我开始在你的设置的基础上玩插件，很明显这是另外一回事。我将柱塞分叉到新的中，如果我知道如何正确实例化Twitch.Player，它将在示例中工作。

当在运行时执行更改后，这一点应该是显而易见的。您所看到的错误在类型记录编译器中。我不知道您在使用什么IDE，但我使用的是VS代码，我遇到了这些代码，因为"import“语句的工作方式与柱塞中不同。

我想你快到了，但你需要两者的结合。第一个示例失败的原因是“twitch”不是导入命令中的可识别包。

我认为第二次尝试失败的原因是如何实现映射和包对象。下面是一个柱塞，它展示了如何使用外部URL实现配置。以下是config.js文件的摘录。我不确定所有规则，因为当您需要使用"main“属性时，如果文件没有命名为"index”，或者它不遵循包的名称，我认为您必须使用它？

var  map = {
'app':                        'src', // 'dist',
'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',
'ng2-toastr':                 'https://npmcdn.com/ng2-toastr@0.3.0'
};

var packages = {
'app':                        { main: 'app.ts',  defaultExtension: 'ts' },
'rxjs':                       { defaultExtension: 'js' },
'ng2-toastr':                 { main: 'bundles/ng2-toastr.js', defaultExtension: 'js' }
};

Answer 2

在我看来，你似乎是在尝试在一个棱角/打字稿项目中使用。

最近我遇到了同样的问题，这就是为什么我决定为实现一个类型记录包装器。这是100%兼容的角度，所以如果你仍然需要一个方法来实现这一点，请检查这个存储库。我知道我晚了几年，但我还是把这个留给其他人吧。

希望它对^^有帮助

https://github.com/frozencure/twitch-player